box-shadow做出一条线两种颜色

时间：2021-10-31 07:04:17

今天同事问我一个问题，说下图的效果是怎么实现的

box-shadow做出一条线两种颜色

我当时想都没有想说这不就是两条线嘛，他说是一条线用box-shadow做出来的，之前也没有遇到过，觉得很有意思就试了一把。

语法

box-shadow: h-shadow v-shadow blur spread color inset;

注释：box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是

值 描述  
h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊距离。
spread 可选。阴影的尺寸。
color 可选。阴影的颜色。请参阅 CSS 颜色值。
inset 可选。将外部阴影 (outset) 改为内部阴影。

注意我把前两个必需属性里面有个允许负值都标成了红色，这是关键。

好了，科普完成，上手后发现正常给值的话线一直会有两边阴影，这样的话是达不到上图的效果的，我们要的是单边的阴影效果。

 <style type="text/css">

     .box-shadow {

       width: 200px;

       height: 100px;

       border-radius: 5px;

       border: 1px solid #ccc;

       margin: 20px;

     }

     .top {

       box-shadow:  -2px  red;

     }

     .right {

       box-shadow: 2px   green;

     }

     .bottom {

       box-shadow:  2px  blue;

     }

     .left {

       box-shadow: -2px   orange;

     }

   style> 
 <div class="box-shadow top">div>

 <div class="box-shadow right">div>

 <div class="box-shadow bottom">div>

 <div class="box-shadow left">div>

效果如下图：

box-shadow做出一条线两种颜色

最后的代码：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

     </head>

     <style type="text/css">

         .border{

             height: 200px;

             border-left : 1px solid red;

             box-shadow: -1px  black;

         }

     </style>

     <body>

         <div class="border"></div>

     </body>

 </html>

相关文章