當(dāng)前位置：首頁 > 编程资源 > 综合教程 >内容正文

综合教程

提高CSS 开发效率的常用代码片段

發(fā)布時間：2023/11/21 综合教程 30 生活家

生活随笔收集整理的這篇文章主要介紹了提高CSS 开发效率的常用代码片段小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

這篇文章會記錄我們平時常用到的 CSS 片段，使用這些 CSS 可以幫助我們解決許多實際項目問題中遇到的，歡迎收藏轉(zhuǎn)載：

清除浮動

浮動給我們的代碼帶來的麻煩，想必不需要多說，我們會用很多方式來避免這種麻煩，其中我覺得最方便也是兼容性最好的一種是，在同級目錄下再創(chuàng)建一個<div></div>；不過這樣會增加很多無用的代碼。此時我們用:after這個偽元素來解決浮動的問題，如果當(dāng)前層級有浮動元素，那么在其父級添加上 clearfix 類即可。

// 清除浮動
.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;
}

垂直水平居中

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

絕對定位方式且已知寬高

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

絕對定位＋未知寬高＋ translate

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

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

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

文本末尾添加省略號

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

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

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

寬度不固定，適合多行以及移動端顯示

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

制造文本的模糊效果

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

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

動畫實現(xiàn)簡潔 loading 效果

我們來實現(xiàn)一個非常簡潔的 loading 效果

<style>
body{
  background: #56b4ab;
}
.loader,
.loader:before,
.loader:after {
  background: #FFF;
  /*
  * load1：執(zhí)行的動畫名
  * 1s：執(zhí)行一秒
  * infinite：執(zhí)行無限次
  * ease-in-out：動畫以低速開始和結(jié)束
  */
  animation: load1 1s infinite ease-in-out;
  width: 1em;
  height: 4em;
}
.loader:before,
.loader:after {
  position: absolute;
  top: 0;
  content: '';
}
.loader:before {
  left: -1.5em;
}
.loader {
  text-indent: -9999em;
  margin: 40% auto;
  position: relative;
  font-size: 11px;
  /* 延時0.16s */
  animation-delay: 0.16s;
}
.loader:after {
  left: 1.5em;
  /* 延時0.32s */
  animation-delay: 0.32s;
}
@keyframes load1 {
  0%,
  80%,
  100% {
    box-shadow: 0 0 #FFF;
    height: 4em;
  }
  40% {
	/* 實現(xiàn)上部拉伸 */
    box-shadow: 0 -2em #ffffff;
	/* 實現(xiàn)下部拉伸 */
    height: 5em;
  }
}
</style>
 
<div class="loader">加載中...</div>

更多l(xiāng)oading效果請查看下面文章

https://www.fengjunzi.com/blog-52120.html

自定義文本選中樣式

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>改變背景的顏色</title>
    <style type="text/css">
        p::selection { background:#ff9632; color: #000;color:#fff; } 
        p::-moz-selection { background:#ff9632;color: #000; color:#fff;} /*火狐瀏覽器*/
        p::-webkit-selection { background:#ff9632; color: #000; color:#fff;} /*谷歌*/
    </style>
</head>
<body>
    <p>選中的顏色</p>
    <div>選中的顏色</div>
    <p>選中的顏色</p>
    <p>選中的顏色</p>
    <p>選中的顏色</p>
</body>
</html>

頂角貼紙效果

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

接下來我們開始一步步完成最左邊的這個效果

html

<div class="wrap">
  <div class="ribbon">
    <a href="#">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: 0 0 10px #888;
  -moz-box-shadow: 0 0 10px #888;
  box-shadow: 0 0 10px #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;
}

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

input 占位符

當(dāng)我們給部分 input 類型的設(shè)置 placeholder 屬性的時候，有的時候需要修改其默認(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;
}

移動端可點擊元素去處默認(rèn)邊框

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

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

首字下沉

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

<style>
p:first-letter {
  float: left;
  color: green;
  font-size: 30px;
}
</style>
<p>選中的顏色</p>
<p>選中的顏色</p>
<p>選中的顏色</p>

小三角

在很多地方我們可以用得上小三角，接下來我們畫一下向下的三角形

/**向下的三角**/
.sanjiao_down{
    width:0;
    height:0;
    overflow:hidden;
    font-size: 0;     /*是因為, 雖然寬高度為0, 但在IE6下會具有默認(rèn)的 */
    line-height: 0;  /* 字體大小和行高, 導(dǎo)致盒子呈現(xiàn)被撐開的長矩形 */
    border-width:10px;
    border-style:solid dashed dashed dashed;/*IE6下, 設(shè)置余下三條邊的border-style為dashed,即可達(dá)到透明的效果*/
    border-color:#f30 transparent transparent transparent;
}

鼠標(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;
}

屏蔽 Webkit 移動瀏覽器中元素高亮效果

在訪問移動網(wǎng)站時，你會發(fā)現(xiàn)，在選中的元素周圍會出現(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;

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

pre、code、legend、fieldset、blockquote … 等標(biāo)簽不是很常用，所以就不一一列舉，如果項目中使用到，可以自己單獨寫

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

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

不同瀏覽器的 input、select、textarea 的盒子模型寬度計算方式不同，統(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 沒有效果，如果 table 設(shè)置了邊框為合并模式：「border-collapse: collapse;」就可以了*/
  border-collapse: collapse;
}

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

acronym、fieldset … 等其他標(biāo)簽不是很常用，就不會一一列舉；如果項目中用到，可以自己單獨寫

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;
}

取消元素?`outline`?樣式

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

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;
}

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

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

a {
  text-decoration: none;
}

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

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

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

取消部分瀏覽器數(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;
}

輸入控件 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 會顯示出來，所以要隱*/
  display: none;
}

