css 技巧（持續更新）

時間 2019-12-02

標籤 css 技巧持續更新欄目 CSS 简体版

原文原文鏈接

一、滾動條樣式

/*自定義滾動條-----隱藏型*/

.scroll::-webkit-scrollbar-track{

border-radius: 1px;

}

.scroll::-webkit-scrollbar{

height: 1px;

width: 1px;

background-color:transparent;

}

/*定義滑塊內陰影+圓角*/

.scroll::-webkit-scrollbar-thumb{

background-color:transparent;

}

/*ie*/

.scroll{

scrollbar-arrow-color: rgba(231, 231, 245, 0.5);

-ms-scrollbar-arrow-color: rgba(231, 231, 245, 0.5);

scrollbar-base-color: #f1f1f1;

-ms-scrollbar-base-color: #f1f1f1;

scrollbar-shadow-color: #fafafa;

scrollbar-track-color: rgba(253, 253, 253, 0.5);

-ms-scrollbar-track-color: rgba(253, 253, 253, 0.5);

-ms-overflow-style: none;

-ms-scroll-rails: none;

-ms-overflow-style: none;

}

/*自定義滾動條-----黑線條型*/

.linescroll::-webkit-scrollbar-track{

border-radius: 10px;

background-color: rgba(201, 201, 202, 0.5);

}

.linescroll::-webkit-scrollbar{

height: 5px;

width: 5px;

background-color:rgb(109, 108, 108);

}

/*定義滑塊內陰影+圓角*/

.linescroll::-webkit-scrollbar-thumb{

background-color:rgb(88, 88, 88);

}

二、優化ie下select樣式

select {
/*Chrome和Firefox裏面的邊框是不同的，因此複寫了一下*/
border: solid 1px #A9A9A9;css

/*很關鍵：將默認的select選擇框樣式清除*/
appearance:none;
-moz-appearance:none;
-webkit-appearance:none;html

/*在選擇框的最右側中間顯示小箭頭圖片*/
background:#fff url("../img/select_reset.png") no-repeat scroll right center;web

/*爲下拉小箭頭留出一點位置，避免被文字覆蓋*/
padding-left:7px;
padding-right: 17px;
}app

/*清除ie的默認選擇框樣式清除，隱藏下拉箭頭*/
select::-ms-expand { display: none; }flex

三、一句代碼讓你的彩色圖片變灰優化

img.desaturate {    
  filter: grayscale(100%);    
  -webkit-filter: grayscale(100%);    
  -moz-filter: grayscale(100%);    
  -ms-filter: grayscale(100%);    
  -o-filter: grayscale(100%);
}

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

……能夠直接使用 :not() 僞類來應用元素：spa

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

五、去掉谷歌默認黃色背景

.form input{
　　height: 38px;
　　border-color: #2599cf;
　　color: #0374d0;
　　width: 220px;
　　padding-left: 40px;
　　border:1px solid;3d

　　background: transparent content-box;

　 height: 0;

　　padding: 19px 0 19px 35px;

}code

六、使用nth-child 選擇列表項1到n

li {
 display: none;
}
/* select items 1 through 3 and display them */
li:nth-child(-n+3) {
 display: block;
}

七、表格單元格等寬

　table{

　　table-layout: fixed;

　　}

八、文本漸變

h2[data-text] {

position: relative;

}

h2[data-text]::after {

content: attr(data-text);

z-index: 10;

color: #e3e3e3;

position: absolute;

top: 0; left: 0;

-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), color-stop(50%, rgba(0,0,0,1)), to(rgba(0,0,0,0)));

}

還有另一種：

background: linear-gradient(to right, red, blue);

-webkit-background-clip: text;

color: transparent;

九、文本模糊

color: transparent;   
text-shadow: 0 0 5px rgba(0,0,0,0.5);

十、不使用flex，文本兩端對齊

第一種，沒有嵌套標籤：

第二種，有嵌套標籤：

　　html代碼：

<div class="container">    
  <div class="justify">
     <span>1</span><span>2</span><span>3</span><span>4</span>
  </div>
  <div class="justify">
     <span>1</span><span>2</span><span>3</span>     
  </div> 
</div>

　　樣式：

.container{
  width:400px;
}
.justify{
  width:100%;
  height:24px;
  text-align: justify;
  position:relative;
}
span{
  display:inline-block;
  width: 20px;
  text-align: center;
  border-radius: 4px;
  background: blueviolet;
  color:#fff;
}

　　效果以下：

沒有獲得意料之中的結果，並無實現所謂的兩端對齊，緣由是：

雖然 `text-align:justify` 屬性是全兼容的，可是要使用它實現兩端對齊，須要注意在模塊之間添加**[空格/換行符/製表符]**才能起做用。

也就是說每個 1 間隙，至少須要有一個空格或者換行或者製表符才行。

而後，咱們更新一下 HTML 結構，採用一樣的 CSS，結果是：

依然沒有實現，緣由在於 justify 只有在存在第二行（行塊元素）的狀況下，第一行才兩端對齊，因此在這裏，咱們須要製造一個假的第二行，而 :after 僞元素正好再適合不過。

十一、美化默認的checkbox的樣式

思路：隱藏默認的checkbox ，經過label 標籤for屬性錨定checkbox ，控制是否選中，給label標籤自定義樣式

<ul>
   <li class="list-body">
     <input type="checkbox" id="checkbox-1" hidden />
     <label for="checkbox-1"></label>
     <span>類型1</span>
   </li>
   <li class="list-body">
     <input type="checkbox" id="checkbox-2" hidden />
     <label for="checkbox-2"></label></span>
     <span>類型2</span>
   </li>
   <li class="list-body">
     <input type="checkbox" id="checkbox-3" hidden />
     <label for="checkbox-3"></label></span>
     <span>類型3</span>
   </li>
</ul>

ul ,ol{
     list-style: none;display: inline-block; 
 }

.list-body label{
    width: 14px;
    height: 14px;
 }

[id^="checkbox-"] + label {
    background-color: #FFF;
    border: 1px solid;
    border-color: #C1CACA;
    border-radius: 4px;
    float:left;
    position:relative;
    top: 3px;
    right: 4px;
}
[id^="checkbox-"]:checked + label {
    border-color: #38e;
    transition: all 0.5s linear 0s;
    transform-style: preserve-3d;
    transform-origin: 50% 50%;
}
[id^="checkbox-"]:checked + label:after {
    content: '\2713';
    position: relative;
    top: -5px;
    left: 2px;
    color: #38e;;
    text-align: center;
    font-size: 0.8rem;
 }

效果：

十二、改變input 光標的顏色

1三、利用 transparent 屬性實現各類三角形

1四、實現文字的波浪線或虛線效果

相信你們對於 text-decoration 這個屬性並不陌生，在重置 a 標籤的默認樣式時，咱們常常要這樣寫：text-decoration: none; 可能對它瞭解的人也不多，實際上 text-decoration 是一個複合屬性，由 line、style 和 color 組成。