CSS3之border
本來是想把border和background寫一塊的，結果寫著寫著發現background內容太多，先發border吧
目錄
1.border-radius
（1）不做拆分
（2）拆分
（3）大合并
2.border-image
（1）border-image-source
（2）border-image-slice
（3）border-image-repeat
（4）borde-image-width：設置填充小方塊的寬度
（5）border-image-outset：設置border-image在邊框的位置
1.border-radius
border-radius這個屬性在學習CSS2的時候也經常使用，現在對它進行拆分，先來做一個正方形如下，然后看看我們在CSS2中是怎么用的吧
（1）不做拆分
【例1】四角統一設置一個參數
<!DOCTYPE html> <html lang="en"> <head><style>div {width: 100px;height: 100px;/* 居中三件套 */position: absolute;left: calc(50% - 100px);top: calc(50% - 100px);border: 2px solid #000;/* 做圓 */border-radius: 50%;}</style> </head> <body><div></div> </body> </html>【結果】?
【例2】設置兩個參數
div {width: 100px;height: 100px;/* 居中三件套 */position: absolute;left: calc(50% - 100px);top: calc(50% - 100px);border: 2px solid #000;/* 兩個參數 */border-radius: 50px 30px; }【結果】左上與右下50px，右上與左下30px
【例3】設置三個參數
div {width: 100px;height: 100px;position: absolute;left: calc(50% - 100px);top: calc(50% - 100px);border: 2px solid #000;border-radius: 50px 10px 20px; }?【結果】左下與右上同為一個參數
【例4】設置4個參數
div {width: 100px;height: 100px;position: absolute;left: calc(50% - 100px);top: calc(50% - 100px);border: 2px solid #000;border-radius: 10px 20px 30px 40px; }【結果】
?
（2）拆分
【例1】給每個角設置不同的值，該方法與傳4個參數相同
div {width: 100px;height: 100px;position: absolute;left: calc(50% - 100px);top: calc(50% - 100px);border: 2px solid #000;border-top-left-radius: 10px;border-top-right-radius: 20px;border-bottom-right-radius: 30px;border-bottom-left-radius: 40px; }【結果】左上，右上，右下，左下的圓角像素分別為10px，20px，30px，40px
【例2】拆分后可各傳兩個參數，用左上角舉例
div {width: 100px;height: 100px;position: absolute;left: calc(50% - 100px);top: calc(50% - 100px);border: 2px solid #000;border-top-left-radius: 20px 20px; }?先設置圓角為20px，使用控制臺去改變參數值
【結果】可以看到第一個參數控制水平方向的弧度，第二個參數控制垂直方向的弧度
【總結】圓角相當于拿一個有弧度的圖形去截直角，當水平與垂直方向的參數相同時，相當于去拿正圓截。
（3）大合并
將這八個參數同時寫在border-radius中，如下
div {width: 100px;height: 100px;position: absolute;left: calc(50% - 100px);top: calc(50% - 100px);border: 2px solid #000;border-radius: 10px 20px 30px 40px / 40px 30px 20px 10px; }【結果】由圖可知，參數對應關系如下左上水平，右上水平，右下水平，左下水平 / 左上垂直，右上垂直，右下垂直，左下垂直
2.border-image
（1）border-image-source
該屬性可控制邊框由什么填充，可以是圖片，也可以是漸變色等，需與slice配合使用，所以先講完border-image-slice再舉例
（2）border-image-slice
要填充到邊框內的圖片? ? ? ? ? ? ??該圖片，由線1，2，3，4分割成九塊，除了第5個小方塊，其他依次填充到邊框的左上角，上中，右上角，右中，右下角，下中，左下角，左中，即將第五小塊掏空，剩余部分作為邊框，但是每一個小塊都是獨立的。
slice的屬性值決定了如何切割該圖片，最多傳4個參數，4個參數依次為切割線3，2，4，1（上右下左）距離它最近邊框的距離。例如，第二個參數為30px，第四個參數為20px時，則切割線2距離圖片有邊框的距離為30px，切割線1距離圖片左邊框的距離就為20px，即方塊1的寬度為20px，方塊3的寬度為30px，方塊2的寬度是圖片的寬減去方塊1，3的寬度，然后按照border-image-repeat屬性值的方式填充到上邊框中間的位置。
【例】第一個方塊邊框填充漸變色，第二個方塊邊框填充圖片(81px*81px)
<!DOCTYPE html> <html lang="en"><head><style>* {margin: 0;padding: 0;}body {background-color: #000;}.wrapper {position: absolute;top: calc(50% - 77px);left: calc(50% - 160px);}.wrapper div {float: left;}.demo1 {width: 100px;height: 100px;background-color: #eee;border: 27px solid #424242;border-image-source: linear-gradient(#fcc, #ccf);border-image-slice: 1;margin-right: 12px;}.demo2 {width: 100px;height: 100px;border: 27px solid #424242;border-image-source: url(./red.png);border-image-slice: 27 27 27 27;}</style> </head><body><div class="wrapper"><div class="demo1"></div><div class="demo2"></div></div> </body></html>【結果】
【備注】圖片如下
【注】slice屬性值不帶像素，自動加px，也可為百分值，4個參數也可以合并為1/2/3個參數?
（3）border-image-repeat
該屬性決定了截取出來的圖片在邊框上的填充方式，屬性值介紹如下
stretch：拉伸，默認屬性
【例】
<!DOCTYPE html> <html lang="en"><head><style>* {margin: 0;padding: 0;}body {background-color: #000;}div {position: absolute;top: calc(50% - 77px);left: calc(50% - 77px);width: 100px;height: 100px;border: 27px solid #424242;border-image-source: url(./red.png);border-image-slice: 27 27 27 27;border-image-repeat: stretch;}</style> </head> <body><div></div> </body> </html>【結果】
?repeat：平鋪，當所給寬度不是切割后的小方塊的整數倍時，直接用不完整的小方塊從兩邊開始填充
【例】修改border-image-repeat的屬性值為repeat
【結果】在控制臺增加div的寬度，可以看到repeat的平鋪方式
round：平鋪，當所給寬度不是切割后的小方塊的整數倍時，拉伸/壓縮后填充
【例】修改border-image-repeat的屬性值為round
【結果】在控制臺增加div的寬度，可以看到round的平鋪方式
space：平鋪，?當所給寬度不是切割后的小方塊的整數倍時，用空白填充不足的部分
【例】修改border-image-repeat的屬性值為space
【結果】在控制臺增加div的寬度，可以看到space的平鋪方式
（4）borde-image-width：設置填充小方塊的寬度
【例】
（5）border-image-outset：設置border-image在邊框的位置
【例】
?
總結
以上是生活随笔為你收集整理的CSS3之border的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 跨域访问资源
- 下一篇： CSS3属性之background