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代码实现：
<div class="divSize div1 font">div1</div>
<div class="divSize div2 font">div2</div>
<div class="divSize div3 font">div3</div>
div1
其中最简单的就是div1的实现:
div1 css代码:
.div1
.div1{/*边框内外直⾓矩形*/
border:1em solid #eee;
}
div2 和 div3
div2和div3的css实现是具有⼀定联系的，先让我们看看div2和div3的实现代码:
borderbox
div2 css代码:
.div2{/*边框内外圆⾓矩形*/
.div2{
border:1em solid #eee;
border-radius:2em;
}
div3 css代码:
.div3{/*边框内直⾓外圆⾓*/
.div3{
border:1em solid #eee;
border-radius:1em;
}
细⼼的⼩伙伴可以发现，两者的区别仅仅是border-radius值的区别，这是为什么？
当border⼩于border-radius的值时，便会呈现边框内外圆⾓矩形的形状，⽽当border⼤于等于border-
规律，便是当border⼩于border-radius的值时，便会呈现边框内外圆⾓矩形的形状，⽽当border⼤于等于border-我发现了⼀个规律
radius的值时，便会呈现边框内直⾓外圆⾓的形状。
radius的值时，便会呈现边框内直⾓外圆⾓的形状
具体是为什么，我还在探索，希望知道的⼩伙伴可以告诉我，谢谢。
div4
最后便是相⽐上⾯较难实现的div4:
第⼀种解决⽅案:
css代码:
.div4{/*边框内圆⾓外直⾓*/
.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；便可以得到⼀下形状，更多的形状，有兴趣的⼩伙伴可以⾃⼰尝试。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。