CSS3 ???
?? ??? CSS3? ???? ?? ?? ?????. ??? ???? ? ??? border:1px solid red?? ???... ???? CSS3? ???? ?? ???? ???????
CSS3? ????? 4?? ??? ??? ????
??? ??(??? ?? ??)
??? ???( ???? ??) ???? ?? ???)
Border-radius(??? ??)
box-shadow(??? ??)
CSS3? ???? ??? ????? ???? ??? ?? ??? ???, ??? ?? ? ???? ???? ??? ? ????.
CSS3 ?? ???-?? ??
CSS3 ?? ????? border-radius("??? ??"? ??) ?? ??? ???? ???. ? ???? ??? ??? ????? ? ??? ?? ?????. em, ex, pt, px, ??? ? ?? ???? CSS ??? ??? ? ????.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style type="text/css">
div
{
border:2px solid #a1a1a1;
padding:10px 40px;
background:yellow;
width:300px;
height:300px;
border-radius:25px 15px 40px 0;
}
</style>
</head>
<body>
<div>觀察4個(gè)角的不同 </div>
</body>
</html>CSS3 box-shadow box-shadow ??
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style type="text/css">
.border_test
{
border:5px solid red;
-moz-box-shadow:5px 2px 6px black;
-ms-box-shadow:5px 2px 6px black;
-wekit-box-shadow:5px 2px 6px black;
-o-box-shadow:5px 2px 6px black;
box-shadow:5px 2px 6px black;
}
</style>
</head>
<body>
<div class='border_test'>CSS3 Border-shadow樣式</div>
</body>
</html>CSS3 ??? ?????? ???
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style type="text/css">
.border_test
{
-webkit-border-image: url(http://pic002.cnblogs.com/images/2012/455414/2012101316502564.jpg) 0 12 0 12 stretch stretch;
-moz-border-image: url(http://pic002.cnblogs.com/images/2012/455414/2012101316502564.jpg) 0 12 0 12 stretch stretch;
-o-border-image: url(http://pic002.cnblogs.com/images/2012/455414/2012101316502564.jpg) 0 12 0 12 stretch stretch;
-ms-border-image: url(http://pic002.cnblogs.com/images/2012/455414/2012101316502564.jpg) 0 12 0 12 stretch stretch;
-border-image: url(http://pic002.cnblogs.com/images/2012/455414/2012101316502564.jpg) 0 12 0 12 stretch stretch;
display: block;
border-width: 0 12px;
padding: 10px;
text-align: center;
font-size: 26px;
text-decoration: inherit;
color:white;
}
</style>
</head>
<body>
<div class='border_test'>CSS3 Border-image樣式</div>
</body>
</html>
