前端开发：使用css实现左边竖条的8种方法

只使用一个标签，可以有多少种实现下面的样式呢?

成都创新互联公司专注于企业成都全网营销、网站重做改版、邵阳网站定制设计、自适应品牌网站建设、成都h5网站建设、商城网站定制开发、集团公司官网建设、外贸网站建设、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为邵阳等各大城市提供网站开发制作服务。

假设我们的单标签是一个 div:

 
 
 
    
  
  
  
  1.  
    2.

 

定义如下通用CSS：

 
 
 
    
  
  
  
  1. div{ 
    2. 
  
  
  
  2.     position:relative; 
    3. 
  
  
  
  3.     width:200px; 
    4. 
  
  
  
  4.     height:60px; 
    5. 
  
  
  
  5.     background:#ddd; 
    6. 
  
  
  
  6. } 
    7.

法一：border

这个应该是最最最容易想到的了

 
 
 
    
  
  
  
  1. div{ 
    2. 
  
  
  
  2.     border-left:5px solid deeppink; 
    3. 
  
  
  
  3. } 
    4.

法二：使用伪元素

一个标签，算上 before 与 after 伪元素，其实算是有三个标签，这也是很多单标签作图的基础，本题中，使用伪元素可以轻易完成。

 
 
 
    
  
  
  
  1. div::after{ 
    2. 
  
  
  
  2.     content:""; 
    3. 
  
  
  
  3.     width:5px; 
    4. 
  
  
  
  4.     height:60px; 
    5. 
  
  
  
  5.     position:absolute; 
    6. 
  
  
  
  6.     top:0; 
    7. 
  
  
  
  7.     left:0; 
    8. 
  
  
  
  8.     background:deeppink; 
    9. 
  
  
  
  9. } 
    10.

法三：外 box-shadow

盒阴影 box-shadow 大部分人都只是用了生成阴影，其实阴影可以有多重阴影，阴影不可以不虚化，这就需要去了解一下 box-shaodw 的每一个参数具体作用。使用 box-shaodw 解题

 
 
 
    
  
  
  
  1. div{ 
    2. 
  
  
  
  2.     box-shadow:-5px 0px 0 0 deeppink; 
    3. 
  
  
  
  3. } 
    4.

法四：内 box-shadow

盒阴影还有一个参数 inset ，用于设置内阴影，也可以完成：

 
 
 
    
  
  
  
  1. div{ 
    2. 
  
  
  
  2.     box-shadow:inset 5px 0px 0 0 deeppink; 
    3. 
  
  
  
  3. } 
    4.

法五：drop-shadow

drop-shadow 是 CSS3 新增滤镜 filter 中的其中一个滤镜，也可以生成阴影，不过它的数值参数个数只有 3 个，比之 box-shadow 少一个。

 
 
 
    
  
  
  
  1. div{ 
    2. 
  
  
  
  2.     filter:drop-shadow(-5px 0 0 deeppink); 
    3. 
  
  
  
  3. } 
    4.

法六：渐变 linearGradient

灵活使用 CSS3 的渐变可以完成大量想不到的图形，CSS3 的渐变分为线性渐变和径向渐变，本题使用线性渐变，可以轻易解题：

 
 
 
    
  
  
  
  1. div{ 
    2. 
  
  
  
  2.     background-image:linear-gradient(90deg, deeppink 0px, deeppink 5px, transparent 5px); 
    3. 
  
  
  
  3. } 
    4.

法七：轮廓 outline

这个用的比较少，outline (轮廓)是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。这个方法算是下下之选。

 
 
 
    
  
  
  
  1. div{ 
    2. 
  
  
  
  2.     height:50px; 
    3. 
  
  
  
  3.     outline:5px solid deeppink; 
    4. 
  
  
  
  4. } 
    5. 
  
  
  
  5. div::after{ 
    6. 
  
  
  
  6.     position:absolute; 
    7. 
  
  
  
  7.     content:""; 
    8. 
  
  
  
  8.     top:-5px; 
    9. 
  
  
  
  9.     bottom:-5px; 
    10. 
  
  
  
  10.     right:-5px; 
    11. 
  
  
  
  11.     left:0; 
    12. 
  
  
  
  12.     background:#ddd; 
    13. 
  
  
  
  13. } 
    14.

法八、滚动条

这个方法由小火柴的蓝色理想提供，通过改变滚动条样式实现：

 
 
 
    
  
  
  
  1. div{ 
    2. 
  
  
  
  2.     width:205px; 
    3. 
  
  
  
  3.     background:deeppink; 
    4. 
  
  
  
  4.     overflow-y:scroll; 
    5. 
  
  
  
  5. } 
    6. 
  
  
  
  6. div::-webkit-scrollbar{ 
    7. 
  
  
  
  7.     width: 200px; 
    8. 
  
  
  
  8.     background-color:#ddd; 
    9. 
  
  
  
  9. } 
    10.

抛开实用性，仅仅是模拟出这个样式的话，这个方法真的让人眼前一亮。

上述就是想到的 8 种方法，不排除有没想到的，希望有其他的方法可以在评论中提出。可以自己动手尝试尝试。

【本文为专栏作者“谢军”的原创稿件，转载可通过作者微信公众号(jingfeng18)获取联系】

文章标题：前端开发：使用css实现左边竖条的8种方法
本文地址：http://www.shufengxianlan.com/qtweb/news2/76952.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

软件开发知识

行业网站建设

托管服务器　　 　免费收录网站　　 　成都门窗定制　　 　成都塑料加工　　 　古蔺网站建设　　 　南充主机托管　　 　广安网站制作公司　　 　名片设计　　 　成都网站建设　　 　网站解决方案　　 　成都酒店服定制　　 　域名注册　　 　成都网站制作　　 　成都网站建设　　 　成都企业网站维护　　 　成都网站设计　　 　阿坝网站建设　　 　营销型网站建设　　 　微信开发　　 　四川雕琢时光