Hari ini kami terutamanya mengkaji sempadan dalam CSS3 Ini tidak asing lagi bagi kami. Berapa kali kami menulis sempadan:1px merah pejal... Jadi apakah kejutan yang akan diberikan oleh CSS3 kepada kami?
Dalam CSS3, sempadan mempunyai 4 ciri baharu
Warna sempadan (tetapkan warna sempadan)
Imej sempadan( Tetapkan sebagai sempadan melalui imej)
Jejari sempadan (jejari sempadan)
bayang-bayang kotak (kesan bayang-bayang)
Dengan CSS3 anda boleh membuat sempadan bulat, menambah kotak bayangan dan imej sebagai sempadan tanpa menggunakan program reka bentuk
Sifat jejari sempadan bulat CSS3
Sudut bulat CSS3 hanya perlu menetapkan satu sifat: jejari sempadan (bermaksud "jejari sempadan"). Anda memberikan nilai untuk sifat ini untuk menetapkan jejari keempat-empat penjuru pada masa yang sama. Semua ukuran CSS undang-undang boleh digunakan: em, ex, pt, px, peratusan, dsb.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(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个角的不同 </div>
</body>
</html>Sifat bayangan kotak-bayang CSS3
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(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>Imej sempadan CSS3Imej sempadan
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(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>
