The principle of the CSS implementation bevel is to take advantage of the border of the div two perpendicular to each other (the bevel combination has more variation ...). ）
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
< http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
< Name= "Content=" "All"/>
< Name= "Author" content= "Colinivy"/>
<link href= "Http://www.cxybl.com/style/global.css" rel= "stylesheet" type= "text/css" media= "screen"/>
<title> Colinivy ' s world</title>
<style type= "Text/css" >
* {margin:0; padding:0; list-style:none;}
Body {
font-size:63%;
}
#wrapper {
margin:20px;
width:200px;
border:1px solid #ccc;
Font-size:1.2em;
}
#corner {
position:relative;
top:-1px;
left:-1px;
width:0px;
height:0px;
Overflow:hidden;
border-top:15px solid #fff;
border-right:15px solid #ccc;
}
#wrapper p {
padding:5px;
text-indent:20px;
}
#joy_left {
width:20px;
height:0px;
Overflow:hidden;
border-top:20px solid Green;
border-left:20px solid #FFF;
}
#joy_top {
top:-20px;
width:0px;
height:20px;
border-top:20px solid #FFF;
border-right:20px solid red;
}
#joy_bottom {
left:-40px;
top:20px;
width:0px;
height:20px;
border-left:20px solid blue;
border-bottom:20px solid #FFF;
}
#joy_right {
left:-40px;
top:20px;
width:20px;
height:0px;
Overflow:hidden;
border-right:20px solid #FFF;
border-bottom:20px solid #666;
}
. por {
position:relative;
Float:left;
}
</style>
<body>
<div id= "wrapper" >
<div id= "Corner" >
</div>
<p>www.cxybl.com</p>
<p>www.cxybl.com</p>
<p>www.cxybl.com</p>
</div>
<div id= "joy_left" class= "Por" >
</div>
<div id= "joy_top" class= "Por" >
</div>
<div id= "Joy_bottom" class= "Por" >
</div>
<div id= "joy_right" class= "Por" >
</div>
</body>
This article links http://www.cxybl.com/html/wyzz/CSS/20130601/38193.html
