58 個(gè)提升開發(fā)效率的 CSS 常用代碼片段匯總

作者：web前端開發(fā) 2025-08-28 09:42:03

今天這篇文章整理了 58個(gè)提高 CSS 開發(fā)效率的必備代碼片段，它們涵蓋布局、動(dòng)畫、樣式控制等多個(gè)方面，讓你在寫代碼時(shí)真正做到“事半功倍”。

在前端開發(fā)的日常工作中，CSS 是我們接觸最頻繁、卻又最耗費(fèi)時(shí)間的部分。無(wú)論是頁(yè)面布局、元素對(duì)齊、還是響應(yīng)式設(shè)計(jì)，很多時(shí)候我們都在重復(fù)造輪子。

如果能把常用的技巧和代碼片段整理起來(lái)，不僅能大幅提升效率，還能在面對(duì)復(fù)雜場(chǎng)景時(shí)快速找到解決方案。

今天這篇文章整理了 58個(gè)提高 CSS 開發(fā)效率的必備代碼片段，它們涵蓋布局、動(dòng)畫、樣式控制等多個(gè)方面，讓你在寫代碼時(shí)真正做到“事半功倍”。

01.清除浮動(dòng)

浮動(dòng)給我們的代碼帶來(lái)的麻煩，想必不需要多說(shuō)，我們會(huì)用很多方式來(lái)避免這種麻煩，其中我覺(jué)得最方便也是兼容性最好的一種是，在同級(jí)目錄下再創(chuàng)建一個(gè)<div></div>；不過(guò)這樣會(huì)增加很多無(wú)用的代碼。

此時(shí)我們用:after這個(gè)偽元素來(lái)解決浮動(dòng)的問(wèn)題，如果當(dāng)前層級(jí)有浮動(dòng)元素，那么在其父級(jí)添加上 clearfix 類即可。

// 清除浮動(dòng)
.clearfix:after {
content: "\00A0";
display: block;
visibility: hidden;
width: 0;
height: 0;
clear: both;
font-size: 0;
line-height: 0;
overflow: hidden;
}
.clearfix {
  zoom: 1;
}

02.垂直水平居中

在 css 的世界里水平居中比垂直居中來(lái)的簡(jiǎn)單一些，經(jīng)過(guò)了多年的演化，依然沒(méi)有好的方式來(lái)讓元素垂直居中(各種方式各有優(yōu)缺點(diǎn)，但都不能達(dá)到兼容性好，破壞力小的目標(biāo))，以下是幾種常見的實(shí)現(xiàn)方式

03.絕對(duì)定位方式且已知寬高

position: absolute;
top: 50%;
left: 50%;
margin-top: -3em;
margin-left: -7em;
width: 14em;
height: 6em;

04.絕對(duì)定位＋未知寬高＋ translate

position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
//需要補(bǔ)充瀏覽器前綴

05.flex 輕松搞定水平垂直居中(未知寬高)

display: flex;
align-items: center;
justify-content: center;

06.文本末尾添加省略號(hào)

當(dāng)文本的內(nèi)容超出容器的寬度的時(shí)候，我們希望在其默認(rèn)添加省略號(hào)以達(dá)到提示用戶內(nèi)容省略顯示的效果。

07.寬度固定，適合單行顯示...

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

08.寬度不固定，適合多行以及移動(dòng)端顯示

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;

09.制造文本的模糊效果

當(dāng)我們希望給文本制造一種模糊效果感覺(jué)的時(shí)候，可以這樣做

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

10.動(dòng)畫實(shí)現(xiàn)簡(jiǎn)潔 loading 效果

我們來(lái)實(shí)現(xiàn)一個(gè)非常簡(jiǎn)潔的 loading 效果

.loading:after {
display: inline-block;
overflow: hidden;
vertical-align: bottom;
content: "\2026";
  -webkit-animation: ellipsis 2s infinite;
}

// 動(dòng)畫部分
@-webkit-keyframes ellipsis {
  from {
width: 2px;
  }
  to {
width: 15px;
  }
}

11.自定義文本選中樣式

