左竖条8种实现方式
【摘要】
左竖条8种实现方式
1、效果图
2、代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>左边竖条</title> <sty...
左竖条8种实现方式
1、效果图
2、代码
-
<!DOCTYPE html>
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<title>左边竖条</title>
-
<style type="text/css">
-
div {
-
position: relative;
-
width: 200px;
-
height: 60px;
-
background: #ddd;
-
}
-
-
#div1 {
-
border-left: 5px solid deeppink;
-
}
-
-
#div2::after {
-
content: "";
-
width: 5px;
-
height: 60px;
-
position: absolute;
-
top: 0;
-
left: 0;
-
background: deeppink;
-
}
-
-
#div3 {
-
box-shadow: -5px 0 0 0 deeppink;
-
}
-
-
#div4 {
-
box-shadow: inset 5px 0 0 0 deeppink;
-
}
-
-
#div5 {
-
filter:drop-shadow(-5px 0 0 deeppink);
-
}
-
-
#div6 {
-
background-image: linear-gradient(90deg, deeppink 5px, transparent 5px);
-
}
-
-
#div7 {
-
height: 50px;
-
outline: 5px solid deeppink;
-
}
-
-
#div7:after {
-
position: absolute;
-
content: "";
-
top: -5px;
-
bottom: -5px;
-
right: -5px;
-
left: 0;
-
background: #ddd;
-
}
-
-
#div8 {
-
width: 205px;
-
background: deeppink;
-
overflow-y: scroll;
-
}
-
-
#div8::-webkit-scrollbar {
-
width: 200px;
-
background-color: #ddd;
-
}
-
-
</style>
-
</head>
-
<body>
-
<div id="div1"></div>
-
<hr/>
-
<div id="div2"></div>
-
<hr/>
-
<div id="div3"></div>
-
<hr/>
-
<div id="div4"></div>
-
<hr/>
-
<div id="div5"></div>
-
<hr/>
-
<div id="div6"></div>
-
<hr/>
-
<div id="div7"></div>
-
<hr/>
-
<div id="div8"></div>
-
</body>
-
</html>
文章来源: howard2005.blog.csdn.net，作者：howard2005，版权归原作者所有，如需转载，请联系作者。
原文链接：howard2005.blog.csdn.net/article/details/79358099
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）