css实现边竖条的多种方式：border、使用伪元素、外 box-shadow、内 box-shadow、drop-shadow、渐变 linearGradient、轮廓 outline、滚动条
<p></p>
p{
position:relative;
width:200px;
height:60px;
background:#ddd;
}
方法一：border
p{
border-left:5px solid deeppink;
}
方法二：使用伪元素
p::after{
content:"";
width:5px;
height:60px;
position:absolute;
top:0;
left:0;
background:deeppink;
}
方法三：外 box-shadow
p{
box-shadow:-5px 0px 0 0 deeppink;
}
方法四：内 box-shadow
p{
box-shadow:inset 5px 0px 0 0 deeppink;
}
方法五：drop-shadow
p{
filter:drop-shadow(-5px 0 0 deeppink);
}
方法六：渐变 linearGradient
p{
background-image:linear-gradient(90deg, deeppink 0px, deeppink 5px, transparent 5px);
}
方法七：轮廓 outline
p{
height:50px;
outline:5px solid deeppink;
}
p::after{
position:absolute;
content:"";
top:-5px;
bottom:-5px;
right:-5px;
left:0;
background:#ddd;
}
方法八、滚动条
p{
width:205px;
background:deeppink;
overflow-y:scroll;
}
p::-webkit-scrollbar{
width: 200px;
background-color:#ddd;
}
服务热线 19970861797