默認(rèn)情況下，我們?cè)诰W(wǎng)頁(yè)上選中文字的時(shí)候，會(huì)給選中的部分一個(gè)深藍(lán)色背景顏色(可以自己拿起鼠標(biāo)試試)，如果我們想自己定制被選中的部分的樣式呢？

// 注意只能修改這兩個(gè)屬性 字體顏色 選中背景顏色

element::selection {
color: green;
background-color: pink;
}
element::-moz-selection {
  color: green;
background-color: pink;
}

12.頂角貼紙效果

有時(shí)候我們會(huì)有這樣的需求，在一個(gè)列表展示頁(yè)面，有一些列表項(xiàng)是新添加的、或者熱度比較高的，就會(huì)要求在其上面添加一個(gè)貼紙效果的小條就像 hexo 默認(rèn)博客的 fork me on github 那個(gè)效果一樣。

接下來(lái)我們開始一步步完成最左邊的這個(gè)效果。

html

<divclass="wrap">
<divclass="ribbon">
<ahref="#">Fork me on GitHub</a>
</div>
</div>

css

/* 外層容器基本設(shè)置  */
.wrap {
width: 160px;
height: 160px;
overflow: hidden;
position: relative;
background-color: #f3f3f3;
}

.ribbon {
background-color: #a00;
overflow: hidden;
white-space: nowrap;
position: absolute;
/* shadom */
-webkit-box-shadow: 0010px#888;
-moz-box-shadow: 0010px#888;
box-shadow: 0010px#888;
/* rotate */
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
/* position */
left: -50px;
top: 40px;
}

.ribbona {
border: 1px solid #faa;
color: #fff;
display: block;
font: bold 81.25%"Helvetica Neue", Helvetica, Arial, sans-serif;
margin: 1px0;
padding: 10px50px;
text-align: center;
text-decoration: none;
/* shadow */
text-shadow: 005px#444;
}

13.input 占位符

當(dāng)我們給部分 input 類型的設(shè)置 placeholder 屬性的時(shí)候，有的時(shí)候需要修改其默認(rèn)的樣式。

input::-webkit-input-placeholder {
color: green;
background-color: #f9f7f7;
font-size: 14px;
}
input::-moz-input-placeholder {
color: green;
background-color: #f9f7f7;
font-size: 14px;
}
input::-ms-input-placeholder {
color: green;
background-color: #f9f7f7;
font-size: 14px;
}

14.移動(dòng)端可點(diǎn)擊元素去處默認(rèn)邊框

在移動(dòng)端瀏覽器上，當(dāng)你點(diǎn)擊一個(gè)鏈接或者通過(guò) Javascript 定義的可點(diǎn)擊元素的時(shí)候，會(huì)出現(xiàn)藍(lán)色邊框，說(shuō)實(shí)話，這是很惡心的，怎么去掉呢?

-webkit-tap-highlight-color: rgba(255,255,255,0);

15.首字下沉

要實(shí)現(xiàn)類似 word 中首字下沉的效果可以使用以下代碼

element:first-letter {
float: left;
color: green;
font-size: 30px;
}

16.小三角

在很多地方我們可以用得上小三角，接下來(lái)我們畫一下四個(gè)方向的三角形

.triangle {
/* 基礎(chǔ)樣式 */
border: solid 10px transparent;
}
/*下*/
.triangle.bottom {
border-top-color: green;
}
/*上*/
.triangle.top {
border-bottom-color: green;
}
/*左*/
.triangle.top {
border-right-color: green;
}
/*右*/
.triangle.top {
border-left-color: green;
}

可以看出畫一個(gè)小三角非常簡(jiǎn)單，只要兩行樣式就可以搞定，對(duì)于方向只要想著畫哪個(gè)方向則設(shè)置反方向的樣式屬性就可以。

17.鼠標(biāo)手型

一般情況下，我們希望在以下元素身上添加鼠標(biāo)手型。

a
submit
input[type="iamge"]
input[type="button"]
button
label
select

a[href],
input[type="submit"],
input[type="image"],
input[type="button"],
label[for],
select,
button {
cursor: pointer;
}

18.屏蔽 Webkit 移動(dòng)瀏覽器中元素高亮效果

