首页 > 其他分享 >css 伪类实现渐变线条

css 伪类实现渐变线条

时间:2022-08-17 11:11:08浏览次数:70  
标签:157 伪类 158 渐变 rgba css 255

如下图所示:

 

 

需要实现渐变的小竖线或者小横线

可以用伪类,

代码如下:

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设置透明度

就可以实现了

标签:157,伪类,158,渐变,rgba,css,255
From: https://www.cnblogs.com/yeziyou/p/16594366.html

相关文章

  • CSS display 属性
    display属性规定元素应该生成的框的类型。默认为inline。值为none为不显示 inline与block的区别:inline: block: display:flex 意思是弹性布局,它能够扩展和收缩......
  • css 隐藏元素
    display,visibility仅会改变元素显示,不会改变元素种类。可以配合js使用使元素可以动态的显示隐藏。可以使用display或visibility实现html元素的隐藏功能,但......
  • 2.如何用一行Css实现10种现代布局
    1.超级居中place-items:center 首先指定grid作为display方法,然后在同一个元素上写入place-items:center。place-items是同时设置align-items和justify-ite......
  • CSS实现单行与多行文字截断
    <style>main{width:100%;display:flex;flex-direction:column;align-items:center;}p{width:329px;text-align:justify;......
  • 【CSS】实现简单易上手的'手风琴效果'
    【CSS】实现简单易上手的'手风琴效果'点击打开视频讲解<template><divid="app"><divclass="shell"><divclass="box"><imgsrc="./assets/img......
  • CSS之轻松实现rem适配
    1.vsCode安装pxtorem&rpx(cssrem)2.修改扩展rootfontsize这样就轻松使用rem了......
  • css的animate做一个信号动画
     html<divclass="jumpflex-fsfadeAndScaleIn"><span></span><span></span><span></span></div> css.jump{ align-items:flex-end; m......
  • css
    层叠样式表,给html标签添加样式注释:/*单行注释*//*多行注释多行注释*/css的结构语法选择器{属性1:值1;属性2:值2;属性3:值3;属性4:值4;}css的三种引入方式......
  • 博客园代码美化css
     .cnblogs_codepre{font-family:CourierNew!important;font-size:15px!important;word-wrap:break-word;white-space:pre-wrap;}.cnblogs_codespan{fo......
  • css - 垂直文字
    css-垂直文字<!--*@createDate:2022-08-1513:59:01*@Author:zclee*@LastEditTime:2022-08-1515:14:57*@LastEditors:zclee*@FilePath:\lee-vue-......