box-shadow上下左右四个边框设置阴影样式

深碍√TFBOYSˉ_ 2022-09-01 13:55 324阅读 0赞

### box-shadow上下左右四个边框设置阴影样式 ###

*   *   *  语法
         *  值 / 说明
         *  四个不同样式
         *  加点阴影
         *  实现效果比如这样的:

### 语法 ###

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

注意：boxShadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表，每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。

### 值 / 说明 ###

h-shadow 必需的。水平阴影的位置。允许负值  
v-shadow 必需的。垂直阴影的位置。允许负值  
blur 可选。模糊距离  
spread 可选。阴影的大小  
color 可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表  
inset 可选。从外层的阴影（开始时）改变阴影内侧阴影

### 四个不同样式 ###

box-shadow:    0px -10px 0px 0px #ff0000,   /*上边阴影 红色*/
    
                    -10px 0px 0px 0px #3bee17,   /*左边阴影 绿色*/
    
                    10px 0px 0px 0px #2279ee,    /*右边阴影 蓝色*/
    
                    0px 10px 0px 0px #eede15;    /*下边阴影 黄色*/

![box-shadow:    0px -10px 0px 0px \#ff0000,  -10px 0px 0px 0px \#3bee17,   10px 0px 0px 0px \#2279ee,  0px 10px 0px 0px \#eede15;][box-shadow_ 0px -10px 0px 0px _ff0000_ -10px 0px 0px 0px _3bee17_ 10px 0px 0px 0px _2279ee_ 0px 10px 0px 0px _eede15]

### 加点阴影 ###

box-shadow: 0px -5px 10px 0px #ff0000, 
    			-6px 0px 6px 0px #3bee17, 
    			6px 0px 6px 0px #2279ee, 
    			0px 5px 19px 0px #eede15;

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzQyMzM4OTYy_size_1_color_FFFFFF_t_70]

### 实现效果比如这样的: ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzQyMzM4OTYy_size_1_color_FFFFFF_t_70 1]

[box-shadow_ 0px -10px 0px 0px _ff0000_ -10px 0px 0px 0px _3bee17_ 10px 0px 0px 0px _2279ee_ 0px 10px 0px 0px _eede15]: /images/20220829/2ddfe6ab6cca4b6490c0ae581364e387.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzQyMzM4OTYy_size_1_color_FFFFFF_t_70]: /images/20220829/0332cde173aa4c7b8fa1fb5977c2a8c5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzQyMzM4OTYy_size_1_color_FFFFFF_t_70 1]: /images/20220829/5131ee3607924e4d9e33db6eab39760f.png