在訪問(wèn)移動(dòng)網(wǎng)站時(shí)，你會(huì)發(fā)現(xiàn)，在選中的元素周圍會(huì)出現(xiàn)一些灰色的框框，使用以下代碼屏蔽這種樣式

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

19.移除常用標(biāo)簽的瀏覽器默認(rèn)的 margin 和 padding

pre、code、legend、fieldset、blockquote … 等標(biāo)簽不是很常用，所以就不一一列舉，如果項(xiàng)目中使用到，可以自己?jiǎn)为?dú)寫

body,
p,
h1,
h2,
h3,
h4,
h5,
h6,
dl,
dd,
ul,
ol,
th,
td,
button,
figure,
input,
textarea,
form {
margin: 0;
padding: 0;
}

20.統(tǒng)一 input、select、textarea 寬度

不同瀏覽器的 input、select、textarea 的盒子模型寬度計(jì)算方式不同，統(tǒng)一為最常見的 content-box

input,
select,
textarea {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}

table {
/*table 相鄰單元格的邊框間的距離設(shè)置為 0*/
border-spacing: 0;
/*默認(rèn)情況下給 tr 設(shè)置 border 沒(méi)有效果，如果 table 設(shè)置了邊框?yàn)楹喜⒛Ｊ剑骸竍order-collapse: collapse;」就可以了*/
border-collapse: collapse;
}

21.移除瀏覽器部分元素的默認(rèn)邊框

acronym、fieldset … 等其他標(biāo)簽不是很常用，就不會(huì)一一列舉；如果項(xiàng)目中用到，可以自己?jiǎn)为?dú)寫

img,
input,
button,
textarea {
border: none;
-webkit-appearance: none;
}

input {
/*由于 input 默認(rèn)不繼承父元素的居中樣式，所以設(shè)置：「text-align: inherit」*/
text-align: inherit;
}

textarea {
/*textarea 默認(rèn)不可以放縮*/
resize: none;
}

22.取消元素 outline 樣式

由于以下元素的部分屬性沒(méi)有繼承父節(jié)點(diǎn)樣式，所以聲明這些元素的這些屬性為父元素的屬性

a,
h1,
h2,
h3,
h4,
h5,
h6,
input,
select,
button,
option,
textarea,
optgroup {
font-family: inherit;
font-size: inherit;
font-weight: inherit;
font-style: inherit;
line-height: inherit;
color: inherit;
outline: none;
}

23.取消超鏈接元素的默認(rèn)文字裝飾

另外 del、ins 標(biāo)簽的中劃線、下劃線還是挺好的，就不去掉

a {
text-decoration: none;
}

ol,
ul {
/*開發(fā)中 UI 設(shè)計(jì)的列表都是和原生的樣式差太多，所以直接給取消 ol，ul 默認(rèn)列表樣式*/
list-style: none;
}

button,
input[type="submit"],
input[type="button"] {
/*鼠標(biāo)經(jīng)過(guò)是「小手」形狀表示可點(diǎn)擊*/
cursor: pointer;
}

input::-moz-focus-inner {
/*取消火狐瀏覽器部分版本 input 聚焦時(shí)默認(rèn)的「padding、border」*/
padding: 0;
border: 0;
}

24.取消部分瀏覽器數(shù)字輸入控件的操作按鈕

input[type="number"] {
  -moz-appearance: textfield;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
margin:0;
  -webkit-appearance: none;
}

25.輸入控件 placeholder 色設(shè)置 #999

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
color: #999;
}

input:-moz-placeholder,
textarea:-moz-placeholder {
color: #999;
}

input::-moz-placeholder,
textarea::-moz-placeholder {
color: #999;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
color: #999;
}

template {
/*由于部分瀏覽 template 會(huì)顯示出來(lái)，所以要隱*/
display: none;
}

26.position: fixed 的縮寫

.pf {
position: fixed;
/*chrome 內(nèi)核 瀏覽器 position: fixed 防止抖動(dòng)*/
-webkit-transform: translateZ(0);
}

27.利用絕對(duì)定位寬高拉升原理，中心居中元素

.middle {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}

28.利用相對(duì)定位于 CSS3 使元素垂直居中

