知識(shí)儲(chǔ)備
1.linear-grdient() 這一屬性在第二章背景色被廣泛應(yīng)用
2.svg這一應(yīng)用內(nèi)容比較寬泛伯顶，具體看下面的小例子
3.border-image()() 將圖片規(guī)定為包圍 div 元素的邊框
參數(shù)：圖片URL壤短，剪裁位置，重復(fù)性
個(gè)人感覺用于九宮格圖片做邊框比較合適蛮瞄，純圖片不合適
有興趣的可以看看張?chǎng)涡竦倪@篇文章
4.clip-path 用于定義裁剪路徑，兼容性是一個(gè)大問題
小測(cè)試
首先我們要實(shí)現(xiàn)的效果類似于
可能有人要問了谆扎，這個(gè)效果并不是那么好看挂捅，為什么大費(fèi)周章去實(shí)現(xiàn)它呢？
我的回答：當(dāng)你在一大片方塊中發(fā)現(xiàn)這么個(gè)小玩意堂湖，我真的被其風(fēng)格吸引了
測(cè)試代碼1
html
<div>Hey,focus!You're supposed to be looking at my corners,not reading my text.The text is just placeholder!</div>
css
div{
width: 200px;
padding: 10px 20px;
color: white;
background: linear-gradient(-45deg ,transparent 15px ,#58a 0);}
這里我們用熟悉的linear-gradient實(shí)現(xiàn)了效果闲先。傾斜-45°，制造一個(gè)15px的剪角无蜂，OK完成
小測(cè)試2
讓我們來嘗試做2個(gè)剪角伺糠，效果像
示例代碼2
css
background:
linear-gradient(-45deg ,transparent 15px ,tan 0) right,
linear-gradient(45deg ,transparent 15px ,yellowgreen 0) left;
background-size: 50% 100%;
background-repeat: no-repeat;
思路
1.左右分開先 /設(shè)置寬度大小50%
2.綠色左邊，土色右邊
3.因?yàn)?0%會(huì)產(chǎn)生 repeat 斥季，所以設(shè)置no-repeat
用radial來試試
小測(cè)試3
用border-image來實(shí)現(xiàn)同樣的效果
css
border: 20px solid transparent;
border-image: 1 url('data:image/svg+xml,\
<svg xmlns="http://www.w3.org/2000/svg"\
width="3" height="3" fill="%2358a">\
<polygon points="0,1 1,0 2,0 3,1 3,2 2,3 1,3 0,2"/>\
</svg>');
background: tan;
background-clip: padding-box;
效果：
Tips:這里的width=3和height=3都是相對(duì)單位训桶，相當(dāng)于33.34%
這里吐槽一下chrome累驮，在裁剪這一方面總是出現(xiàn)鋸齒和莫名的小問題
小測(cè)試4
background: yellowgreen;
-webkit-clip-path:polygon(20px 0,
calc(100% - 20px) 0,
100% 20px,
100% calc(100% - 20px),
calc(100% - 20px) 100%,
20px 100%,
0 calc(100% - 20px),
0 20px);
clip-path: polygon(20px 0,
calc(100% - 20px) 0,100%
20px, 100%
calc(100% - 20px),
calc(100% - 20px) 100%,
20px 100%,
0 calc(100% - 2px),
0 20px);
!這個(gè)屬性兼容性好像chrome可以，連Firefox也不支持也是很無語(yǔ)
效果與上圖類似舵揭。
小節(jié)：綜合來看谤专，選一種最合適的，應(yīng)該屬于border-image了午绳，既不復(fù)雜置侍，兼容性也不錯(cuò)！
