css左边竖条实现方法

2017-01-29

css中左边条是一个常见且常用的样式，比如：

首先得有个盒子

<div></div>
//样式
div{
    width: 500px;
    height:100px;
    margin: 400px auto;
    background-color: #6e8095;
}

这样子就是一个灰色的大盒子，其他啥也木有

border-left

这应该是最常用的加左边框的样式了

div{
    border-left: 5px solid deeppink;
    box-sizing: border-box;//边框创建再元素里面
}

伪类

使用after或者before,也可以轻松实现此功能，伪类涉及到定位，再div样式中加入position属性

div{
    .......
    position:relative;
}
div:after{
    content: "";
    width: 5px;
    height: 100px;
    position: absolute;
    top:0; 
    left: 0;
    background-color: deeppink;
}

box-shadow

使用盒阴影一般都是给盒子增加阴影呈现立体效果，参数包括水平/竖直阴影位置、模糊距离、阴影尺寸、颜色、修改位内阴影等。可以采用两种方式：

//外阴影会影响margin
div{
    .......
    box-shadow: -5px 0px 0 0 deeppink;
}
//内阴影
div{
    ......
    box-shadow: inset 5px 0px 0 0 deeppink;
}

drop-shadow

css3新特性，filter滤镜中的一个，用于生成阴影

div{
    .....
    filter:drop-shadow(-5px 0 0 deeppink)
}

linearGradient

css3新特性，线性渐变

div{
    ......
    background-image:linearGradient(90deg,deeppink 0px,deepink 5px, transparent 5px);
}

outline

outline——轮廓，绘制元素周边的线，突出元素的作用，效率较低，尽量别选

div{
    outline:5px solid deeppink;
}
div{
    position:absolute;
    content:"";
    top:-5px;
    bottom:-5px;
    right:-5px;
    left:0;
    background:#ddd;
}

scrollbar

滚动条的样式可以吗？可以，来个大大的滚动条。

div{
    width:505px;
    background:deeppink;
    overflow-y:scroll;
}
div::-webkit-scrollbar{
    width:500px;
    background-color:#ddd;
}