CSS3 邊框


用CSS3，你可以建立圓角邊框，加入陰影框，並作為邊界的形象而不使用設計程序，如Photoshop。

在本章中，您將了解以下的邊框屬性：

  • #border-radius

  • box-shadow

  • border-image

#CSS3 圓角

在CSS2中加入圓角棘手。我們不得不在每個角落使用不同的圖像。

在CSS3中，很容易建立圓角。

在CSS3中border-radius屬性被用來建立圓角：

這是圓角邊框！

實例

<!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>

運行實例»

點擊"運行實例" 按鈕查看線上實例

CSS3盒陰影

CSS3中的box-shadow屬性被用來加入陰影:

實例

<!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>

運行實例»##點擊"運行實例"按鈕查看在線實例

CSS3邊界圖片

有了CSS3的border-image屬性，你可以使用圖像建立一個邊框：

border-image屬性允許你指定一個圖片作為邊框！ 用於建立上文邊框的原始圖像：
在div中使用圖片建立邊框:

Border

實例

<!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>

運行實例»點擊"運行實例" 按鈕查看線上實例

##新邊框屬性

屬性border-imageborder-radiusbox-shadow
說明CSS
設定所有邊框圖像的速記屬性。 3
一個用來設定所有四個邊框- *-半徑屬性的速記屬性 3
附加一個或多個下拉方塊的陰影3

#