position: fixed 的縮寫

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

利用絕對定位寬高拉升原理，中心居中元素

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

利用相對定位于 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%);
}

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

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

單行文本溢出顯示省略號「to ==> text-overflow」

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

初始化樣式

不同的瀏覽器對各個標(biāo)簽?zāi)J(rèn)的樣式是不一樣的，而且有時候我們也不想使用瀏覽器給出的默認(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;
}

強制換行/自動換行/強制不換行

/* 強制不換行 */
div {
  white-space: nowrap;
}

/* 自動換行 */
div {
  word-wrap: break-word;
  word-break: normal;
}

/* 強制英文單詞斷行 */
div {
  word-break: break-all;
}

table 邊界的樣式

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

絕對定位與 margin

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

.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; /* 高度的一半 */
}

絕對定位與 transform

當(dāng)要居中的元素不定寬和定高時，我們可以使用 transform 來讓元素進(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;
}

line-height

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

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

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

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;
}

flex 布局

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

同時，flex 布局也能替換line-height方案在某些 Android 機型中文字不居中的問題。

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

圖片上下左右居中

一種常用的方式是把外層的 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 代碼如下：

<div class="content">
  <img src="./4.jpg" alt="img" />
</div>

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

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

現(xiàn)在我們可以使用偽元素來實現(xiàn)！

https://www.fengjunzi.com/blog-52106.html

用 border 屬性繪制元素

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

<div class="triangle1"></div>
<div class="triangle2"></div>
<div class="trapezoid"></div>
<style>
.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;
}
</style>

用 border-radius 繪制元素

border-radius主要用于繪制圓點、圓形、橢圓、圓角矩形等形狀，以下為簡單繪制的兩個圖形。

<div class="circle"></div>
<div class="ellipse"><div></div></div>
<style>
.circle,
.ellipse {
  width: 100px;
  height: 100px;
  background: #249ff1;
  border-radius: 50%;
}
.ellipse {
  width: 150px;
  background: #ff9e01;
}
</style>

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

用 box-shadow 繪制元素

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

3 個值： h-shadow v-shadow color
4 個值： h-shadow v-shadow blur color
5 個值： h-shadow v-shadow blur spread color
6 個值： h-shadow v-shadow blur spread color inset

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

<div class="plus"></div>
<div class="target"></div>
<style>
.plus {
  width: 30px;
  height: 30px;
  margin-left: 50px; /*由于box-shadow不占空間，常常需要添加margin來校正位置*/
  background: #000;
  box-shadow: 0 -30px 0 red, 0 30px 0 red, -30px 0 0 red, 30px 0 0 red;
}
.target {
  width: 30px;
  height: 30px;
  background: red;
  border-radius: 50%;
  margin-left: 50px;
  box-shadow: 0 0 0 10px #fff, 0 0 0 20px red, 0 0 0 30px #fff, 0 0 0 40px red;
}
</style>

使用 CSS 漸變來繪制圖標(biāo)

CSS3 的漸變屬性十分強大，理論上通過漸變可以繪制出任何的圖形，漸變的特性和使用足足可以寫一篇長文，以下為一個例子

<div class="gradient"></div>
<style>
.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: 58px 58px;
  background-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px;
}
</style>

月亮

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

浮動類

常規(guī)浮動 list 浮動 image 浮動

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

繼承類

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

文本縮進(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*/

行高

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

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;
}

文本截斷

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

圖片、視頻規(guī)范

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

背景顏色

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

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

hr,
.hr-xs-Silver,
.hr-sm-black,
.hr-sm-Silver,
.hr-xs-gray,
.hr-sm-gray {
  margin: 20px 0;
}
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;
}

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

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

陰影效果

.shadow-text-xs {
  text-shadow: 4px 3px 0 #1d9d74, 9px 8px 0 rgba(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: 1px 1px 2px #cccccc; /* for firefox */
  -webkit-box-shadow: 1px 1px 2px #cccccc; /* for safari or chrome */
  box-shadow: 1px 1px 2px #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: 2px 2px 3px #cccccc; /* for firefox */
  -webkit-box-shadow: 2px 2px 3px #cccccc; /* for safari or chrome */
  box-shadow: 2px 2px 3px #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: 3px 3px 5px #cccccc; /* for firefox */
  -webkit-box-shadow: 3px 3px 5px #cccccc; /* for safari or chrome */
  box-shadow: 3px 3px 5px #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: 5px 5px 8px #cccccc; /* for firefox */
  -webkit-box-shadow: 5px 5px 8px #cccccc; /* for safari or chrome */
  box-shadow: 5px 5px 8px #cccccc; /* for opera or ie9 */
}

圓角

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

總結(jié)

以上是生活随笔為你收集整理的提高CSS 开发效率的常用代码片段的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇：纯CSS3实现各种loading效果
下一篇：人造肉企业Impossible Food