巧妙的CSS

雲棲直播~發表於2018-07-19
CSS

一個介面設計優秀的網站總是更能吸引使用者的目光。介面設計優秀與否還是主要看UI設計師的能力，但是要想還原設計師給出UI，那麼你的CSS編寫能力就至關重要。

CSS和JS一樣，也在不斷的發展中，隨著各個瀏覽器對CSS3的逐漸支援，CSS能發揮的作用越來越來大。熟練的使用CSS技術能編寫出優秀的介面，還能減少JS的工作量。

下面將介紹一些巧妙地使用CSS的方法。

邊框和背景

半透明邊框

半透明的邊框一般來說直接設定邊框顏色透明度就好了，但是在元素有背景顏色的情況下，背景色會延伸到邊框區域，影響了邊框的顯示。這裡可以使用background-clip來解決。

<style>
.transparent-border {
  width: 100px;
  height: 100px;
  border: 10px solid rgba(0,0,0,0.2);
  background-color: blue;
  background-clip: padding-box; // border-box | padding-box
}
</style>
<div class="transparent-border"></div> 
複製程式碼

巧妙的CSS

多重邊框

邊框出了可以使用border來寫，還可以使用box-shadow來模擬，主要使用到屬性的第四個引數，陰影的尺寸。由於box-shadow是可以寫多個的，所以我們來用來做多邊框的情況。注意第一層投影是在最上層，同時投影不影響佈局，也不響應滑鼠事件。

<style>
.multiple-border {
    width: 100px;
    height: 100px;
    margin: 20px;
    box-shadow: 0 0 0 5px #655, 0 0 0 10px deeppink;
    border-radius: 5px;
}
</style>
<div class="multiple-border"></div> 
複製程式碼

巧妙的CSS

條紋背景

條紋背景可以用線性漸變來寫，在每個區間都使用純色即可。

注意下線性漸變中，如果我們把第二個色標的位置值設定為 0，那它的位置就總是會被瀏覽器調整為前一個色標的位置值

<style>
div {
  width: 100px;
  height: 100px;
  background: linear-gradient(#fb3 33.3%,#58a 0, #58a 66.6%, yellowgreen 0);
  background-size: 100% 45px;
  margin: 20px;
}
</style>
<div></div>
複製程式碼

巧妙的CSS

形狀

橢圓

border-radius 可以單獨指定水平 和垂直半徑， 只要用一個斜槓（ /） 分隔這兩個值即可

<style>
div {
  width: 100px;
  height: 75px;
  border-radius: 100px / 75px;
  background: linear-gradient(#fb3 33.3%,#58a 0, #58a 66.6%, yellowgreen 0);
  background-size: 100% 45px;
  margin: 20px;
}
</style>
<div></div>
複製程式碼

巧妙的CSS

平行四邊形

第一種方法用兩個標籤，第一層在X軸方向扭曲，內層在扭曲回來保證文字正常顯示。

<style>
.button { display: inline-block; background-color:#fb3; transform: skewX(-45deg); }
.button > span { display: inline-block; transform: skewX(45deg); }
</style>
<a href="#yolo" class="button">
    <span>Click me</span>
</a>
複製程式碼

第二種方法就是用到偽元素了。

<style>
.button {
    position: relative;
/* 其他的文字顏色、內邊距等樣式…… */
}
.button::before {
    content: ''; /* 用偽元素來生成一個矩形 */
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: -1;
    background: #58a;
    transform: skew(-45deg);
}
</style>
<a href="#yolo" class="button">
    Click me
</a>
複製程式碼

巧妙的CSS

菱形

<style>
.picture {
    width: 25px;
    height: 25px;
    transform: rotate(45deg);
    overflow: hidden;
    margin: 20px;
    background: #58a;
}
.picture > span {
    display: inline-block;
    transform: rotate(-45deg);
}
</style>
<div class="picture">
    <span>Pic</span>
</div>
複製程式碼

巧妙的CSS

梯形Tab

梯形也是可以用CSS3實現，原理是利用CSS3的3D效果，把矩形往“後面”倒，形成梯形。

效果

巧妙的CSS

視覺效果

單側投影

blur 4px: 這在本質上表示在陰影邊緣發生陰影色和純透明色之間的顏色過渡長度近似於模糊半徑的兩倍（比如在這裡是 8px）

配合負值的陰影大小就可以實現單側投影。

box-shadow: 0 4px 4px -4px black;
複製程式碼

鄰邊投影

box-shadow: 3px 3px 6px -3px black;
複製程式碼

雙側投影

box-shadow: 5px 0 5px -5px black,-5px 0 5px -5px black;
複製程式碼

不規則投影

filter: drop-shadow(2px 2px 4px rgba(0,0,0,.5));
複製程式碼

巧妙的CSS

總結

CSS的功能還是很強大的，在不斷學習JS的同時，不能忘了CSS技能的提升。上面的技巧主要來自《CSS揭祕》

相關文章