前端常用CSS小技巧

風暴阿呆發表於2017-12-14

注意：以下字首相容性寫法註釋
-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;
}
複製程式碼

獲得焦點時的效果圖

去除樣式後的效果圖

常用的CSS小技巧
2018-08-11
CSS
常用前端佈局，CSS技巧介紹
2018-11-09
前端CSS
【CSS】CSS常用技巧
2018-11-21
CSS
前端開發者應該知道的 CSS 小技巧
2016-02-23
前端CSS
CSS 常用技巧
2018-06-13
CSS
api日常總結：前端常用js函式和CSS常用技巧
2017-10-21
API前端JS函式CSS
css小技巧
2017-10-25
CSS
css常用技巧梳理
2023-03-08
CSS
HTML + CSS 小技巧
2018-07-01
HTMLCSS
CSS揭祕之《小技巧》
2017-09-03
CSS
【web前端】小技巧總結
2017-06-27
Web前端
30個Python常用小技巧
2018-09-17
Python
CSS樣式設定小技巧
2017-09-20
CSS
小技巧 - CSS中:hover除錯
2014-09-03
CSS除錯
常用的一些javascript小技巧
2020-11-12
JavaScript
iOS 知識-常用小技巧彙總
2016-11-14
iOS
【小技巧】CSS文字兩端對齊
2021-09-09
CSS
8個CSS函式的小技巧
2016-08-31
CSS函式
前端跨域常用方法小結
2017-10-12
前端跨域
前端工程師分享幾個CSS技巧
2020-11-18
前端工程師CSS
常用應用伺服器——Tomcat的常用小技巧
2022-03-21
伺服器Tomcat
CSS清除浮動常用方法小結
2011-12-22
CSS
深入 TypeScript – 2( 幾個常用的小技巧)
2019-03-02
TypeScript
Laravel 9 個不經常用的小技巧
2019-04-24
Laravel
javascript的40個網頁常用小技巧
2011-06-05
JavaScript網頁
【譯】22個必備的CSS小技巧
2018-12-12
CSS
css選擇器順序的小技巧
2014-10-28
CSS
web前端html+css常用佈局01
2015-08-25
Web前端HTMLCSS
web前端html+css常用佈局02
2015-08-25
Web前端HTMLCSS
web前端html+css常用佈局03
2015-08-25
Web前端HTMLCSS
web前端html+css常用佈局04
2015-08-25
Web前端HTMLCSS
web前端學習：CSS樣式設定技巧
2018-07-16
Web前端CSS
前端開發CSS實用的技巧有哪些
2024-02-07
前端CSS
前端非常有意思的小技巧
2019-03-28
前端
js前端除錯的幾個小技巧
2017-04-10
JS前端除錯
前端開發者都應知道的 jQuery 小技巧
2015-10-31
前端jQuery
【轉貼】55種網頁常用小技巧(JavaScript)
2008-08-31
網頁JavaScript
好程式設計師web前端教程分享CSS技巧！
2019-06-25
程式設計師Web前端CSS

前端常用CSS小技巧

19. 實現文字豎向排版

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

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

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

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

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

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

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

11. CSS實現文字兩端對齊

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

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

8. CSS3 Gradient 漸變

示例：

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

7. CSS3 columns多列布局

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

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

4. 空白會被保留

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

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

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

相關文章

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