039_CSS3边框
1. 通過CSS3, 您能夠創建圓角邊框, 向矩形添加陰影, 使用圖片來繪制邊框, 并且不需使用設計軟件, 比如: photoshop。
2. 邊框左上角形狀
2.1. border-top-left-radius屬性定義左上角邊框的形狀。
2.2. border-top-left-radius屬性的長度值或者百分比值定義四分之一橢圓(定義外部邊框邊緣的邊角形狀)的半徑。第一個值是水平半徑, 第二個值是垂直半徑。如果省略第二個值, 則復制第一個值。如果長度為零, 則邊角為方形, 而不是圓形。水平半徑的百分比值參考邊框盒的寬度, 而垂直半徑的百分比值參考邊框盒的高度。
2.3. 默認值
2.4. 可能值
3. 邊框右上角形狀
3.1. border-top-right-radius屬性定義右上角邊框的形狀。
3.2. 默認值
3.3. 可能值
4. 邊框右下角形狀
4.1. border-bottom-right-radius屬性定義右下角邊框的形狀。
4.2. 默認值
4.3. 可能值
5. 邊框左下角形狀
5.1. border-bottom-left-radius屬性定義左下角邊框的形狀。
5.2. 默認值
5.3. 可能值
6.創建圓角邊框
6.1. border-radius屬性是一個簡寫屬性, 用于設置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各是一對。
?6.2.2. 如果省略bottom-left, 則與top-right相同。如果省略bottom-right, 則與top-left相同。如果省略top-right, 則與top-left相同。
6.3. 默認值
6.4. 可能值
6.5. 例子
6.5.1. 代碼
<!DOCTYPE html> <html><head><title>border-radius屬性創建圓角邊框</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屬性向框添加一個或多個陰影。
7.2. 語法
box-shadow: h-shadow v-shadow blur spread color inset;7.3. box-shadow向框添加一個或多個陰影。該屬性是由逗號分隔的陰影列表, 每個陰影由2-4個長度值、可選的顏色值以及可選的inset關鍵詞來規定。省略長度的值是0。
7.4. 默認值
7.5. 可能值
7.6. 例子
7.6.1.?代碼
<!DOCTYPE html> <html><head><title>box-shadow屬性創建邊框陰影</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. 創建圖片邊框--使用圖片
8.1. border-image-source屬性規定要使用的圖像。
8.2. 默認值
8.3. 可能值
9. 創建圖片邊框--向內偏移
9.1. border-image-slice屬性規定圖像邊框的向內偏移。
9.2. 該屬性規定圖像的上、右、下、左側邊緣的向內偏移, 圖像被分割為九個區域: 四個角、四條邊以及一個中間區域。
9.3. 該屬性可以設置5個參數, 前1~4個參數是按照上、右、下、左的位置分割圖片。第五個參數fill, 否則中間的圖像部分會被丟棄。如果省略第四個數值, 則與第二個值相同。如果省略第三個值, 則與第一個值相同。如果省略第二個值, 則與第一個值相同。
9.4. 默認值
9.5. 可能值
10. 創建圖片邊框--圖像邊框的寬度
10.1. border-image-width屬性規定圖像邊框的寬度。
10.2. 該屬性可以設置4個值, 按照上、右、下、左的位置設置圖像邊框的寬度。如果忽略第四個值, 則與第二個值相同。如果省略第三個值, 則與第一個值相同。如果省略第二個值, 則與第一個值相同。不允許任何負值作為 border-image-width值。
10.3. 默認值
10.4. 可能值
11. 創建圖片邊框--圖像超過邊框盒的量
11.1. border-image-outset屬性規定邊框圖像超過邊框盒的量。
11.2. 該屬性可以設置4個值, 按照上、右、下、左的位置設置邊框圖像超過邊框盒的量。如果忽略第四個值, 則與第二個值相同。如果省略第三個值, 則與第一個值相同。如果省略第二個值, 則與第一個值相同。
11.3. 默認值
11.4. 可能值
12. 創建圖片邊框--圖像邊框平鋪、拉伸
12.1. border-image-repeat屬性規定圖像邊框是否應該被重復(repeated)、拉伸(stretched)或鋪滿(rounded)。
12.2. 該屬性可以設置兩個參數, 第一個值代表水平方向, 第二個值代表垂直方向。如果只設置一個參數, 代表四個方向一樣。
12.3. 默認值
12.4. 可能值
13. 創建圖片邊框
13.1. border-image屬性是一個簡寫屬性, 用于設置以下屬性: border-image-source、border-image-slice和border-image-repeat。
13.2. 所有的創建圖片邊框屬性在使用之前都必須設置邊框寬度。
13.3. 默認值
13.4. 可能值
13.5. 例子
13.5.1.?代碼
<!DOCTYPE html> <html><head><title>border-image屬性創建邊框圖片</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">創建圖片邊框</span><span id="stretch">創建圖片邊框</span><br /><br /><br /><br /><br /><p>這是我們使用的圖片:</p><img src="border.png" alt="border.png" /></body> </html>13.5.2.?效果圖
《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀總結
以上是生活随笔為你收集整理的039_CSS3边框的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 038_CSS3图像透明度
- 下一篇： 040_CSS3背景