您现在的位置：首页 >> 前端 >> 内容

左竖条的8种实现方式（代码教程）

时间：2018/2/24 14:16:21 点击：

　　核心提示：左竖条8种实现方式1、效果图 2、代码!DOCTYPE htmlhtml lang=enheadmeta charset=UTF-8title左边竖条/titlestyle type=text/css...

左竖条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>