国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

CSS3 邊框

用CSS3，你可以創(chuàng)建圓角邊框，添加陰影框，并作為邊界的形象而不使用設(shè)計(jì)程序，如Photoshop。

在本章中，您將了解以下的邊框?qū)傩裕?/p>

  • border-radius

  • box-shadow

  • border-image

CSS3 圓角

在CSS2中添加圓角棘手。我們不得不在每個(gè)角落使用不同的圖像。

在CSS3中，很容易創(chuàng)建圓角。

在CSS3中border-radius屬性被用于創(chuàng)建圓角：

這是圓角邊框！

實(shí)例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文網(wǎng)(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>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

CSS3盒陰影

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

實(shí)例

<!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 #888888;
}
</style>
</head>
<body>

<div></div>

</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

CSS3邊界圖片

有了CSS3的border-image屬性，你可以使用圖像創(chuàng)建一個(gè)邊框：

border-image屬性允許你指定一個(gè)圖片作為邊框！ 用于創(chuàng)建上文邊框的原始圖像：

在div中使用圖片創(chuàng)建邊框:

Border

實(shí)例

<!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(../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 屬性用于設(shè)置圖片的邊框。</p>

<div id="round">這里，圖像平鋪（重復(fù)）來填充該區(qū)域。</div>
<br>
<div id="stretch">這里，圖像被拉伸以填充該區(qū)域。</div>

<p>這是我們使用的圖片素材：</p>
<img src="/images/border.png" />

</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

新邊框?qū)傩?/h2>
屬性說明CSS
border-image設(shè)置所有邊框圖像的速記屬性。3
border-radius一個(gè)用于設(shè)置所有四個(gè)邊框- *-半徑屬性的速記屬性3
box-shadow附加一個(gè)或多個(gè)下拉框的陰影3