css 伪类实现渐变线条
2024-10-21 17:33:19
如下图所示：
需要实现渐变的小竖线或者小横线
可以用伪类，
代码如下：
div {
position: relative;
z-index: 2;
&::after{
content: '';
position: absolute;
z-index: 4;
right: 0;
top: 10%;
bottom: 10%;
width: 1px;
background: linear-gradient(to bottom, rgba(255, 157, 158, .2), rgba(255, 157, 158, 1), rgba(255, 157, 158, .2)) } }
div 给相对定位，伪类给绝对定位，背景给从上到下的渐变色，用rgba设置透明度
就可以实现了
最新文章
- 【SpringMVC】SpringMVC系列2之@RequestMapping 映射约束请求
- The Name/Origin of Country names
- ubuntu 13.04下sublime text 3使用中文输入法
- NULL指针 Void* 和野指针
- JavaScript的Date 方法
- 我是怎样自学日语的(太TM励志了!)
- undefined reference to `png_set_longjmp_fn'
- Linux内核分析（四）----进程管理|网络子系统|虚拟文件系统|驱动简介
- 互信息应用于SNP特征选择的局限
- linux redis安装
- 笔记：查看linux系统开机时间
- java socket 和.net socket 通讯 demo
- CentOs查看文件的几种方式
- Centos7+LVS-DR+keepalived实验（包含sorry-server、日志、及HTTP-GET的健康检测）
- redis 系列6 数据结构之字典(下)
- layer弹出层父子页面交互（子页面form表单提交）
- Javascript高级编程学习笔记（49）—— DOM2和DOM3（1）DOM变化
- 互联网媒体类型 MIME Type
- Java多线程编程模式实战指南之Promise模式
- python 全栈开发，Day75(Django与Ajax,文件上传,ajax发送json数据,基于Ajax的文件上传,SweetAlert插件)