CSS可以设置圆角的方块

最新推荐文章于 2022-10-05 22:55:12 发布

最新推荐文章于 2022-10-05 22:55:12 发布 · 130 阅读

本文介绍了一种使用CSS创建圆角方块的方法。通过叠加不同长度的直线模拟圆角效果，实现简单且兼容性好的圆角方块设计。

原来用CSS可以设置圆角的方块。

究其原理，是用3条长度不同的直线（或更多）叠在一起，模拟出这个弯曲的圆角，正如多边形可以组成圆形一样，只要边够多，就可以无限逼近一个圆。

===============================================================

附网上找到的示例

<html>
<head>
<title> 用CSS做圆角方块</title>
<style type="text/css">

.roundBorder

{

display: block;

}

.roundBorder *

{

background: white;

display: block;

height: 1px;

overflow: hidden;

}

.roundBorderLayer1

{

border-left: 1px solid #C4C4C4;

border-right: 1px solid #C4C4C4;

margin: 0px 1px;

}

.roundBorderLayer2

{

border-left: 1px solid #D3D4D5;

border-right: 1px solid #D3D4D5;

margin: 0px 2px;

padding: 0px;

}

.roundBorderLayer3

{

background: #C4C4C4;

border-left: 1px solid #D3D4D5;

border-right: 1px solid #D3D4D5;

margin: 0px 3px;

}

.roundContent

{

background:white;

border-left: 1px solid #C4C4C4;

border-right: 1px solid #C4C4C4;

overflow: hidden;

padding: 4px 10px;

}

</style>

</head>
<body>

<b class="roundBorder">

<b class="roundBorderLayer3"></b>

<b class="roundBorderLayer2"></b>

<b class="roundBorderLayer1"></b>

</b>

<div class="roundContent">

Hello!!

<br/>

用CSS做圆角方块

<br/>

真的很简单

</div>

<b class="roundBorder">

<b class="roundBorderLayer1"></b>

<b class="roundBorderLayer2"></b>

<b class="roundBorderLayer3"></b>

</b>
</body>
</html>