sempadan CSS3


Dengan CSS3, anda boleh membuat sempadan bulat, menambah kotak bayangan dan imej sebagai sempadan tanpa menggunakan program reka bentuk seperti Photoshop.

Dalam bab ini, anda akan mempelajari tentang sifat sempadan berikut:

  • jejari sempadan

  • bayang-kotak

  • imej sempadan

Sudut Bulat CSS3

Menambah sudut bulat dalam CSS2 adalah rumit. Kami terpaksa menggunakan imej yang berbeza di setiap sudut.

Dalam CSS3, mudah untuk membuat sudut bulat.

Dalam CSS3 sifat jejari sempadan digunakan untuk membuat sudut bulat:

Ini ialah jidar bulat!

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style> 
div
{
	border:2px solid #a1a1a1;
	padding:10px 40px; 
	background:#dddddd;
	width:300px;
	border-radius:25px;
}
</style>
</head>
<body>

<div>border-radius 属性允许您为元素添加圆角边框！ </div>

</body>
</html>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Bayang kotak CSS3

Sifat bayang-kotak dalam CSS3 digunakan untuk menambah bayang:

Contoh

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style> 
div
{
	width:300px;
	height:100px;
	background-color:yellow;
	box-shadow: 10px 10px 5px #888888;
}
</style>
</head>
<body>

<div></div>

</body>
</html>

Jalankan contoh»

Klik butang "Jalankan contoh" untuk melihat contoh dalam talian

Imej sempadan CSS3

Ya Dengan sifat imej sempadan CSS3, anda boleh mencipta sempadan menggunakan imej:

Harta imej sempadan membolehkan anda menentukan imej sebagai sempadan! Imej asal yang digunakan untuk mencipta sempadan di atas:

Membuat sempadan menggunakan imej dalam div:

Border

Contoh 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style> 
div
{
	border:15px solid transparent;
	width:250px;
	padding:10px 20px;
}

#round
{
	-webkit-border-image:url(../style/images/border.png) 30 30 round; /* Safari 5 and older */
	-o-border-image:url(../style/images/border.png) 30 30 round; /* Opera */
	border-image:url(../style/images/border.png) 30 30 round;
}

#stretch
{
	-webkit-border-image:url(../style/images/border.png) 30 30 stretch; /* Safari 5 and older */
	-o-border-image:url(../style/images/border.png) 30 30 stretch; /* Opera */
	border-image:url(../style/images/border.png) 30 30 stretch;
}
</style>
</head>
<body>

<p><b>注意: </b> Internet Explorer 不支持 border-image 属性。</p>
<p> border-image 属性用于设置图片的边框。</p>

<div id="round">这里，图像平铺（重复）来填充该区域。</div>
<br>
<div id="stretch">这里，图像被拉伸以填充该区域。</div>

<p>这是我们使用的图片素材：</p>
<img src="/images/border.png" />

</body>
</html>

Jalankan contoh»

Klik butang "Jalankan contoh" untuk melihat contoh dalam talian

Baharu hartanah sempadan

属性说明CSS
border-image设置所有边框图像的速记属性。3
border-radius一个用于设置所有四个边框- *-半径属性的速记属性3
box-shadow附加一个或多个下拉框的阴影3