CSS可以设置圆角的方块

totoxian · 发表于 2013-2-7 17:13:12

原来用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>

		自动登录	找回密码
密码			立即注册

CSS可以设置圆角的方块

浏览过的版块