你不知道的css技巧

littleGrow 發布于2019-08-21 17:56 / 2179人閱讀

摘要：支持算法和是與這次寬度和高度的最大值或最小值有關，取決于哪個更大和更小。例如，如果瀏覽器設置為寬高，會是為。然而，如果寬度設置為，高度設置為，將會等于而將會是。禁用鼠標事件

css黑科技

currentColor當前顏色

返回
.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;
}

GPU云服務器云服務器你不知道的你不知道的javascript 你不知道的javascript上卷你不知道

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/90225.html

你不知道的css技巧

摘要：支持算法和是與這次寬度和高度的最大值或最小值有關，取決于哪個更大和更小。例如，如果瀏覽器設置為寬高，會是為。然而，如果寬度設置為，高度設置為，將會等于而將會是。禁用鼠標事件 css黑科技 currentColor當前顏色返回 .icon { display: inline-block; width: 16px; height: 20px; background-im...

lpjustdoit 2019-08-02 15:59 評論0 收藏0
你不知道的css技巧

摘要：支持算法和是與這次寬度和高度的最大值或最小值有關，取決于哪個更大和更小。例如，如果瀏覽器設置為寬高，會是為。然而，如果寬度設置為，高度設置為，將會等于而將會是。禁用鼠標事件 css黑科技 currentColor當前顏色返回 .icon { display: inline-block; width: 16px; height: 20px; background-im...

MyFaith 2019-08-29 13:56 評論0 收藏0
你不知道的CSS（二）

摘要：用來控制表格單元格寬度你也許遇到過給表格設置了寬度，但是不起作用的問題。這是因為單元格的寬度是根據其內容進行調整的。顯而易見的，默認情況下，單元格寬度受其內容約束。而設置了后，其單元格寬度變得可控了。本文首發于我的博客在上文《你不知道的CSS（一）》中，介紹了兄弟選擇器美化表單，font-size:0消除間隙，overflow清除浮動，border繪制三角形等7個實用技巧。由于文章長...

sewerganger 2019-08-29 13:22 評論0 收藏0
你不知道的CSS（三）

摘要：本文首發于我的博客在前面兩篇文章你不知道的一和你不知道的二中大致介紹了一些方面比較隱晦的但又很實用的技巧。系列文章你不知道的一你不知道的二本文首發于我的博客本文首發于我的博客在前面兩篇文章《你不知道的CSS（一）》和《你不知道的CSS（二）》中大致介紹了一些CSS方面比較隱晦的但又很實用的技巧。相信這些技巧會為大家在項目實踐中帶來一定的幫助，本文作為《你不知道的CSS》系列的第三篇...

xiangzhihong 2019-08-29 13:28 評論0 收藏0