.v-middle {
position: relative;
top: 50%;
-webkit-transform: -webkit-translateY(-50%);
-moz-transform: -moz-translateY(-50%);
-o-transform: -o-translateY(-50%);
transform: translateY(-50%);
}

29.元素計(jì)算寬高的盒子模型以 border 為外界限「bb ==> border-box」

.bb {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

30.單行文本溢出顯示省略號(hào)「to ==> text-overflow」

.to {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

31.初始化樣式

不同的瀏覽器對(duì)各個(gè)標(biāo)簽?zāi)J(rèn)的樣式是不一樣的，而且有時(shí)候我們也不想使用瀏覽器給出的默認(rèn)樣式，我們就可以用 reset.css 去掉其默認(rèn)樣式

body,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
p,
blockquote,
dl,
dt,
dd,
ul,
ol,
li,
pre,
form,
fieldset,
legend,
button,
input,
textarea,
th,
td {
margin: 0;
padding: 0;
}
body,
button,
input,
select,
textarea {
font: 12px/1.5 tahoma, arial, \5b8b\4f53;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 100%;
}
address,
cite,
dfn,
em,
var {
font-style: normal;
}
code,
kbd,
pre,
samp {
font-family: couriernew, courier, monospace;
}
small {
font-size: 12px;
}
ul,
ol {
list-style: none;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
sup {
vertical-align: text-top;
}
sub {
vertical-align: text-bottom;
}
legend {
color: #000;
}
fieldset,
img {
border: 0;
}
button,
input,
select,
textarea {
font-size: 100%;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

32.強(qiáng)制換行/自動(dòng)換行/強(qiáng)制不換行

/* 強(qiáng)制不換行 */
div {
white-space: nowrap;
}

/* 自動(dòng)換行 */
div {
word-wrap: break-word;
word-break: normal;
}

/* 強(qiáng)制英文單詞斷行 */
div {
word-break: break-all;
}

33.table 邊界的樣式

table {
border: 1px solid #000;
padding: 0;
border-collapse: collapse;
table-layout: fixed;
margin-top: 10px;
}
tabletd {
height: 30px;
border: 1px solid #000;
background: #fff;
font-size: 15px;
padding: 3px3px3px8px;
color: #000;
width: 160px;
}

34.絕對(duì)定位與 margin

當(dāng)我們提前知道要居中元素的長(zhǎng)度和寬度時(shí)，可以使用這種方式：

.container {
position: relative;
width: 300px;
height: 200px;
border: 1px solid #333333;
}
.content {
background-color: #ccc;
width: 160px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -80px; /* 寬度的一半 */
margin-top: -50px; /* 高度的一半 */
}

35.絕對(duì)定位與 transform

當(dāng)要居中的元素不定寬和定高時(shí)，我們可以使用 transform 來(lái)讓元素進(jìn)行偏移。

.container {
position: relative;
width: 300px;
height: 200px;
border: 1px solid #333333;
}
.content {
background-color: #ccc;
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
text-align: center;
}

36.line-height

line-height其實(shí)是行高，我們可以用行高來(lái)調(diào)整布局！

不過(guò)這個(gè)方案有一個(gè)比較大的缺點(diǎn)是：文案必須是單行的，多行的話，設(shè)置的行高就會(huì)有問(wèn)題。

.container {
width: 300px;
height: 200px;
border: 1px solid #333333;
}
.content {
line-height: 200px;
}

37.table 布局

給容器元素設(shè)置display: table，當(dāng)前元素設(shè)置display: table-cell：

.container {
width: 300px;
height: 200px;
border: 1px solid #333333;
display: table;
}
.content {
display: table-cell;
vertical-align: middle;
text-align: center;
}

38.flex 布局

我們可以給父級(jí)元素設(shè)置為display: flex，利用 flex 中的align-items和justify-content設(shè)置垂直方向和水平方向的居中。這種方式也不限制中間元素的寬度和高度。

同時(shí)，flex 布局也能替換line-height方案在某些 Android 機(jī)型中文字不居中的問(wèn)題。

.container {
width: 300px;
height: 200px;
border: 1px solid #333333;
display: flex;
align-items: center;
justify-content: center;
}
.content {
background-color: #ccc;
text-align: center;
}

39.圖片上下左右居中

一種常用的方式是把外層的 div 設(shè)置為 table-cell；然后讓內(nèi)部的元素上下左右居中。當(dāng)然也還有一種方式，就是把 img 當(dāng)做 div，參考 6 中的代碼進(jìn)行設(shè)置。CSS 代碼如下：

.content {
width: 400px;
height: 400px;
border: 1px solid #ccc;
text-align: center;
display: table-cell;
vertical-align: middle;
}

html 代碼如下：

<divclass="content">
<imgsrc="./4.jpg"alt="img" />
</div>

40.標(biāo)題兩邊的小橫杠

我們經(jīng)常會(huì)遇到這樣的 UI 需求，就是標(biāo)題兩邊有兩個(gè)小橫崗，之前是怎么實(shí)現(xiàn)的呢？比如用個(gè)border-top屬性，然后再把中間的文字進(jìn)行絕對(duì)定位，同時(shí)給這個(gè)文字一個(gè)背景顏色，把中間的這部分蓋住。

現(xiàn)在我們可以使用偽元素來(lái)實(shí)現(xiàn)！

<div class="title">標(biāo)題</div>

title {
color: #e1767c;
font-size: 0.3rem;
position: relative;

  &:before,
  &:after {
content: "";
position: absolute;
display: block;
left: 50%;
top: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
border-top: 0.02rem solid #e1767c;
width: 0.4rem;
  }
  &:before {
margin-left: -1.2rem;
  }
  &:after {
margin-left: 1.2rem;
  }
}

41.用 border 屬性繪制元素

border 除了作為簡(jiǎn)單的繪制邊框以外，還可以繪制三角形，梯形，星形等任意的多邊形，以下為繪制的兩個(gè)三角形和梯形

<divclass="triangle1"></div>
<divclass="triangle2"></div>
<divclass="trapezoid"></div>

.triangle1 {
/*銳角三角形*/
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 100px solid #249ff1;
border-left: 30px solid transparent;
border-right: 100px solid transparent;
}
.triangle2 {
/*直角三角形*/
width: 0;
height: 0;
border-top: 80px solid transparent;
border-bottom: 80px solid #ff5b01;
border-left: 50px solid #ff5b01;
border-right: 50px solid transparent;
}
.trapezoid {
/*梯形*/
width: 0;
height: 0;
border-top: none;
border-right: 80px solid transparent;
border-bottom: 60px solid #13dbed;
border-left: 80px solid #13dbed;
}

42.用 border-radius 繪制元素

border-radius主要用于繪制圓點(diǎn)、圓形、橢圓、圓角矩形等形狀，以下為簡(jiǎn)單繪制的兩個(gè)圖形。

<divclass="circle"></div>
<divclass="ellipse"><div></div></div>

.circle,
.ellipse {
width: 100px;
height: 100px;
background: #249ff1;
border-radius: 50%;
}
.ellipse {
width: 150px;
background: #ff9e01;
}

但border-radius屬性實(shí)際上可以設(shè)置最多 8 個(gè)值，通過(guò)改變 8 個(gè)值可以得到許多意想不到的圖像

43.用 box-shadow 繪制元素

對(duì)于box-shadow，其完整的聲明為box-shadow: h-shadow v-shadow blur spread color inset,各個(gè)值表示的意義分別為：s 水平方向的偏移，垂直方向的便宜，模糊的距離（羽化值），陰影的大小（不設(shè)置或?yàn)?0 時(shí)陰影與主體的大小一致），陰影的顏色和是否使用內(nèi)陰影。實(shí)際應(yīng)用時(shí)可以接收 3-6 個(gè)值，對(duì)應(yīng)分別如下：

3 個(gè)值： h-shadow v-shadow color
4 個(gè)值： h-shadow v-shadow blur color
5 個(gè)值： h-shadow v-shadow blur spread color
6 個(gè)值： h-shadow v-shadow blur spread color inset

同時(shí)，border-shadow接受由多個(gè)以上各種值組成的以逗號(hào)分隔的值，通過(guò)這一特性，我們可以實(shí)現(xiàn)如多重邊框的等效果。以下我們用該屬性來(lái)實(shí)現(xiàn)一個(gè)單標(biāo)簽且不借助偽元素的添加圖標(biāo)和代表目標(biāo)的的圖標(biāo)。

<divclass="plus"></div>
<divclass="target"></div>

.plus {
width: 30px;
height: 30px;
margin-left: 50px; /*由于box-shadow不占空間，常常需要添加margin來(lái)校正位置*/
background: #000;
box-shadow: 0 -30px0 red, 030px0 red, -30px00 red, 30px00 red;
}
.target {
width: 30px;
height: 30px;
background: red;
border-radius: 50%;
margin-left: 50px;
box-shadow: 00010px#fff, 00020px red, 00030px#fff, 00040px red;
}

44.使用 CSS 漸變來(lái)繪制圖標(biāo)

CSS3 的漸變屬性十分強(qiáng)大，理論上通過(guò)漸變可以繪制出任何的圖形，漸變的特性和使用足足可以寫一篇長(zhǎng)文，以下為一個(gè)例子

<div class="gradient"></div>

.gradient {
position: relative;
width: 300px;
height: 300px;
border-radius: 50%;
background-color: silver;
background-image: linear-gradient(335deg, #b00 23px, transparent 23px),
linear-gradient(155deg, #d00 23px, transparent 23px), linear-gradient(
335deg,
      #b00 23px,
      transparent 23px
    ), linear-gradient(155deg, #d00 23px, transparent 23px);
background-size: 58px58px;
background-position: 0px2px, 4px35px, 29px31px, 34px6px;
}

杯子

.cup {
display: inline-block;
width: 0.9em;
height: 0.4em;
border: 0.25em solid;
border-bottom: 1.1em solid;
border-radius: 000.25em0.25em;
}
cup:before {
position: absolute;
right: -0.6em;
top: 0;
width: 0.3em;
height: 0.8em;
border: 0.25em solid;
border-left: none;
border-radius: 00.25em0.25em0;
content: "";
}

心形

.heart {
display: inline-block;
margin-top: 1.5em;
width: 50px;
height: 50px;
background: green;
}
.heart:before,
.heart:after {
position: absolute;
width: 1em;
height: 1.6em;
background: #000;
border-radius: 50%50%00;
content: "";
bottom: 0;
}
.heart:before {
-webkit-transform: rotate(45deg);
-webkit-transform-origin: 100%100%;
right: 0;
background: red;
opacity: 0.5;
z-index: 5;
}
.:after {
-webkit-transform: rotate(-45deg);
-webkit-transform-origin: 0100%;
left: 0;
opacity: 0.8;
}

相機(jī)

.camera {
display: inline-block;
border-style: solid;
border-width: 0.65em0.9em;
border-radius: 0.1em;
}
.camera:before {
position: absolute;
top: -0.3em;
left: -0.3em;
width: 0.4em;
height: 0.4em;
border-radius: 50%;
border: 0.1em solid #fff;
box-shadow: 0000.08em, 0000.16em#fff;
content: "";
}
.camera:after {
position: absolute;
top: -0.5em;
left: 0.5em;
width: 0.2em;
border-top: 0.125em solid #fff;
content: "";
}

月亮

.moon {
display: inline-block;
height: 1.5em;
width: 1.5em;
box-shadow: inset -0.4em00;
border-radius: 2em;
transform: rotate(20deg);
}

45.浮動(dòng)類

常規(guī)浮動(dòng) list 浮動(dòng) image 浮動(dòng)

.float-left {
float: left;
}
.float-right {
float: right;
}
.float-lili,/*定義到li父元素或祖先元素上*/li.float-li {
float: left;
}
.float-imgimg,/*定義到img父元素或祖先元素上*/img.float-li {
float: left;
}
.float-spanspan,/*定義到span父元素或祖先元素上*/span.float-span {
float: right;
}

46.背景圖片嵌入與定位

.bg-img {
background-image: url("../img/bg.png");
background-position: center top;
background-repeat: no-repeat;
}
.bg01-img {
background-image: url("../img/bg01.png");
background-position: center top;
background-repeat: no-repeat;
}
.bg02-img {
background-image: url("../img/bg02.png");
background-position: center top;
background-repeat: no-repeat;
}
.bg03-img {
background-image: url("../img/bg03.png");
background-position: center top;
background-repeat: no-repeat;
}
.bg04-img {
background-image: url("../img/bg04.png");
background-position: center top;
background-repeat: no-repeat;
}

47.繼承類

.inherit-width {
width: inherit;
}
.inherit-min-width {
min-width: inherit;
}
.inherit-height {
height: inherit;
}
.inherit-min-height {
min-height: inherit;
}
.inherit-color {
color: inherit;
}

48.文本縮進(jìn)

.text-indent {
text-indent: 2rem;
}
/*16px*/
.text-indent-xs {
text-indent: 1.5rem;
}
/*12px*/
.text-indent-sm {
text-indent: 1.7rem;
}
/*14px*/
.text-indent-md {
text-indent: 2rem;
}
/*18px*/
.text-indent-lg {
text-indent: 2.4rem;
}
/*20px*/

49.行高

.line-height-xs {
line-height: 1.3rem;
}
.line-height-sm {
line-height: 1.5rem;
}
.line-height-md {
line-height: 1.7rem;
}
.line-height-lg {
line-height: 2rem;
}

.line-height-25x {
line-height: 25px;
}
.line-height-30x {
line-height: 30px;
}

50.ul 縮進(jìn)

.ul-indent-xs {
margin-left: 0.5rem;
}
.ul-indent-sm {
margin-left: 1rem;
}
.ul-indent-md {
margin-left: 1.5rem;
}
.ul-indent-lg {
margin-left: 2rem;
}
.ol-list,
.ul-list {
list-style: disc;
}

51.文本截?cái)?/h3>

.truncate {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.hide {
display: none;
}

52.圖片、視頻規(guī)范

.img-max,
.video-max {
width: 100%;
height: auto;
}
/*display顯示方式*/
.inline {
display: inline;
}
.inline-block {
display: inline-block;
}
.block {
display: block;
}

53.邊框樣式

.border-xs-black {
border: 1px solid #000;
}
.border-sm-black {
border: 2px solid #000;
}
.border-md-black {
border: 3px solid #000;
}
.border-lg-black {
border: 5px solid #000;
}

.border-xs-gray {
border: 1px solid #9c9c9c;
}
.border-sm-gray {
border: 2px solid #9c9c9c;
}
.border-md-gray {
border: 3px solid #9c9c9c;
}
.border-lg-gray {
border: 5px solid #9c9c9c;
}

54.背景顏色

.bg-white {
background: #fff!important;
}
.bg-black {
background: #1b1c1d!important;
}
.bg-gray {
background: #767676!important;
}
.bg-light-gray {
background: #f8f7f7!important;
}
.bg-yellow {
background: #fbbd08!important;
}
.bg-orange {
background: #f2711c!important;
}
.bg-red {
background: #db2828!important;
}
.bg-olive {
background: #b5cc18!important;
}
.bg-green {
background: #21ba45!important;
}
.bg-teal {
background: #00b5ad!important;
}
.bg-darkGreen {
background: #19a97b!important;
}
.bg-threeGreen {
background: #097c25!important;
}
.bg-blue {
background: #2185d0!important;
}
.bg-violet {
background: #6435c9!important;
}
.bg-purple {
background: #a333c8!important;
}
.bg-brown {
background: #a5673f!important;
}

55.分割線預(yù)設(shè)

hr,
.hr-xs-Silver,
.hr-sm-black,
.hr-sm-Silver,
.hr-xs-gray,
.hr-sm-gray {
margin: 20px0;
}
hr {
border: none;
border-top: 1px solid #000;
}
.hr-xs-Silver {
border: none;
border-top: 1px solid #c0c0c0;
}
.hr-sm-black {
border: none;
border-top: 2px solid #000;
}
.hr-sm-Silver {
border: none;
border-top: 2px solid #c0c0c0;
}
.hr-xs-gray {
border: none;
border-top: 1px solid #767676;
}
.hr-sm-gray {
border: none;
border-top: 2px solid #767676;
}

56.鼠標(biāo) a 標(biāo)簽 hover 效果

.hover-reda:hover,/*為a標(biāo)簽祖先元素添加類名 默認(rèn)無(wú)智能提醒*/a.hover-red:hover {
color: red;
} /*單獨(dú)為a標(biāo)簽添加類名*/
.hover-yellowa:hover,/*為a標(biāo)簽祖先元素添加類名 默認(rèn)無(wú)智能提醒*/a.hover-yellow:hover {
color: #ffd700;
} /*單獨(dú)為a標(biāo)簽添加類名*/
.hover-greena:hover,/*為a標(biāo)簽祖先元素添加類名 默認(rèn)無(wú)智能提醒*/a.hover-green:hover {
color: #70aa39;
} /*單獨(dú)為a標(biāo)簽添加類名*/
.hover-bluea:hover,/*為a標(biāo)簽祖先元素添加類名 默認(rèn)無(wú)智能提醒*/a.hover-blue:hover {
color: blue;
} /*單獨(dú)為a標(biāo)簽添加類名*/
.hover-graya:hover,/*為a標(biāo)簽祖先元素添加類名 默認(rèn)無(wú)智能提醒*/a.hover-gray:hover {
color: #9c9c9c;
} /*單獨(dú)為a標(biāo)簽添加類名*/
.underlinea:hover,
a.underline:hover {
text-decoration: underline;
}

57.陰影效果

.shadow-text-xs {
text-shadow: 4px3px0#1d9d74, 9px8px0rgba(0, 0, 0, 0.15);
} /*智能兼容ie10以上 暫不考慮*/

.shadow-xs {
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=100, Color='#cccccc')"; /* For IE 8 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=100, Color='#cccccc'); /* For IE 5.5 - 7 */
-moz-box-shadow: 1px1px2px#cccccc; /* for firefox */
-webkit-box-shadow: 1px1px2px#cccccc; /* for safari or chrome */
box-shadow: 1px1px2px#cccccc; /* for opera or ie9 */
}
.shadow-sm {
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=120, Color='#cccccc')"; /* For IE 8 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=120, Color='#cccccc'); /* For IE 5.5 - 7 */
-moz-box-shadow: 2px2px3px#cccccc; /* for firefox */
-webkit-box-shadow: 2px2px3px#cccccc; /* for safari or chrome */
box-shadow: 2px2px3px#cccccc; /* for opera or ie9 */
}
.shadow-md {
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#cccccc')"; /* For IE 8 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#cccccc'); /* For IE 5.5 - 7 */
-moz-box-shadow: 3px3px5px#cccccc; /* for firefox */
-webkit-box-shadow: 3px3px5px#cccccc; /* for safari or chrome */
box-shadow: 3px3px5px#cccccc; /* for opera or ie9 */
}
.shadow-lg {
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=150, Color='#cccccc')"; /* For IE 8 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=150, Color='#cccccc'); /* For IE 5.5 - 7 */
-moz-box-shadow: 5px5px8px#cccccc; /* for firefox */
-webkit-box-shadow: 5px5px8px#cccccc; /* for safari or chrome */
box-shadow: 5px5px8px#cccccc; /* for opera or ie9 */
}

58.圓角

.border-radius-xs {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.border-radius-sm {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.border-radius-md {
-webkit-border-radius: 7px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.border-radius-lg {
-webkit-border-radius: 9px;
-moz-border-radius: 9px;
border-radius: 9px;
}

CSS 的魅力就在于它的靈活與簡(jiǎn)潔，而高效的秘訣則在于積累與復(fù)用。掌握這 55 個(gè)高頻 CSS 片段，你會(huì)發(fā)現(xiàn)很多原本需要反復(fù)查資料、調(diào)試半天的需求，其實(shí)只需幾行代碼就能解決。

把它們作為你的“工具箱”，在未來(lái)的開發(fā)中隨時(shí)取用，你的 CSS 代碼將更加優(yōu)雅，開發(fā)效率也會(huì)顯著提升。記得收藏、練習(xí)并靈活應(yīng)用，相信它們會(huì)在你日常開發(fā)中不斷創(chuàng)造驚喜。

責(zé)任編輯：龐桂玉來(lái)源： web前端開發(fā)