阅读 1491

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

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


其中,

div1:边框内外直角矩形;div2:边框内外圆角矩形;

div3:边框内直角外圆角;div4:边框内圆角外直角。

接下来我们来看看实现代码,为了方便,我就直接用

div1,2,3,4称呼它们吧。

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

 .font{            color:#00ff00;            text-align: center;        }        .divSize{            margin:2em;            width:5em;            height:5em;            display: inline-block;        }复制代码

div1,2,3HTML代码实现:

 <div class="divSize div1 font">div1</div> <div class="divSize div2 font">div2</div> <div class="divSize div3 font">div3</div>复制代码

div4的代码稍后再说。


div1

div1 CSS代码:

 .div1{/*边框内外直角矩形*/            border:1em solid #eee;      }

复制代码


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:

这里给出两种解决方案。

CSS代码:

.div4{/*边框内圆角外直角*/
          background:#eee;
          padding:1em;
        }
        .div4>div{
            height:5em;
            background: black;
              border-radius:.8em;
            
        }
复制代码

HTML代码:

<div class="divSize div4 font">
               <div>div4</div>
 </div>
复制代码


②相对第一种使用两个元素的情况,第二种方案只需要一个元素:

CSS代码:

.div4{/*边框内圆角外直角*/
            width: 3em;
            height:3em;
          border-radius:1em;
          padding:1em;
          box-shadow:0 0 0 1em #eee;
          outline: 1em solid #eee;
        }
复制代码

HTML代码:

<div class="divSize div4 font">div4</div>
复制代码


结束语

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



文章分类
前端
文章标签