前端常用CSS小技巧

注意：以下字首相容性寫法註釋
-o-：Opera
-ms：//IE10
-moz：//火狐
-webkit：//Safari 4-5, Chrome 1-9

19. 實現文字豎向排版

實現文字豎向排版，最簡單的方法是設定較小的寬度，然後高度自適應。

p{
    width: 25px;
    line-height: 18px;
    height: auto;
    font-size: 12px;
    padding: 8px 5px;
}
複製程式碼

設定較小的寬度，高度自適應

但是當想要多列展示時，設定寬度就不能實現我們想要的效果了，此時可以使用
writing-mode 屬性。

p{
    height: 210px;
    line-height: 30px;
    text-align: justify;
    writing-mode: vertical-lr;  //從左向右    
    writing-mode: tb-lr;        //IE從左向右

    //writing-mode: vertical-rl;  -- 從右向左
    //writing-mode: tb-rl;        -- 從右向左
}
複製程式碼

writing-mode 屬性實現豎向排列

18. 實現按比例計算淺紅到深紅的顏色值

設定 rgb，固定 r 值為 ff, 讓 g = b，從 ff 漸變到 0

#FF4040

#FF3030

#FF0000

效果圖

17. calc 可以使我們不用考慮元素的寬度值，直接交給瀏覽器去計算

當我們遇到左側寬度值固定，右側寬度值不定的時候，使用 calc 去設定元素的寬度是最好的解決辦法。
在IE9+、FireFox4.0+、Chrome19+、Safari6+都有較好的支援

支援 " + " 、" - " 、 " * " 、" / " （運算子前後要加空格）
支援 " px " 、 " % " 、 " em " 、 " rem " 等單位 （可混合使用）

CSS程式碼：
div .left{
    width: 200px;   //左側寬度固定
}
div .right{
    width: calc(100% - 200px);   
    width: -moz-calc(100% - 200px);
    width: -webkit-calc(100% - 200px);
}
複製程式碼

16. CSS實現圖片自動按比例等比例縮小並垂直水平居中，圖片不變形

CSS程式碼：
div{
    position: relative;
    width: 270px;
    height: 200px;
    border: 1px solid #e2e2e2;
}
div img{
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    max-width: 270px;
    max-height: 200px;
    width:expression(this.width > 270? "270px" : this.width);  //當低版本IE瀏覽器 不支援max-width屬性時執行該語句
    height:expression(this.height > 200? "200px" : this.height);
}
複製程式碼

15. 多行文字溢位顯示省略號

CSS程式碼：
.box{
    width: 100%;
    overflow: hidden;
    display: -webkit-box;   //將物件作為彈性伸縮盒子模型顯示  *必須結合的屬性*
    -webkit-box-orient: vertical;   //設定伸縮盒物件的子元素的排列方式  *必須結合的屬性*
    -webkit-line-clamp: 3;   //用來限制在一個塊元素中顯示的文字的行數
    word-break: break-all;   //讓瀏覽器實現在任意位置的換行 *break-all為允許在單詞內換行*
}
複製程式碼

三行溢位點點點

14. 單行文字溢位顯示省略號

CSS程式碼：
a{
    overflow: hidden;   //超出隱藏
    display: block;
    max-width: 116px;
    text-overflow: ellipsis;   //當文字內容溢位時顯示省略號
    white-space: nowrap;   //文字在同一行上不會換行，直到遇到 <br> 標籤為止
    height: 40px;
    line-height: 40px;
    background-color: #f8f8f8;
    padding: 0 10px;
}
複製程式碼

主要程式碼：
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

text-overflow: clip | ellipsis
clip: 不顯示省略號（...）
ellipsis: 當文字內容溢位時顯示省略號（...）

單行溢位點點點

13. 左右兩邊 div 的高度自適應相等

需要將 margin 和 padding 的數值設定的越大越好
需要給父元素設定 overflow: hidden;

html程式碼結構：
<div class="w c pagecont">
    <div class="l pageleft"></div>
    <div class="l pageright"></div>
</div>
複製程式碼

CSS程式碼：
.c{
    overflow: hidden;
    zoom: 1;
}
.pageleft, 
.pageright {
    padding: 30px;
    margin-bottom: -10000px;
    padding-bottom: 10030px;
}
複製程式碼

效果圖

12. appearance屬性，用來移除原生控制元件樣式。

示例：去除 select 預設樣式右側的下拉小三角形

select{
   appearance: none;
   -moz-appearance: none; //Firefox 
   -webkit-appearance: none; //Safari 和 Chrome 
}
複製程式碼

11. CSS實現文字兩端對齊

CSS程式碼：
div{
    text-align: justify;
    text-justify: distribute-all-lines;  //ie6-8
    text-align-last: justify;  //一個塊或行的最後一行對齊方式
    -moz-text-align-last: justify;
    -webkit-text-align-last: justify;
}
複製程式碼

10. IE6瀏覽器常見相容問題

// 橫向雙倍margin
IE6中設定元素浮動後，會出現橫向雙倍margin值。--新增 _display: inline;
// 3px bug
浮動塊元素處於同一行時，有預設的3px間距。--設定非浮動元素浮動。
// 透明度
opacity: 0.6; --filter: alpha(opacity = 60);
複製程式碼

9. PC端呼叫QQ實現線上聊天

點選圖示或者文字可以直接呼叫QQ實現線上聊天

