左竖条 8 种实现方式
1 效果图
2 代码
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title > 左边竖条 </title>
- <style type="text/CSS">
- p {
- position: relative;
- width: 200px;
- height: 60px;
- background: #ddd;
- }
- #p1 {
- border-left: 5px solid deeppink;
- }
- #p2::after {
- content: "";
- width: 5px;
- height: 60px;
- position: absolute;
- top: 0;
- left: 0;
- background: deeppink;
- }
- #p3 {
- box-shadow: -5px 0 0 0 deeppink;
- }
- #p4 {
- box-shadow: inset 5px 0 0 0 deeppink;
- }
- #p5 {
- filter:drop-shadow(-5px 0 0 deeppink);
- }
- #p6 {
- background-image: linear-gradient(90deg, deeppink 5px, transparent 5px);
- }
- #p7 {
- height: 50px;
- outline: 5px solid deeppink;
- }
- #p7:after {
- position: absolute;
- content: "";
- top: -5px;
- bottom: -5px;
- right: -5px;
- left: 0;
- background: #ddd;
- }
- #p8 {
- width: 205px;
- background: deeppink;
- overflow-y: scroll;
- }
- #p8::-webkit-scrollbar {
- width: 200px;
- background-color: #ddd;
- }
- </style>
- </head>
- <body>
- <p id="p1"></p>
- <hr/>
- <p id="p2"></p>
- <hr/>
- <p id="p3"></p>
- <hr/>
- <p id="p4"></p>
- <hr/>
- <p id="p5"></p>
- <hr/>
- <p id="p6"></p>
- <hr/>
- <p id="p7"></p>
- <hr/>
- <p id="p8"></p>
- </body>
- </html>
来源: https://www.2cto.com/kf/201802/723133.html