你不知道的css技巧

css黑科技

currentColor當前顏色

<a href="##" class="link"><i class="icon"></i>返回</a>
.icon {
  display: inline-block;
  width: 16px; 
  height: 20px;
  background-image: url(http:jartto.wang/test.png);
  background-color: currentColor; /* 該顏色控制圖標的顏色 */
  background-position: 0 0;
}
.link:hover {
  color: #333; /* 雖然改變的是文字顏色，可是圖標顏色也一塊兒變化了 */
}

vh、vw、vmin、vmax單位
瀏覽器的視口的寬、高被分爲100份，1vh至關於瀏覽器高度的百分之一，即瀏覽器的高度爲800px,則1vh=8px。
vw寬度同理。vh、vw支持calc算法

.box{
  height: calc(100vh - 50px);
}
h1 {
  font-size: 8vw;
}

vmin和vmax是與此次寬度和高度的最大值或最小值有關，取決於哪一個更大和更小。例如，若是瀏覽器設置爲
1100px寬、700px高，1vmin會是7px,1vmax爲11px。然而，若是寬度設置爲800px，高度設置爲1080px，
1vmin將會等於8px而1vmax將會是10.8px。

.box{
  height: calc(100vmax - 50px);
}

邊框多個顏色

.box{
    border-style:solid;
    border-color:red green blue pink;
}

必須設置border-style纔會有效果

css畫小箭頭
使用border和transparent屬性實現

/*箭頭向上*/
.arrow-up {
  width:0;
  height:0;
  border-left:30px solid transparent;
  border-right:30px solid transparent;
  border-bottom:30px solid #fff;
}
/*箭頭向下*/
.arrow-down {
  width:0;
  height:0;
  border-left:20px solid transparent;
  border-right:20px solid transparent;
  border-top:20px solid #0066cc;
}

圖片濾鏡效果
使用filter屬性能夠實現各類各樣的圖片效果，包括如下屬性

grayscale 灰度
sepia 褐色
saturate 飽和度
hue-rotate 色相旋轉
invert 反色
opacity 透明度
brightness 亮度
contrast 對比度
blur 模糊
drop-shadow 陰影

瀏覽器滾動條美化（僅支持webkit內核瀏覽器）

/*滾動條 start*/
::-webkit-scrollbar {
  width: 1px;
  height: 4px;
  background-color: #F5F5F5;
}
/*定義滾動條軌道 內陰影+圓角*/
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  background: #fff ;
}
/*定義滑塊 內陰影+圓角*/
::-webkit-scrollbar-thumb {
  border-radius: 3px;
  box-shadow: inset 0 0 6px rgba(0,0,0,.3);
  // background-color:rgba(7, 170, 247, 0.7);
  background-color: transparent;
}
::-webkit-scrollbar-thumb:hover {
  border-radius: 3px;
  box-shadow: inset 0 0 6px rgba(0,0,0,.3);
  background-color:rgba(7, 170, 247, 1);
}

使用 :not() 在菜單上應用/取消應用邊框

.nav li:not(:last-child) {
  border-right: 1px solid #666;
}

瀏覽器默認行高line-height通常爲1.15倍，能夠給body設置line-height:1來設置行高爲1.0倍

body{
      line-height: 1;
}

使用負的 nth-child 選擇項目
在CSS中使用負的 nth-child 選擇項目1到項目n。

li {
  display: none;
}
li:nth-child(-n+3) {
  display: block;
}

禁用鼠標事件

.disabled {
    pointer-events: none;
}