css魔法之左侧竖条的多种多样完成方式

日期:2020-09-30 类型:科技新闻 

关键词:微信小程序页面设计,python小程序,小程序首页模板,如何建立微信小程序,怎么做微信小程序

难题叙述:在只应用1个标识的状况下完成左侧竖线

通用性标识与款式以下:

html:

<div class="div1">完成左侧竖线</div>

css:

 .div1 {
        width: 200px;
        height: 50px;
        line-height:50px;
        text-align: center;
        background: #ccc;
        position: relative;
  }

方式1:应用border

.div1 { border-left: 5px solid red;}

方式2:应用伪元向来完成

每一个标识都会有before及after两个伪元素,而且大家也常常用这类标识做1些Icon之类的小标志。这里大家应用伪元素,也会很非常容易来完成要想的实际效果。

 .div1::before {
        content: "";
        width: 5px;
        height:50px;
        position: absolute;
        top: 0;
        left: 0;
        background: red;
    }

方式3:内/外黑影

应用内黑影或外黑影也能完成此实际效果,但是在一些Chrome(例如:Chrome/70.0)版本号上会底部1px适配性难题,别的访问器没遇到。

    /* 内黑影 */
    .div1{
        box-shadow:inset 5px 0px 0 0 red;
    }

    /* 外黑影  一些Chrome(例如:Chrome/70.0)版本号上会底部1px适配性难题,显示信息实际效果以下图*/
    .div1{
        box-shadow:⑸px 0px 0 0 red;
    }

在Chrome/70.0下显示信息实际效果

方式4:drop-shadow

CSS3 新增滤镜 filter 中的在其中1个滤镜drop-shadow,还可以转化成黑影。

.div1{
   filter:drop-shadow(⑸px 0 0 red); 
 }

方式5:渐变色 linearGradient

 .div1 {
    background-image: linear-gradient(90deg, red 0px, red 5px, transparent 5px);
  }

另外还能够用outline或翻转条的方式来完成,可是这两种的体验实际效果或适配性都并不是太好,不强烈推荐应用。

总结

以上所述是网编给大伙儿详细介绍的css魔法之左侧竖条的多种多样完成方式,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑欢迎给我留言,网编会立即回应大伙儿的!