CSS3 邊框
CSS3 邊框
#用CSS3,你可以建立圓角邊框,加入陰影框
在本章中,您將了解以下的邊框屬性
#屬性 | 說明 | CSS |
---|---|---|
設定所有邊框圖像的速記屬性。 | 3 | |
一個用來設定所有四個邊框- *-半徑屬性的速記屬性 | 3 | |
附加一個或多個下拉方塊的陰影 | 3 |
CSS3 圓角
在CSS2中加入圓角棘手。我們不得不在每個角落使用不同的圖像。 在CSS3中,很容易建立圓角。 在CSS3中border-radius屬性被用來建立圓角:#實例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(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>運行程式嘗試
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 #47d1b1; text-align: center; } </style> </head> <body> <div>CSS3盒阴影</div> </body> </html>執行程式嘗試一下
CSS3邊界圖片
有了CSS3的border-image屬性,你可以使用映像建立一個邊框:border-image屬性允許你指定一個圖片作為邊框!<!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(/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 属性用于设置图片的边框。</p> <div id="round">这里,图像平铺(重复)来填充该区域。</div> <br> <div id="stretch">这里,图像被拉伸以填充该区域。</div> <p>这是我们使用的图片素材:</p> <img src="http://www.runoob.com/images/border.png" /> </body> </html>執行程式嘗試
#