css揭秘--4边框内圆角

╰半橙微兮° 2022-12-24 00:57 129阅读 0赞

## 边框内圆角 ##

### 文章目录 ###

*   *  边框内圆角
     *   *  难题：
         *  解决：
         *  限制：

### 难题： ###

给元素添加border-radius属性后，边框外侧就会有圆角。而如何做到让边框内层有圆角，边框或描边的四个角在外部仍然保持直角的形状。  
如：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU4MDEzOQ_size_16_color_FFFFFF_t_70_pic_center]  
用两个嵌套的容器可以做到，那如何只用一个元素做到呢？

回想之前知识：

**盒子阴影跟着边框圆角走  
描边(轮廓)不跟着圆角走，设置了边框圆角，描边内外层还是直角(以后可能修复)**

### 解决： ###

1.  先给元素加一个border-radius属性,让元素边框外层形成圆角(不设置border属性也可以)

div{ 
        margin: 10em 10em;
        height: 200px;
        width: 300px;
    
        background: tan;
        padding: 1em;
        border-radius: .8em;
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU4MDEzOQ_size_16_color_FFFFFF_t_70_pic_center 1]  
2. 加一个描边outline

outline: .6em solid #655;

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU4MDEzOQ_size_16_color_FFFFFF_t_70_pic_center 2]  
3. 来一层投影把空隙盖住  
投影的颜色肯定和background一样啦，至于扩张半径(box-shadow的第四个参数)要比(√2 - 1)\*border-radius的结果大就行了(当然不能超过outline啦)

box-shadow: 0 0 0 .34em #655;

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

### 限制： ###

如果描边outline的宽度比 ( √2 - 1 )\*border-radius要小，那么就不能通过这个方法达成该效果。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU4MDEzOQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/6e33c28ab3a243c7ac82db2343545558.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU4MDEzOQ_size_16_color_FFFFFF_t_70_pic_center 1]: https://img-blog.csdnimg.cn/20201126105140530.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU4MDEzOQ==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU4MDEzOQ_size_16_color_FFFFFF_t_70_pic_center 2]: https://img-blog.csdnimg.cn/20201126105326918.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU4MDEzOQ==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU4MDEzOQ_size_16_color_FFFFFF_t_70_pic_center 3]: https://img-blog.csdnimg.cn/20201126110205537.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU4MDEzOQ==,size_16,color_FFFFFF,t_70#pic_center