當(dāng)前位置：首頁 > 前端技术 > CSS >内容正文

CSS

039_CSS3边框

發(fā)布時(shí)間：2025/4/17 CSS 88 豆豆

生活随笔收集整理的這篇文章主要介紹了 039_CSS3边框小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

1. 通過CSS3, 您能夠創(chuàng)建圓角邊框, 向矩形添加陰影, 使用圖片來繪制邊框, 并且不需使用設(shè)計(jì)軟件, 比如: photoshop。

2. 邊框左上角形狀

2.1. border-top-left-radius屬性定義左上角邊框的形狀。

2.2. border-top-left-radius屬性的長(zhǎng)度值或者百分比值定義四分之一橢圓(定義外部邊框邊緣的邊角形狀)的半徑。第一個(gè)值是水平半徑, 第二個(gè)值是垂直半徑。如果省略第二個(gè)值, 則復(fù)制第一個(gè)值。如果長(zhǎng)度為零, 則邊角為方形, 而不是圓形。水平半徑的百分比值參考邊框盒的寬度, 而垂直半徑的百分比值參考邊框盒的高度。

2.3. 默認(rèn)值

2.4. 可能值

3. 邊框右上角形狀

3.1. border-top-right-radius屬性定義右上角邊框的形狀。

3.2. 默認(rèn)值

3.3. 可能值

4. 邊框右下角形狀

4.1. border-bottom-right-radius屬性定義右下角邊框的形狀。

4.2. 默認(rèn)值

4.3. 可能值

5. 邊框左下角形狀

5.1. border-bottom-left-radius屬性定義左下角邊框的形狀。

5.2. 默認(rèn)值

5.3. 可能值

6.創(chuàng)建圓角邊框

6.1. border-radius屬性是一個(gè)簡(jiǎn)寫屬性, 用于設(shè)置border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius屬性。

6.2. 語法:

?6.2.1. top-left、top-right、bottom-right、bottom-left各是一對(duì)。

?6.2.2. 如果省略bottom-left, 則與top-right相同。如果省略bottom-right, 則與top-left相同。如果省略top-right, 則與top-left相同。

6.3. 默認(rèn)值

6.4. 可能值

6.5. 例子

6.5.1. 代碼

