css_圆角的制作

来源：互联网发布：安居客经纪人网络平台编辑：程序博客网时间：2024/06/05 10:28

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#id1{
width: 100px;
height: 30px;
background: palegoldenrod;
border: 1px solid rosybrown;
border-radius: 2px 4px;
}
.box{
height: 50px;
width: 100px;
background: rosybrown;
margin: 20px;
border: 1px solid #4dffc3;
position: relative;
}
.l_t{
background: url("1.jpg") no-repeat;
position: absolute;
left: 0px;
top: 0px;
height: 2px;
width: 2px;
}
</style>
</head>
<body>
<div>
<input type="text" id="id1" value="11111"/>
</div>
<div class="box">
<div class="l_t"></div>
<div class="r_t"></div>
<div class="r_b"></div>
<div class="l_b"></div>
<div class="content">dasjdjwjdnduashdsa</div>
</div>
</body>

</html>

//---------------------------------------------------------------------------------------------------------

1.背景图来实现圆角

~1.宽度固定，高度自适应：用一个大div先包裹3个div（第一个div是上部分，包括上面2个角，中间是内容，下面是下面两个角）。

~2.高度和宽度都适应：四个div包括4个角，分别绝对定位

2.css2.0和HTML标签实现

~1.关键是像素画

3.css3.0

~1.border-radius：

~2.css3.0有些不支持所有有私有前缀出现：ie：-ms- 火狐：-moz- 谷歌：-webkit-等

0 0