<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box {
width: 300px;
}
b {
display: block;
}
.b1,
.b2,
.b3,
.b4 {
overflow: hidden;
height: 1px;
border-left: 1px solid #000;
border-right: 1px solid #000;
}
.b1 {
margin: 0 5px;
background: #000;
}
.b2 {
margin: 0 3px;
border-width: 0 2px;
}
.b3 {
margin: 0 2px;
}
.b4 {
height: 2px;
margin: 0 1px;
}
#content {
border: solid #000;
border-width: 0 1px;
height: 100px;
}
</style>
</head>
<body>
<div id="box">
<b class="top">
<b class="b1"></b>
<b class="b2"></b>
<b class="b3"></b>
<b class="b4"></b>
</b>
<div id="content">内容区</div>
<b class="bottom">
<b class="b4"></b>
<b class="b3"></b>
<b class="b2"></b>
<b class="b1"></b>
</b>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#nifty {
width: 300px;
}
#con {
height: 100px;
}
#nifty,
.rtop div {
background: #9bd1fa;
}
.rtop {
background: #fff;
}
.rtop div {
height: 1px;
overflow: hidden;
}
.r1 {
margin: 0 5px;
}
.r2 {
margin: 0 3px;
}
.r3 {
margin: 0 2px;
}
.r4 {
margin: 0 1px;
height: 2px;
}
</style>
</head>
<body>
<div id="nifty">
<div class="rtop">
<div class="r1"></div>
<div class="r2"></div>
<div class="r3"></div>
<div class="r4"></div>
</div>
<div id="con"></div>
<div class="rtop">
<div class="r4"></div>
<div class="r3"></div>
<div class="r2"></div>
<div class="r1"></div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.box {
width: 400px;
margin: 20px auto;
}
h1 {
font-size: 2em;
color: #fff;
padding: 20px;
text-align: center;
}
b {
display: block;
overflow: hidden;
height: 1px;
background: #96C2F1;
border-width: 0 1px;
border-style: solid;
}
.b1 {
margin: 0 5px;
background: #fff;
border: none;
}
.b2 {
border-right: #eee;
}
.b3 {
border-right: #ddd;
}
.b4 {
border-right: #aaa;
}
.b4b {
border-left: #eee;
}
.b3b {
border-left: #ddd;
}
.b2b {
border-left: #aaa;
}
.b2,
.b3,
.b4 {
border-left-color: #fff;
}
.b4b,
.b3b,
.b2b {
border-right-color: #999;
}
.b2,
.b2b {
margin: 0 3px;
border-width: 0 2px;
}
.b3,
.b3b {
margin: 0 2px;
}
.b4,
.b4b {
height: 2px;
margin: 0 1px;
}
.b1b {
margin: 0 5px;
background: #999;
border: none;
}
.content {
background: #96C2F1;
border-left: 1px solid #fff;
border-right: 1px solid #999;
}
</style>
</head>
<body>
<div class="box">
<b class="b1"></b>
<b class="b2"></b>
<b class="b3"></b>
<b class="b4"></b>
<div class="content">
<h1>3D效果CSS圆角</h1>
</div>
<b class="b4b"></b>
<b class="b3b"></b>
<b class="b2b"></b>
<b class="b1b"></b>
</div>
</body>
</html>
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title></title>
<style>
body,
img,
b {
margin: 0;
padding: 0;
}
img {
border: none;
}
.radius {
display: inline-block;
position: relative;
overflow: hidden;
}
.radius b {
position: absolute;
top: 0;
left: 0;
background: url(radius.png) no-repeat;
}
.radius-77 {
width: 77px;
height: 77px;
}
.radius-77 img {
-ms-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.radius-77 b {
width: 77px;
height: 77px;
background-position: 0 0;
}
.radius-16 {
width: 16px;
height: 16px;
}
.radius-16 img {
-ms-border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
}
.radius-16 b {
width: 16px;
height: 16px;
background-position: 0 -78px;
}
</style>
</head>
<body>
<span class="radius radius-77">
<img src="http://pic.29293.com/pic/5414639382564497756.jpg" width="77" height="77" alt="">
<!--[if lte IE 8]><b></b><![endif]-->
</span>
<span class="radius radius-16">
<img src="http://pic.29293.com/pic/5414639382564497756.jpg" width="16" height="16" alt="">
<!--[if lte IE 8]><b></b><![endif]-->
</span>
</body>
</html>
浙公网安备 33010602011771号