<!DOCTYPE html> <html><head><title>border-radius屬性創(chuàng)建圓角邊框</title><meta charset="utf-8" /><style type="text/css">div {text-align: center;border: 2px solid #a1a1a1;padding: 10px 40px; background: #dddddd;width: 350px;border-radius: 30px 28px 26px 24px / 29px 27px 25px 23px;}span {display: block;text-align: center;border: 2px solid #a1a1a1;padding: 10px 40px; background: #dddddd;width: 350px;border-top-left-radius: 30px 29px;border-top-right-radius: 28px 27px;border-bottom-right-radius: 26px 25px;border-bottom-left-radius: 24px 23px;}</style></head><body><div>border-radius屬性允許您向元素添加圓角。</div><br /><span>border-radius屬性允許您向元素添加圓角。</span></body> </html>

6.5.2. 效果圖

7. 邊框陰影

7.1. box-shadow屬性向框添加一個(gè)或多個(gè)陰影。

7.2. 語法

box-shadow: h-shadow v-shadow blur spread color inset;

7.3. box-shadow向框添加一個(gè)或多個(gè)陰影。該屬性是由逗號(hào)分隔的陰影列表, 每個(gè)陰影由2-4個(gè)長(zhǎng)度值、可選的顏色值以及可選的inset關(guān)鍵詞來規(guī)定。省略長(zhǎng)度的值是0。

7.4. 默認(rèn)值

7.5. 可能值

7.6. 例子

7.6.1.?代碼

<!DOCTYPE html> <html><head><title>box-shadow屬性創(chuàng)建邊框陰影</title><meta charset="utf-8" /><style type="text/css">div {width: 300px;height: 100px;background-color: #ff9900;box-shadow: 10px 10px 5px 1px #888888;}</style></head><body><div></div></body> </html>

7.6.2. 效果圖

8. 創(chuàng)建圖片邊框--使用圖片

8.1. border-image-source屬性規(guī)定要使用的圖像。

8.2. 默認(rèn)值

8.3. 可能值

9. 創(chuàng)建圖片邊框--向內(nèi)偏移

9.1. border-image-slice屬性規(guī)定圖像邊框的向內(nèi)偏移。

9.2. 該屬性規(guī)定圖像的上、右、下、左側(cè)邊緣的向內(nèi)偏移, 圖像被分割為九個(gè)區(qū)域: 四個(gè)角、四條邊以及一個(gè)中間區(qū)域。

9.3. 該屬性可以設(shè)置5個(gè)參數(shù), 前1~4個(gè)參數(shù)是按照上、右、下、左的位置分割圖片。第五個(gè)參數(shù)fill, 否則中間的圖像部分會(huì)被丟棄。如果省略第四個(gè)數(shù)值, 則與第二個(gè)值相同。如果省略第三個(gè)值, 則與第一個(gè)值相同。如果省略第二個(gè)值, 則與第一個(gè)值相同。

9.4. 默認(rèn)值

9.5. 可能值

10. 創(chuàng)建圖片邊框--圖像邊框的寬度

10.1. border-image-width屬性規(guī)定圖像邊框的寬度。

10.2. 該屬性可以設(shè)置4個(gè)值, 按照上、右、下、左的位置設(shè)置圖像邊框的寬度。如果忽略第四個(gè)值, 則與第二個(gè)值相同。如果省略第三個(gè)值, 則與第一個(gè)值相同。如果省略第二個(gè)值, 則與第一個(gè)值相同。不允許任何負(fù)值作為 border-image-width值。

10.3. 默認(rèn)值

10.4. 可能值

11. 創(chuàng)建圖片邊框--圖像超過邊框盒的量

11.1. border-image-outset屬性規(guī)定邊框圖像超過邊框盒的量。

11.2. 該屬性可以設(shè)置4個(gè)值, 按照上、右、下、左的位置設(shè)置邊框圖像超過邊框盒的量。如果忽略第四個(gè)值, 則與第二個(gè)值相同。如果省略第三個(gè)值, 則與第一個(gè)值相同。如果省略第二個(gè)值, 則與第一個(gè)值相同。

11.3. 默認(rèn)值

11.4. 可能值

12. 創(chuàng)建圖片邊框--圖像邊框平鋪、拉伸

12.1. border-image-repeat屬性規(guī)定圖像邊框是否應(yīng)該被重復(fù)(repeated)、拉伸(stretched)或鋪滿(rounded)。

12.2. 該屬性可以設(shè)置兩個(gè)參數(shù), 第一個(gè)值代表水平方向, 第二個(gè)值代表垂直方向。如果只設(shè)置一個(gè)參數(shù), 代表四個(gè)方向一樣。

12.3. 默認(rèn)值

12.4. 可能值

13. 創(chuàng)建圖片邊框

13.1. border-image屬性是一個(gè)簡(jiǎn)寫屬性, 用于設(shè)置以下屬性: border-image-source、border-image-slice和border-image-repeat。

13.2. 所有的創(chuàng)建圖片邊框?qū)傩栽谑褂弥岸急仨氃O(shè)置邊框?qū)挾取?/span>

13.3. 默認(rèn)值

13.4. 可能值

13.5. 例子

13.5.1.?代碼

<!DOCTYPE html> <html><head><title>border-image屬性創(chuàng)建邊框圖片</title><meta charset="utf-8" /><style type="text/css">* {margin: 0;padding: 0;}span {margin: 80px;border: 26px solid transparent;display: inline-block;line-height: 26px;background-color: red;}#round {border-image: url('border.png') 26 26 26 26 fill round;}#stretch {border-image-source: url('border.png');border-image-slice: 26 26 26 26;border-image-width: 0.5 1 2 4;border-image-outset: 1 9 5 3;border-image-repeat: repeat stretch;}</style></head><body><span id="round">創(chuàng)建圖片邊框</span><span id="stretch">創(chuàng)建圖片邊框</span><br /><br /><br /><br /><br /><p>這是我們使用的圖片:</p><img src="border.png" alt="border.png" /></body> </html>

13.5.2.?效果圖

《新程序員》：云原生和全面數(shù)字化實(shí)踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

以上是生活随笔為你收集整理的039_CSS3边框的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

边框