sempadan CSS3
Sempadan CSS3
Dengan CSS3, anda boleh membuat sempadan bulat, menambah kotak bayangan
Dalam bab ini, anda Anda akan mempelajari tentang sifat sempadan berikut
| 屬性 | 說(shuō)明 | CSS |
|---|---|---|
| border-image | 設(shè)置所有邊框圖像的速記屬性。 | 3 |
| border-radius | 一個(gè)用于設(shè)置所有四個(gè)邊框- *-半徑屬性的速記屬性 | 3 |
| box-shadow | 附加一個(gè)或多個(gè)下拉框的陰影 | 3 |
Sudut Bulat CSS3
Menambah sudut bulat dalam CSS2 adalah sukar. Kami terpaksa menggunakan imej yang berbeza di setiap sudut.
Dalam CSS3, mudah untuk membuat sudut bulat.
Sifat jejari sempadan digunakan untuk membuat sudut bulat dalam CSS3:
Contoh
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
div
{
border:2px solid #4269e1;
padding:10px 40px;
background: #d8dd2e;
width:150px;
border-radius:25px;
}
</style>
</head>
<body>
<div>圓角邊框！</div>
</body>
</html>Jalankan Cuba program
Bayang kotak CSS3
Sifat bayang-kotak dalam CSS3 digunakan untuk menambah bayang:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
div
{
width:300px;
height:100px;
background-color:yellow;
box-shadow: 10px 10px 5px #47d1b1;
text-align: center;
}
</style>
</head>
<body>
<div>CSS3盒陰影</div>
</body>
</html> Jalankan program dan cuba
Imej sempadan CSS3
Dengan sifat imej sempadan CSS3, anda boleh menggunakan imej Cipta sempadan:
Atribut imej sempadan membolehkan anda menentukan imej sebagai sempadan!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文網(wǎng)（php.cn)</title>
<style>
div
{
border:15px solid transparent;
width:250px;
padding:10px 20px;
}
#round
{
-webkit-border-image:url(/upload/course/000/000/006/58a4feb498981164.png) 30 30 round; /* Safari 5 and older */
-o-border-image:url(/upload/course/000/000/006/58a4feb498981164.png) 30 30 round; /* Opera */
border-image:url(/upload/course/000/000/006/58a4feb498981164.png) 30 30 round;
}
#stretch
{
-webkit-border-image:url(/upload/course/000/000/006/58a4feb498981164.png) 30 30 stretch; /* Safari 5 and older */
-o-border-image:url(/upload/course/000/000/006/58a4feb498981164.png) 30 30 stretch; /* Opera */
border-image:url(/upload/course/000/000/006/58a4feb498981164.png) 30 30 stretch;
}
</style>
</head>
<body>
<p> border-image 屬性用于設(shè)置圖片的邊框。</p>
<div id="round">這里，圖像平鋪（重復(fù)）來(lái)填充該區(qū)域。</div>
<br>
<div id="stretch">這里，圖像被拉伸以填充該區(qū)域。</div>
<p>這是我們使用的圖片素材：</p>
<img src="http://www.runoob.com/images/border.png" />
</body>
</html>Jalankan program dan cuba
