CSS3圓角邊框和邊界圖片效果實(shí)例
發(fā)布時(shí)間：2016-07-01 16:09:21 作者：佚名 
我要評(píng)論
我要評(píng)論這篇文章主要為大家詳細(xì)介紹了CSS3邊框的不同效果實(shí)現(xiàn)代碼，包括CSS3圓角邊框、盒陰影、邊界圖片的制作方法，感興趣的小伙伴們可以參考一下
本文的學(xué)習(xí)要點(diǎn)如下：
•圓角 border-radius
•盒陰影 box-shadow
•邊界圖片 border-image
1.圓角 border-radius
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- <div>border-radius 屬性允許您為元素添加圓角邊框！ </div>
- div {
- width: 200px;
- height: 100px;
- padding:20px;
- border: 1px solid red;
- border-radius : 25px;
- }
2.盒陰影 box-shadow
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- <div></div>
- div {
- width: 200px;
- height: 100px;
- background: red;
- /*x軸偏移量 y軸偏移量 模糊程度 陰影顏色*/
- box-shadow: 10px 10px 5px #000;
- }
3.邊界圖片 border-image
html部分
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- <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" />
css部分
CSS Code復(fù)制內(nèi)容到剪貼板
- div {
- width: 250px;
- padding: 10px 20px;
- border: 15px solid translate;
- }
- #round {
- /*safari*/
- /*圖片源 圖片邊界向內(nèi)偏移量 圖片的寬度 用于指定在邊框外部繪制 border-image-area 的量 樣式*/
- -webkit-border-image : url(../images/border.png) 30 30 round;
- /*opera*/
- -o-border-image : url(../images/border.png) 30 30 round;
- border-image : url(../images/border.png) 30 30 round;
- }
- #stretch {
- -webkit-border-image : url(../images/border.png) 30 30 stretch;
- -o-border-image : url(../images/border.png) 30 30 stretch;
- border-image : url(../images/border.png) 30 30 stretch;
- }
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本文通過實(shí)例代碼給大家介紹了基于csss3實(shí)現(xiàn)多樣的邊框效果，有半透明邊框，多重邊框，邊框內(nèi)圓角，具體效果圖和實(shí)現(xiàn)代碼大家參考下本文2018-05-04
css3 邊框、背景、文本效果的實(shí)現(xiàn)代碼
這篇文章主要介紹了css3 邊框、背景、文本效果的實(shí)現(xiàn)代碼,需要的朋友可以參考下2018-03-21![](//img.jbzj.com"images/1_lit.jpg)
CSS3動(dòng)畫之流彩文字效果+圖片模糊效果+邊框伸展效果實(shí)現(xiàn)代碼合集
這篇文章主要介紹了CSS3動(dòng)畫中流彩文字效果+圖片模糊效果+邊框伸展效果實(shí)現(xiàn)，blur濾鏡實(shí)現(xiàn)和SVG濾鏡實(shí)現(xiàn)以及SVG作為背景圖片載入等操作步驟實(shí)現(xiàn)功能，具體操作步驟大家可查2017-08-18利用CSS3偽元素實(shí)現(xiàn)逐漸發(fā)光的方格邊框
這篇文章主要給大家介紹了利用CSS3偽元素實(shí)現(xiàn)逐漸發(fā)光的方格邊框的相關(guān)資料，文中給出了詳細(xì)的示例代碼供大家參考學(xué)習(xí)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來2017-05-07純CSS3制作的鼠標(biāo)懸停時(shí)邊框旋轉(zhuǎn)
本文給大家分享一段css3代碼實(shí)現(xiàn)鼠標(biāo)懸停時(shí)邊框旋轉(zhuǎn)的效果，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下2017-01-03CSS3實(shí)現(xiàn)多背景模擬動(dòng)態(tài)邊框的效果
前幾天在工作的時(shí)候遇到一個(gè)問題，項(xiàng)目需要實(shí)現(xiàn)一個(gè)效果，當(dāng)鼠標(biāo)移入一個(gè)元素的時(shí)候，元素出現(xiàn)一個(gè)動(dòng)態(tài)的邊框，通過網(wǎng)上查找資料看到有人推薦可以使用Css3來實(shí)現(xiàn)，后來試了2016-11-08
css3實(shí)現(xiàn)六邊形邊框的實(shí)例代碼
這篇文章主要介紹了css3實(shí)現(xiàn)六邊形邊框的實(shí)例代碼,需要的朋友可以參考下2019-05-24
![](http://img.jbzj.com"images/1_lit.jpg)
