现在的位置: 首页 > 综合 > 正文

css圆角效果

2013年12月09日 ⁄ 综合 ⁄ 共 2363字 ⁄ 字号 评论关闭

无图

<html>
<head>
<title>css圆角效果--网站每日新</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<style type="text/css">
div.RoundedCorner{background: #9BD1FA}
b.rtop, b.rbottom{display:block;background: #FFF}
b.rtop b, b.rbottom b{display:block;height: 1px;overflow: hidden; background: #9BD1FA}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}
</style>
</head>
<body>
<div class="RoundedCorner">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<br>无图片实现圆角框<br><br>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
</div>
</body>
</html>

 

有图

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>Flexible box with custom corners and borders | Lab | 456 Berea Street
</title>
<style type="text/css" media="screen,print">
html,body {
margin:0;
padding:0;
color:#000;
background:#fff;
}
body {
padding:10px;
font:76%/135% "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif;
}
/* CSS for the box starts here */
.box {
padding:0 12px 0 0;
background:#fff url(http://www.456bereastreet.com/lab/flexible_custom_corners_borders/borders.gif) 100% 0 repeat-y;
}
.bi {
padding:0 0 0 12px;
background:#fff url(http://www.456bereastreet.com/lab/flexible_custom_corners_borders/borders.gif) 0 0 repeat-y;
}
.bt {
height:17px;
margin:0 -12px;
background:url(http://www.456bereastreet.com/lab/flexible_custom_corners_borders/box.gif) 100% 0 no-repeat;
}
.bt div {
width:18px;
height:17px;
background:url(http://www.456bereastreet.com/lab/flexible_custom_corners_borders/box.gif) 0 0 no-repeat;
}
.bb {
height:17px;
margin:0 -12px;
background:url(http://www.456bereastreet.com/lab/flexible_custom_corners_borders/box.gif) 100% 100% no-repeat;
}
.bb div {
width:18px;
height:17px;
background:url(http://www.456bereastreet.com/lab/flexible_custom_corners_borders/box.gif) 0 100% no-repeat;
}
.box h1 {
margin:0;
padding:0.3em 10px;
background:#efece6;
font:bold 1.2em/1 Arial, Helvetica, sans-serif;
}
.box p, .box ul {
margin:0;
padding:4px 10px;
background:#fff;
}
.box li {
margin:0 0 0 2em;
padding:0;
}
</style>
</head>
<body>
<div class="box">
<div class="bi">
<div class="bt">
<div>
</div>
</div>
<h1>Flexible box with custom corners and borders</h1>
<p>This is a demo of a flexible box with custom corners and custom borders.
</p>
<div class="bb">
<div>
</div>
</div>
</div>
</div>
</body>
</html>

抱歉!评论已关闭.