這篇文章主要介紹標題中三個屬性獨特的一面。不獨特你打我）:
一、border
其實對於border,想必大家已經瞭解很多了。所以我就不囉嗦太多的基本東西。
比如border-radius我們只需要看這張圖:
現在我們來看看border的真實面貌：
width: 0;
height: 0;
border: 30px solid transparent;
border-top-color: rgb(222,11,22);
border-left-color: rgb(20,100,200);
border-right-color: rgb(1,200,200);
border-bottom-color: rgb(100,20,200);
複製程式碼
利用這一點我們能做出什麼呢？微信的訊息框：
.item {
position: relative;
width: 150px;
height: 50px;
background: #fff;
border-radius: 5px;
line-height: 50px;
&::after {
content: "";
display: block;
position: absolute;
width: 0;
height: 0;
border: 10px solid transparent;
border-right-color: #fff;
top: 15px;
left: -20px;
}
}
複製程式碼你看看以後再遇到用小三角的，是不是so easy! 哪怕是要用兩個。可能講到這裡，不少同學就很不樂意了，這些明明我多懂。來個新鮮的行不行？客官往下看：
what?別告訴我這也是用border畫的！心細的同學應該會看出來，這不就是dashed的樣式嗎？的確是用了dashed，但是我們多知道dashed這個樣式，我們不能修改它虛線的間距，這點很頭疼。所以這裡這個圖案出現的有那麼一點碰巧，但是它揭露了背景顏色會滲透到border的下面。
所以，當你要實現一個半透明的邊框時，並不是一個容易的事，你還需要結合background-clip。
聰明的同學又要問了，你這個圖案實現的太巧合了，在很多情況下，dashed並不能像我們預期的那樣。哈哈。接下來從box-shadow的講解中，我會給你個十全十美的方案。
二、box-shadow
這裡我就不說什麼單邊陰影，雙邊陰影了。直接接著上面的話題吧。要實現上面的圖案，首先你要明白，box-shadow是支援逗號分隔語法的。不賣關子，看程式碼:
width: 100px;
height: 100px;
background: rgb(200,100,200);
box-shadow: 40px 0 0 -20px rgb(200,100,200),
-40px 0 0 -20px rgb(200,100,200),
0 40px 0 -20px rgb(200,100,200),
0 -40px 0 -20px rgb(200,100,200);
複製程式碼我靠！陰影的尺寸還能是負數，是不是很驚訝。實際上，當陰影為負數時，陰影向內擴散，是不是很神奇，是不是很完美。
這裡我們還可以利用box-shadow來製造圖片翹邊的效果，這裡我們要結合transform。
.item {
position: relative;
width: 240px;
height: 320px;
background: url(../assets/images/head.jpeg) no-repeat center / 240px 320px;
border: 5px solid #fff;
&::before {
content: "";
display: block;
position: absolute;
top: 150px;
left: 70px;
width: 150px;
height: 150px;
box-shadow: 5px 5px 15px 10px rgb(213,213,213);
transform: skewX(20deg) rotate(15deg);
z-index: -100;
}
&::after {
content: "";
display: block;
position: absolute;
top: 18px;
left: 12px;
width: 150px;
height: 150px;
box-shadow: 0 0 15px 10px rgba(0,0,0,.2);
transform: skewX(20deg) rotate(15deg);
z-index: -100;
}
}
複製程式碼這裡我們要記住一點，無論你用box-shadow像外擴充套件了多少，並不影響元素本身的大小。
三、outline
與box-shadow相似的是，它的大小也不影響元素的大小。這裡可能需要講的，就是不要忽略outline-offset，而且它可以取負值。
.item {
width: 100px;
height: 100px;
outline: 10px solid rgb(110,110,110);
outline-offset: -45px;
border: 10px solid rgb(110,110,110);
border-radius: 50%;
}
複製程式碼
喜歡本文的小夥伴們,歡迎關注我的訂閱號超愛敲程式碼,檢視更多內容.