<a href="http://wpa.qq.com/msgrd?v=3&amp;uin=80080088&amp;site=qq&amp;menu=yes" target="_self"><img border="0" src="http://wpa.qq.com/pa?p=2:80080088:51" title="線上客服" /></a>
//修改兩處QQ號即可
複製程式碼

圖示效果圖

<a href="tencent://message/?uin=80080088&amp;Site=Sambow&amp;Menu=yes">80080088</a>
//修改一處QQ號即可
複製程式碼

文字效果圖

8. CSS3 Gradient 漸變

CSS3 Gradient 分為線性漸變和徑向漸變。

html程式碼：
<div class = "gradient" style = "width: 120px; height: 80px; "></div>
複製程式碼

CSS程式碼：
background: #e6e6e6;   //當瀏覽器不支援背景漸變時該語句將會被執行
background: -o-linear-gradient(top, #fdfdfd,  #e6e6e6); 
background: -moz-linear-gradient(top, #fdfdfd, #e6e6e6); 
background: -webkit-linear-gradient(top, #fdfdfd, #e6e6e6);   //最新發布語法
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fdfdfd), #e6e6e6);   //老式語法
複製程式碼

示例：

background: -webkit-linear-gradient(left top, #ccc, green, yellow, red);   //線性漸變
background: -webkit-radial-gradient(center, red, blue, #f96, green);   //徑向漸變
//不設定位置，將會均勻分佈
複製程式碼

效果圖

效果圖

background: -webkit-linear-gradient(top, #ccc 5%, #F95 30%, red);   //線性漸變
background: -webkit-radial-gradient(center, red 5%, blue 10%, #f96 40%,  green 100%);   //徑向漸變
//設定位置
複製程式碼

效果圖

效果圖

background: -webkit-repeating-linear-gradient(-45deg, #f96, #f96 3px, green 3px, green 8px);   //線性重複漸變
background: -webkit-repeating-radial-gradient(red, #f96 2px, green 2px, green 8px);   //徑向重複漸變
複製程式碼

效果圖

效果圖

共有三個引數，第一個參數列示線性漸變的方向，top是從上到下，left是從左到右，如果定義成left top 或者角度(-45deg)，那就是從左上角到右下角。第二個引數是起點顏色，第三個引數是終點顏色。可以在它們之間插入更多的引數，表示多種顏色的漸變。

IE依靠濾鏡實現漸變。
startColorstr表示起點的顏色，endColorstr表示終點顏色。GradientType表示漸變型別，0表示垂直漸變，1表示水平漸變。

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#f96, endColorstr=#ccc);   //IE9
-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#f96, endColorstr=#ccc)";   //IE8+
複製程式碼

例項 （實現滑鼠移上時出現黑心圓點效果）

CSS程式碼：
span{
    display: block;
    float: left;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    border: 1px solid #ccc;
    font-size: 0;
    background: #fff;
    margin: 0 5px;
}
span:hover{
    background: #676767;  
    background: -o-radial-gradient(center, #676767 26%, #fff 44%, #fff 100%); 
    background: -moz-radial-gradient(center, #676767 26%, #fff 44%, #fff 100%); 
    background: -webkit-radial-gradient(center, #676767 26%, #fff 44%, #fff 100%); 
}
複製程式碼

實現黑心圓效果

7. CSS3 columns多列布局

div{
    //把div元素中的文字劃分為4列
           -moz-columns: 4;
        -webkit-columns: 4;
                columns: 4;
    //將div元素中的文字分為三列，並列間30px的間隔
        -moz-column-gap: 30px;
     -webkit-column-gap: 30px;
             column-gap: 30px;
    //規定列之間的寬度、樣式和顏色
       -moz-column-rule: 1px outset #fff;
    -webkit-column-rule: 1px outset #fff;
            column-rule: 1px outset #fff;
}
複製程式碼

多列布局效果圖

6. 設定表單file控制元件上傳檔案時可以選擇多個檔案

<input type='file' multiple='true'>   //設定multiple屬性值為true
複製程式碼

5. CSS實現一行水平居中，多行左對齊效果

html程式碼：
<p class='text'><span>一行水平居中，多行左對齊。</span></p>
<p class='text'><span>一行水平居中，多行左對齊。一行水平居中，多行左對齊。一行水平居中，多行左對齊。</span></p>
複製程式碼

css程式碼：
.text {text-align: center;}
.text span {display: inline-block; text-align: left;}
複製程式碼

4. 空白會被保留

css程式碼:
white-space: pre;
複製程式碼

3. 修改input輸入框中游標的顏色不改變字型的顏色

input{
    color:  #fff;
    caret-color: red;
}
複製程式碼

字型白色 游標紅色

2. 修改input 輸入框中 placeholder 預設字型樣式

//webkit核心的瀏覽器 
input::-webkit-input-placeholder {
    color: #c2c6ce;
}
//Firefox版本4-18 
input:-moz-placeholder {
    color: #c2c6ce;
}
//Firefox版本19+
input::-moz-placeholder {
    color: #c2c6ce;
}
//IE瀏覽器
input:-ms-input-placeholder {
    color: #c2c6ce;
}
複製程式碼

1. 去除瀏覽器中 input button 等標籤獲得焦點時的帶顏色邊框

CSS程式碼：
input, textarea, button{
    outline:none;
}
複製程式碼

獲得焦點時的效果圖

去除樣式後的效果圖