<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > |
<html xmlns= "http://www.w3.org/1999/xhtml" > |
<head> |
<meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" /> |
<title>CSS圆角边框</title> |
<style type= "text/css" > |
#xsnazzy h 1 , #xsnazzy h 2 , #xsnazzy p { |
margin : 0 10px ; |
letter-spacing : 1px ; |
padding : 0 ; |
} |
#xsnazzy h 1 { |
font-size : 2.5em ; |
color : #A95051 ; |
} |
#xsnazzy h 2 { |
font-size : 2em ; |
color : #7B793B ; |
border : 0 ; |
} |
#xsnazzy p { |
padding-bottom : 0.5em ; |
} |
#xsnazzy h 2 { |
padding-top : 0.5em ; |
} |
#xsnazzy { |
background : transparent ; |
margin-top : 100px ; |
margin-right : 10em ; |
margin-bottom : 100px ; |
margin-left : 10em ; |
} |
.xtop, .xbottom { |
display : block ; |
background : transparent ; |
font-size : 1px ; |
} |
.xb 1 , .xb 2 , .xb 3 , .xb 4 { |
display : block ; |
overflow : hidden ; |
} |
.xb 1 , .xb 2 , .xb 3 { |
height : 1px ; |
} |
.xb 2 , .xb 3 , .xb 4 { |
background : #FFF ; |
border-left : 1px solid #A93298 ; |
border-right : 1px solid #A93298 ; |
} |
.xb 1 { |
margin : 0 5px ; |
background : #A93298 ; |
} |
.xb 2 { |
margin : 0 3px ; |
border-width : 0 2px ; |
} |
.xb 3 { |
margin : 0 2px ; |
} |
.xb 4 { |
height : 2px ; |
margin : 0 1px ; |
} |
.xboxcontent { |
display : block ; |
background : #FFF ; |
border : 0 solid #A93298 ; |
border-width : 0 1px ; |
} |
</style> |
</head> |
<body> |
<div id= "xsnazzy" > <b class= "xtop" ><b class= "xb1" ></b><b class= "xb2" ></b><b class= "xb3" ></b><b class= "xb4" ></b></b> |
<div class= "xboxcontent" > |
<p>CSS圆角边框</p> |
<p>CSS圆角边框</p> |
<p>CSS圆角边框</p> |
</div> |
<b class= "xbottom" ><b class= "xb4" ></b><b class= "xb3" ></b><b class= "xb2" ></b><b class= "xb1" ></b></b> </div> |
</body> |
</html> |