边框渐变样式

news2024/10/6 22:26:28

 实现样式:

 对应代码:

div {
  min-height: 40vh;
  border: 10px solid transparent;
  background-image: linear-gradient(#222, #222), var(--gradient);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  border-radius: 10px;
  position: relative;
  padding: 0 10px;
}

div::after {
  content: attr(style);
  font-size: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  line-height: 1.5;
}

<div style="--gradient: linear-gradient(red, gold)"></div>
<div style="--gradient: radial-gradient(circle at left top,red, gold)"></div>
<div style="--gradient: conic-gradient(red, gold)"></div>
<div style="--gradient: repeating-linear-gradient(red, red 10%, gold 10%, gold 20%)"></div>
<div style="--gradient: repeating-radial-gradient(circle at left top, red, red 10px, gold 10px, gold 20px)"></div>
<div style="--gradient: repeating-conic-gradient(red, gold 20deg)"></div>
<div class="stripe" style="--gradient: repeating-linear-gradient(45deg, white 0%,white 7.5px,hotpink 7.5px,hotpink 15px,white 15px,white 22.5px,hotpink 22.5px,hotpink 30px)"></div>

可调式链接:

https://codepen.io/airen/pen/jOvxjzd

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1693262.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【深度学习】yolov8 seg实例分割训练,交通灯

文章目录 一、类别定义二、标注后再清洗数据三、训练yolov8 seg四、部署五、代码资料 一、类别定义 类别0&#xff1a; 类别1&#xff1a; 类别2&#xff1a; 类别3&#xff1a; 类别4&#xff1a; 类别5&#xff1a; 类别6&#xff1a; 类别7&#xff1a; 二、标注后再清洗…

kubernetes之prometheus kube-controller-manager。 scheduler报错问题

项目场景&#xff1a; prometheus scheduler及kube-controller-manager监控报错 问题描述 kubeadm搭建完kube-prometheus 会有这个报错 原因分析&#xff1a; rootmaster2:~# kubectl describe servicemonitor -n kube-system kube-controller-manager通过以上图片我们发现 k…

数据结构_链式二叉树(Chained binary tree)基础

✨✨所属专栏&#xff1a;数据结构✨✨ ✨✨作者主页&#xff1a;嶔某✨✨ 二叉树的遍历 前序、中序以及后序遍历 学习二叉树结构&#xff0c;最简单的方式就是遍历。所谓二叉树遍历(Traversal)是按照某种特定的规则&#xff0c;依次对二叉树中的结点进行相应的操作&#xff…

自己手写一个栈【C风格】

#include <iostream> //栈 #define MAX_SIZE 20 #define OK 1 #define ERROR 0 #define TRUE 1 #define FALSE 0typedef int Status;//状态类型 typedef int ElemType;//元素类型typedef struct SqStack {ElemType data[MAX_SIZE];int top; };//初始化&#xff0c;方法1 …

安装 Ubuntu桌面版,详细步骤(附引导 U盘制作工具)

下载镜像 安装Ubuntu首先要下载镜像包&#xff0c;访问下面网址下载镜像包 https://releases.ubuntu.com/ 选择你要安装的Ubuntu版本 将 .iso 文件保存到所需位置&#xff0c;下面会使用此文件创建可引导 U盘。 制作 Ubuntu 引导 U 盘 首先要找到一个大于4G的U盘&#xff…

用Python Pygame做的一些好玩的小游戏

有些游戏的代码比较长就不公布了 1.简简单单 1.疯狂的鸡哥 你要准备的图片&#xff1a; 命名为&#xff1a;ji.png 代码&#xff1a; import pygame import random as r pygame.init() pygame.display.set_caption(aaa) pm pygame.display.set_mode((800,600))class Ls(py…

三前奏:获取/ 读取/ 评估数据【数据分析】

各位大佬好 &#xff0c;这里是阿川的博客 &#xff0c; 祝您变得更强 个人主页&#xff1a;在线OJ的阿川 大佬的支持和鼓励&#xff0c;将是我成长路上最大的动力 阿川水平有限&#xff0c;如有错误&#xff0c;欢迎大佬指正 前面的博客 数据分析—技术栈和开发环境搭建 …

Excel提取某一列的唯一值

点击【筛选】&#xff08;【高级筛选】&#xff09;&#xff0c;参数里&#xff1a; 列表区域&#xff1a;为需要选择唯一值的那一列复制到&#xff1a;生成唯一值的目标区域 据说新版本的excel有了unique()函数&#xff0c;可以很快捷的选择某一列的唯一值&#xff0c;但是博…

深度学习500问——Chapter09:图像分割(3)

文章目录 9.8 PSPNet 9.9 DeepLab系列 9.9.1 DeepLabv1 9.9.2 DeepLabv2 9.9.3 DeeoLabv3 9.9.4 DeepLabv3 9.8 PSPNet 场景解析对于无限制的开放词汇和不同场景来说是具有挑战性的。本文使用文中的 pyramid pooling module 实现基于不同区域的上下文集成&#xff0c;提出了PS…

Java进阶学习笔记14——模板方法设计模式

面试和看源码。 谈到设计模式&#xff1a; 1、解决了什么问题&#xff1f; 2、怎么写&#xff1f; 模板方法设计模式解决了什么问题&#xff1f; 解决方法中存在重复代码的问题。 写法&#xff1a; 1&#xff09;定义一个抽象类&#xff1a; 2&#xff09;在里面定义两个方…

阅读笔记——《ProFuzzBench: A Benchmark for Stateful Protocol Fuzzing》

【参考文献】Natella R, Pham V T. Profuzzbench: A benchmark for stateful protocol fuzzing[C]//Proceedings of the 30th ACM SIGSOFT international symposium on software testing and analysis. 2021: 662-665.【注】本文仅为作者个人学习笔记&#xff0c;如有冒犯&…

Java反射角度简单理解spring IOC容器

概述 Java反射&#xff08;Reflection&#xff09;是Java编程语言的一个特性&#xff0c;它允许在运行时对类、接口、字段和方法进行动态查询和操作。反射提供了一种在运行时查看和修改程序行为的能力&#xff0c;这通常用于实现一些高级功能&#xff0c;如框架(Spring)、ORM&…

【正点原子Linux连载】 第四十七章 音频驱动实验摘自【正点原子】ATK-DLRK3568嵌入式Linux驱动开发指南

1&#xff09;实验平台&#xff1a;正点原子ATK-DLRK3568开发板 2&#xff09;平台购买地址&#xff1a;https://detail.tmall.com/item.htm?id731866264428 3&#xff09;全套实验源码手册视频下载地址&#xff1a; http://www.openedv.com/docs/boards/xiaoxitongban 第四十…

EEGLAB的相关使用

目录 概念 1.安装EEGLAB 2.文件实例演示 导入数据集处理 &#xff08;1&#xff09;导入数据集 &#xff08;2&#xff09;画图 &#xff08;3&#xff09; 修改并存储数据集 &#xff08;4&#xff09; 保存数据集 &#xff08;5&#xff09; 删除数据集 &#xff0…

零基础HTML教程(33)--HTML5表单新功能

文章目录 1. 背景2. HTML5新增表单元素2.1 number (数字输入框)2.2 email (邮箱输入框)2.3 url (链接输入框)2.4 tel (电话输入框)2.5 range (范围选择框)2.6 color (颜色选择框)2.7 datetime (日期时间选择框)2.8 search (搜索框) 3. placeholder &#xff08;占位属性&#x…

php TP8 阿里云短信服务SDKV 2.0

安装&#xff1a;composer require alibabacloud/dysmsapi-20170525 2.0.24 官方文档&#xff1a;短信服务_SDK中心-阿里云OpenAPI开发者门户 (aliyun.com) 特别注意&#xff1a;传入参数获得值形式 正确&#xff1a; $PhoneNumbers $postData[PhoneNumbers];$signName $po…

Vue集成Iframe

一、应用场景&#xff0c;为什么要集成Iframe&#xff1f; 1、庞大项目拆分后&#xff0c;便于管理和部署&#xff0c;用集成Iframe的方法合并 2、避免功能重复开发&#xff0c;共用模块可单独开发为一个项目&#xff0c;既可独立部署&#xff0c;也可集成到中台系统 二、集成…

【feature selection】特征选择学习笔记

文章目录 1. 什么是特征选择2. 特征选择与特征提取的区别3. 特征选择的方法3.1 Filtering过滤法3.2 Wrapper包装法3.3 Embedding嵌入法 4. 特征选择示例4.1 方差选择法示例4.2 递归特征消除法示例 1. 什么是特征选择 特征选择是特征工程的内容, 其目标是寻找最优特征子集。剔除…

暴雨“彩虹”行业大模型加速器平台全新发布

近日&#xff0c;在第七届数字中国建设峰会期间&#xff0c;暴雨信息全新发布“彩虹”行业大模型加速器平台&#xff0c;聚焦于为客户降本增效减负&#xff0c;将海量通用数据与行业特有数据融合&#xff0c;专注于流程工艺的智能化改进&#xff0c;因地制宜深挖业务需求&#…

图像上下文学习|多模态基础模型中的多镜头情境学习

【原文】众所周知&#xff0c;大型语言模型在小样本上下文学习&#xff08;ICL&#xff09;方面非常有效。多模态基础模型的最新进展实现了前所未有的长上下文窗口&#xff0c;为探索其执行 ICL 的能力提供了机会&#xff0c;并提供了更多演示示例。在这项工作中&#xff0c;我…