css实现四种常见边框内外角组合

首先让我们先来看看效果图吧：

展示图

其中，div1:边框内外直角矩形;div2:边框内外圆角矩形;div3:边框内直角外圆角;div4:边框内圆角外直角。

接下来我们来看看实现代码，为了方便，我就直接用div1,2,3,4称呼它们吧。

这里我先将我用到的通用类写出来:

        .font{

            color:#00ff00;

            text-align: center;

        }

        .divSize{

            margin:2em;

            width:5em;

            height:5em;

            display: inline-block;

        }

div1~3 html代码实现：

div1

div2

div3

---

div1

其中最简单的就是div1的实现:

div1 css代码:

.div1{/*边框内外直角矩形*/

            border:1em solid #eee;

      }

---

div2 和 div3

div2和div3的css实现是具有一定联系的，先让我们看看div2和div3的实现代码:

div2 css代码:

.div2{/*边框内外圆角矩形*/

            border:1em solid #eee;

            border-radius:2em;

       }

div3 css代码:

.div3{/*边框内直角外圆角*/

            border:1em solid #eee;

            border-radius:1em;

        }

细心的小伙伴可以发现，两者的区别仅仅是border-radius值的区别，这是为什么？

我发现了一个规律，便是当border小于border-radius的值时，便会呈现边框内外圆角矩形的形状，而当border大于等于border-radius的值时，便会呈现边框内直角外圆角的形状。

具体是为什么，我还在探索，希望知道的小伙伴可以告诉我，谢谢。

---

div4

最后便是相比上面较难实现的div4:

第一种解决方案:

css代码:

.div4{/*边框内圆角外直角*/

          background:#eee;

          padding:1em;

 }

.div4>div{

            height:5em;

            background: black;

             border-radius:.8em;

 }

html代码:

   

div4

相对第一种使用两个元素的情况，有一种方法只需要一个元素，便是接下来的第二种方案:

css代码:

.div4{/*边框内圆角外直角*/

            width: 3em;

            height:3em;

          border-radius:1em;

          padding:1em;

          box-shadow:0 0 0 1em #eee;

          outline: 1em solid #eee;

        }

html 代码:

div4

---

结束语

当然，使用以上方法不仅仅能实现div1~4,可以通过单独设置每个角的值，完成多种不规则形状展示，例如将border-radius:2em;改成border-radius:1em 2em;便可以得到一下形状，更多的形状，有兴趣的小伙伴可以自己尝试。