css揭秘--2多重边框

短命女 2022-12-23 15:20 153阅读 0赞

# css揭秘–多重边框 #

### 文章目录 ###

*  css揭秘--多重边框
 *   *  1.box-shadow方案
     *  2.outline方案

## 1.box-shadow方案 ##

首先要了解box-shadow的基本用法

MDN：CSS box-shadow 属性用于在元素的框架上添加阴影效果。你**可以在同一个元素上设置多个阴影效果，并用逗号将他们分隔开**。该属性可设置的值包括阴影的X轴偏移量、Y轴偏移量、模糊半径、扩散半径和颜色。

一个**正值的扩张半径**加上**两个为零的偏移量**以及**为零的模糊值**，得到的“投影”其实就像一道实线边框。  
如：

<div><p>Hello World</p></div>

div{ 
        margin: 4em;
        padding:1em;
        background: yellowgreen;
        box-shadow: 0 0 0 10px #655;
    }

![在这里插入图片描述][20201125162606525.png_pic_center]  
是不是和border属性效果很像~  
但是box-shadow的好处在于，**它支持逗号分隔符，就可以创建任意数量的投影。**  
即：(用了MDN的例子 好看些)

div{ 
        width: 400px;
        margin: 4em;
        padding:1em;
    	box-shadow: 0 0 0 2em #F4AAB9,
                    0 0 0 4em #66CCFF;
    }

要注意的是：

1.  box-shadow是层层叠加的，**第一层投影位于最顶层，以此类推**。因此，你需要按此规律扩张半径。比如说还想在外圈加一道2em的边框，那就需要指定扩张半径(box-shadow的第四个参数)的值为6em(4em+2em)，但这里margin只有4em，也就是最外层边框上、左两部分是看不到的，因为投影不算内容，要显示的话可以增大margin。
2.  上述方法创建出的“假边框”出现在元素的**外圈**。它们并不会响应鼠标事件，比如悬停和点击。这一点非常重要，你可以给box-shadow属性加上inset关键字，来使投影绘制在元素的**内圈**。(给元素加个title属性就可以清楚了)请注意，此时你需要增加额外的内边距来腾出足够的空隙  
    如(这里增大了padding，margin就无所谓了，另外可以发现，加inset以后投影效果和不加的效果恰好是相反的 很有意思 )：

div{ 
        width: 400px;
        margin: 1em;
        padding: 5em;
    	box-shadow: inset 0 0 0 2em #F4AAB9,
                    inset 0 0 0 4em #66CCFF;
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU4MDEzOQ_size_16_color_FFFFFF_t_70_pic_center 1]  
总结来说就是：  
box-shadow: (inset) 0 0 0 2em \#F4AAB9,可以投影出边框的效果  
不加inset关键字就是往外投影，那自然就要调整margin以至于不影响周围元素，但往外投影，投影部分不会响应鼠标事件。  
加inset关键字就是往内投影，自然就要调整padding以至于不在视觉上遮盖元素内容，投影可以响应鼠标事件。

## 2.outline方案 ##

在某些情况下，**你可能只需要两层边框**，那就可以先设置一层常规边框，再加上**outline**(描边/轮廓)属性来产生外层的边框。

MDN： CSS 的 outline 属性是在一条声明中设置多个轮廓属性的简写属性。

> border 和 outline 很类似，但有如下区别：
> 
>  *  outline不占据空间，绘制于元素内容周围。
>  *  根据规范，outline通常是矩形，但也可以是非矩形的。
> 
> 将 outline 设置为 0 或 none 会移除浏览器的默认聚焦样式(比如input元素)。如果一个元素可交互，这个元素必须有一个可见的聚焦提示。若移除了默认聚焦样式，记得提供一个显眼的聚焦样式。

如：

div{ 
        margin: 2em 2em;
        background: yellowgreen;
        border: 10px solid #655;
        outline: 5px solid deeppink;
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU4MDEzOQ_size_16_color_FFFFFF_t_70_pic_center 2]  
优点：

*  边框样式更加灵活，前者只能模拟实现边框
 *  可以通过outline-offset属性来控制它跟元素边缘之间的间距，这个属性也接受负值。
 *  outline是支持鼠标事件

缺点：

*  只适用于双层边框，不支持逗号分隔的多指
 *  边框不一定会贴合border-radius属性产生的圆角  
    如：加一个border-radius属性

border-radius: 5px;

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

[20201125162606525.png_pic_center]: /images/20221120/c472aedc7a8549c3b8c99ba11ab4589a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU4MDEzOQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/3bec9142ddb04790903e5fcf6ce3d252.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU4MDEzOQ_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221120/0ed9ebfe5e2b403ca1fd959f8c6d4211.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU4MDEzOQ_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221120/5e91bbff50b44aa5882fde60f4a69232.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU4MDEzOQ_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221120/8b38af6a60e7465fbf54a31901d98bc7.png