有趣的 CSS 题目（1）： 左边竖条的实现方法
作者：伯乐在线专栏作者 - chokcoco 链接：http://web.jobbole.com/88197/
div{
position:relative;
width:200px;
height:60px;
background:#ddd;
}
div{
border-left:5px solid deeppink;
}
div::after{
content:"";
width:5px;
height:60px;
position:absolute;
top:0;
left:0;
background:deeppink;
}
div{
box-shadow:-5px 0px 0 0 deeppink;
}
div{
box-shadow:inset 5px 0px 0 0 deeppink;
}
div{
filter:drop-shadow(-5px 0 0 deeppink);
}
div{
background-image:linear-gradient(90deg, deeppink 0px, deeppink 5px, transparent 5px);
}
div{
height:50px;
outline:5px solid deeppink;
}
div{
position:absolute;
content:"";
top:-5px;
bottom:-5px;
right:-5px;
left:0;
background:#ddd;
}
div{
width:205px;
background:deeppink;
overflow-y:scroll;
}
div::-webkit-scrollbar{
width: 200px;
background-color:#ddd;
}
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！