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

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

76ce23fb9d3e5681b6cc8f6754e60030.png

其中,

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,3的HTML代码实现:

div1
div2
div3
复制代码

div4的代码稍后再说。

div1

div1 CSS代码:

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

复制代码

div2和div3

div2 CSS代码:

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

border:1em solid #eee;

border-radius:2em;

}

复制代码

div3CSS代码:

.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代码:

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;便可以得到以下形状,更多的形状,有兴趣的小伙伴可以自己尝试。

997945b373dce008404ec78a11f16ef8.png

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值