【CSS】CSS常用技巧

愛陽光的小菇涼發表於2018-11-21

概述

相信大家在寫css屬性的時候，會遇到一些問題，比如說：垂直對齊，垂直居中，背景漸變動畫，表格寬度自適應，模糊文字，樣式重置，清除浮動，通用媒體查詢，自定義選擇文字，強制出現滾動條，固定頭部和頁尾，自己在網上看到的一篇關於css的文章，感覺這裡邊一些常用的css程式碼片段對大家很有幫助，所以我就把這篇文章分享給大家，希望大家能夠喜歡。

1、垂直對齊

如果你用CSS，則你會有困惑：我該怎麼垂直對齊容器中的元素？現在，利用CSS3的Transform，可以很優雅的解決這個困惑：

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

使用這個技巧，從單行文字、段落到box，都會垂直對齊。目前瀏覽器對Transform的支援是需要關注的，

Chrome 4, Opera 10, Safari 3, Firefox 3, and Internet Explorer 9均支援該屬性

2、伸展一個元素到視窗高度

在具體場景中，你可能想要將一個元素伸展到視窗高度，基本元素的調整隻能調整容器的大小,因此要使一個元素伸展到視窗高度，
我們需要伸展頂層元素：html和body:

html, 
body {
    height: 100%;
}

然後將100%應用到任何元素的高

div {
    height: 100%;
}

3、基於檔案格式使用不同的樣式

為了更容易知道連結的目標，有時你想讓一些連結看起來和其它的不同。下面的片段在文字連結前新增一個圖示，對不同的資源使用不同的圖示或圖片：

a[href^="http://"]{
    padding-right: 20px;
    background: url(external.gif) no-repeat center right;
}
/* emails */
a[href^="mailto:"]{
    padding-right: 20px;
    background: url(email.png) no-repeat center right;
}

/* pdfs */
a[href$=".pdf"]{
    padding-right: 20px;
    background: url(pdf.png) no-repeat center right;
}

4、背景漸變動畫

CSS中最具誘惑的一個功能是能新增動畫效果，除了漸變，你可以給背景色、透明度、元素大小新增動畫。目前，你不能為漸變新增動畫，但下面的程式碼可能有幫助。它通過改變背景位置，讓它看起來有動畫效果。

button {
    background-image: linear-gradient(#5187c4, #1c2f45);
    background-size: auto 200%;
    background-position: 0 100%;
    transition: background-position 0.5s;
}    
button:hover {
    background-position: 0 0;
}

5、CSS：表格列寬自適用

對於表格，當談到調整列寬時，是比較痛苦的。然後，這裡有一個可以使用的技巧：給td元素新增white-space: nowrap;能讓文字正確的換行

td {
    white-space: nowrap;
}

6、只在一邊或兩邊顯示盒子陰影

如果你要一個盒陰影，試試這個技巧，能為任一邊新增陰影。為了實現這個，首先定義一個有具體寬高的盒子，然後正確定位:after偽類。實現底邊陰影的程式碼如下

.box-shadow {
    background-color: #FF8020;
    width: 160px;
    height: 90px;
    margin-top: -45px;
    margin-left: -80px;
    position: absolute;
    top: 50%;
    left: 50%;
}
.box-shadow:after {
    content: "";
    width: 150px;
    height: 1px;
    margin-top: 88px;
    margin-left: -75px;
    display: block;
    position: absolute;
    left: 50%;
    z-index: -1;
    -webkit-box-shadow: 0px 0px 8px 2px #000000;
       -moz-box-shadow: 0px 0px 8px 2px #000000;
            box-shadow: 0px 0px 8px 2px #000000;
}

7、包裹長文字

如果你碰到一個比自身容器長的文字，這個技巧對你很有用。在這個示例中，預設時，不管容器的寬度，文字都將水平填充。

簡單的CSS程式碼就能在容器中調整文字：

pre {
    white-space: pre-line;
    word-wrap: break-word;
}

效果看起來如下：

8、製造模糊文字

想要讓文字模糊？可以使用color透明和text-shadow實現

.blurry-text {
   color: transparent;
   text-shadow: 0 0 5px rgba(0,0,0,0.5);
}

9、用CSS動畫實現省略號動畫

這個片段將幫助你製造一個ellipsis的動畫，對於簡單的載入狀態是很有用的，而不用去使用gif影像。

.loading:after {
    overflow: hidden;
    display: inline-block;
    vertical-align: bottom;
    animation: ellipsis 2s infinite;
    content: "2026"; /* ascii code for the ellipsis character */
}
@keyframes ellipsis {
    from {
        width: 2px;
    }
    to {
        width: 15px;
    }
}

10、樣式重置

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  outline: none;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html { height: 101%; }
body { font-size: 62.5%; line-height: 1; font-family: Arial, Tahoma, sans-serif; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ``; content: none; }
strong { font-weight: bold; } 
table { border-collapse: collapse; border-spacing: 0; }
img { border: 0; max-width: 100%; }
p { font-size: 1.2em; line-height: 1.0em; color: #333; }

11、典型的CSS清除浮動

.clearfix:after {
 content: "."; 
 display: block;
 clear: both;
 visibility: hidden;
 line-height: 0;
 height: 0; 
}
.clearfix { display: inline-block; }
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }

12、新版清除浮動（2011）

.clearfix:before, .container:after { content: ""; display: table; }
.clearfix:after { clear: both; }
/* IE 6/7 */
.clearfix { zoom: 1; }

13、跨瀏覽器的透明

.transparent {
    filter: alpha(opacity=50); /* internet explorer */
    -khtml-opacity: 0.5;      /* khtml, old safari */
    -moz-opacity: 0.5;       /* mozilla, netscape */
    opacity: 0.5;           /* fx, safari, opera */
}

14、通用媒體查詢

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) and (max-device-width : 480px) {
  /* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
  /* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
  /* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
  /* Styles */
}
/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
  /* Styles */
}
/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
  /* Styles */
}
/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) {
  /* Styles */
}
/* Large screens ----------- */
@media only screen and (min-width : 1824px) {
  /* Styles */
}
/* iPhone 4 ----------- */
@media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-device-pixel-ratio:1.5) {
  /* Styles */
}

15、自定義文字選擇

::selection { background: #e2eae2; }
::-moz-selection { background: #e2eae2; }
::-webkit-selection { background: #e2eae2; }

16、為logo隱藏H1

h1 {
    text-indent: -9999px;
    margin: 0 auto;
    width: 320px;
    height: 85px;
    background: transparent url("images/logo.png") no-repeat scroll;
}

17、錨連結偽類

a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: red; }
a:active { color: yellow; }

18、CSS3：全屏背景

html { 
    background: url(`images/bg.jpg`) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

19、內容垂直居中

.container {
    min-height: 6.5em;
    display: table-cell;
    vertical-align: middle;
}

20、強制出現垂直滾動條

html { height: 101% }

21、CSS3漸變模板

#colorbox {
    background: #629721;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#83b842), to(#629721));
    background-image: -webkit-linear-gradient(top, #83b842, #629721);
    background-image: -moz-linear-gradient(top, #83b842, #629721);
    background-image: -ms-linear-gradient(top, #83b842, #629721);
    background-image: -o-linear-gradient(top, #83b842, #629721);
    background-image: linear-gradient(top, #83b842, #629721);
}

22、CSS3 斑馬線

tbody tr:nth-child(odd) {
    background-color: #ccc;
}

23、內部CSS3 盒陰影

#mydiv { 
    -moz-box-shadow: inset 2px 0 4px #000;
    -webkit-box-shadow: inset 2px 0 4px #000;
    box-shadow: inset 2px 0 4px #000;
}

24、外部CSS3 盒陰影

#mydiv { 
    -webkit-box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);
    -moz-box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);
    box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);
}

25、三角形列表專案符號

ul {
    margin: 0.75em 0;
    padding: 0 1em;
    list-style: none;
}
li:before { 
    content: "";
    border-color: transparent #111;
    border-style: solid;
    border-width: 0.35em 0 0.35em 0.45em;
    display: block;
    height: 0;
    width: 0;
    left: -1em;
    top: 0.9em;
    position: relative;
}

26、固定寬度的居中佈局

#page-wrap {
    width: 800px;
    margin: 0 auto;
}

27、CSS3 列文字

#columns-3 {
    text-align: justify;
    -moz-column-count: 3;
    -moz-column-gap: 12px;
    -moz-column-rule: 1px solid #c4c8cc;
    -webkit-column-count: 3;
    -webkit-column-gap: 12px;
    -webkit-column-rule: 1px solid #c4c8cc;
}

28、CSS固定頁尾

#footer {
    position: fixed;
    left: 0px;
    bottom: 0px;
    height: 30px;
    width: 100%;
    background: #444;
}
/* IE 6 */
* html #footer {
    position: absolute;
    top: expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+`px`);
}

29、跨瀏覽器設定最小高度

#container {
    min-height: 550px;
    height: auto !important;
    height: 550px;
}

30、CSS3 鮮豔的輸入

input[type=text], textarea {
    -webkit-transition: all 0.30s ease-in-out;
    -moz-transition: all 0.30s ease-in-out;
    -ms-transition: all 0.30s ease-in-out;
    -o-transition: all 0.30s ease-in-out;
    outline: none;
    padding: 3px 0px 3px 3px;
    margin: 5px 1px 3px 0px;
    border: 1px solid #ddd;
}
input[type=text]:focus, textarea:focus {
    box-shadow: 0 0 5px rgba(81, 203, 238, 1);
    padding: 3px 0px 3px 3px;
    margin: 5px 1px 3px 0px;
    border: 1px solid rgba(81, 203, 238, 1);
}

31、基於檔案型別的連結樣式

/* external links */
a[href^="http://"] {
    padding-right: 13px;
    background: url(`external.gif`) no-repeat center right;
}
/* emails */
a[href^="mailto:"] {
    padding-right: 20px;
    background: url(`email.png`) no-repeat center right;
}
/* pdfs */
a[href$=".pdf"] {
    padding-right: 18px;
    background: url(`acrobat.png`) no-repeat center right;
}

32、強制換行

pre {
    white-space: pre-wrap;       /* css-3 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

33、在可點選的專案上強制手型

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

34、CSS3對話氣泡

.chat-bubble {
    background-color: #ededed;
    border: 2px solid #666;
    font-size: 35px;
    line-height: 1.3em;
    margin: 10px auto;
    padding: 10px;
    position: relative;
    text-align: center;
    width: 300px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-box-shadow: 0 0 5px #888;
    -webkit-box-shadow: 0 0 5px #888;
    font-family: `Bangers`, arial, serif; 
}
.chat-bubble-arrow-border {
    border-color: #666 transparent transparent transparent;
    border-style: solid;
    border-width: 20px;
    height: 0;
    width: 0;
    position: absolute;
    bottom: -42px;
    left: 30px;
}
.chat-bubble-arrow {
    border-color: #ededed transparent transparent transparent;
    border-style: solid;
    border-width: 20px;
    height: 0;
    width: 0;
    position: absolute;
    bottom: -39px;
    left: 30px;
}

35、H1-H5預設樣式

h1,h2,h3,h4,h5{
    color: #005a9c;
}
h1{
    font-size: 2.6em;
    line-height: 2.45em;
}
h2{
    font-size: 2.1em;
    line-height: 1.9em;
}
h3{
    font-size: 1.8em;
    line-height: 1.65em;
}
h4{
    font-size: 1.65em;
    line-height: 1.4em;
}
h5{
    font-size: 1.4em;
    line-height: 1.25em;
}

36、CSS懸浮提示文字

a { 
    border-bottom:1px solid #bbb;
    color:#666;
    display:inline-block;
    position:relative;
    text-decoration:none;
}
a:hover,
a:focus {
    color:#36c;
}
a:active {
    top:1px; 
}
/* Tooltip styling */
a[data-tooltip]:after {
    border-top: 8px solid #222;
    border-top: 8px solid hsla(0,0%,0%,.85);
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    content: "";
    display: none;
    height: 0;
    width: 0;
    left: 25%;
    position: absolute;
}
a[data-tooltip]:before {
    background: #222;
    background: hsla(0,0%,0%,.85);
    color: #f6f6f6;
    content: attr(data-tooltip);
    display: none;
    font-family: sans-serif;
    font-size: 14px;
    height: 32px;
    left: 0;
    line-height: 32px;
    padding: 0 15px;
    position: absolute;
    text-shadow: 0 1px 1px hsla(0,0%,0%,1);
    white-space: nowrap;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
}
a[data-tooltip]:hover:after {
    display: block;
    top: -9px;
}
a[data-tooltip]:hover:before {
    display: block;
    top: -41px;
}
a[data-tooltip]:active:after {
    top: -10px;
}
a[data-tooltip]:active:before {
    top: -42px;
}

37、深灰色的圓形按鈕

.graybtn {
    -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
    -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
    box-shadow:inset 0px 1px 0px 0px #ffffff;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #d1d1d1) );
    background:-moz-linear-gradient( center top, #ffffff 5%, #d1d1d1 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=`#ffffff`, endColorstr=`#d1d1d1`);
    background-color:#ffffff;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    border:1px solid #dcdcdc;
    display:inline-block;
    color:#777777;
    font-family:arial;
    font-size:15px;
    font-weight:bold;
    padding:6px 24px;
    text-decoration:none;
    text-shadow:1px 1px 0px #ffffff;
}
.graybtn:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #d1d1d1), color-stop(1, #ffffff) );
    background:-moz-linear-gradient( center top, #d1d1d1 5%, #ffffff 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=`#d1d1d1`, endColorstr=`#ffffff`);
    background-color:#d1d1d1;
}
.graybtn:active {
    position:relative;
    top:1px;
}

38、在可列印的網頁中顯示URLs

@media print   {  
  a:after {  
    content: " [" attr(href) "] ";  
  }  
}

39、CSS3 圓點圖案

body {
    background: radial-gradient(circle, white 10%, transparent 10%),
    radial-gradient(circle, white 10%, black 10%) 50px 50px;
    background-size: 100px 100px;
}

40、CSS font屬性縮寫

p {
  font: italic small-caps bold 1.2em/1.0em Arial, Tahoma, Helvetica;
}

41、論文頁面的捲曲效果

ul.box {
    position: relative;
    z-index: 1; /* prevent shadows falling behind containers with backgrounds */
    overflow: hidden;
    list-style: none;
    margin: 0;
    padding: 0; 
}
ul.box li {
    position: relative;
    float: left;
    width: 250px;
    height: 150px;
    padding: 0;
    border: 1px solid #efefef;
    margin: 0 30px 30px 0;
    background: #fff;
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; 
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; 
}
ul.box li:before,
ul.box li:after {
    content: ``;
    z-index: -1;
    position: absolute;
    left: 10px;
    bottom: 10px;
    width: 70%;
    max-width: 300px; /* avoid rotation causing ugly appearance at large container widths */
    max-height: 100px;
    height: 55%;
    -webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    -webkit-transform: skew(-15deg) rotate(-6deg);
    -moz-transform: skew(-15deg) rotate(-6deg);
    -ms-transform: skew(-15deg) rotate(-6deg);
    -o-transform: skew(-15deg) rotate(-6deg);
    transform: skew(-15deg) rotate(-6deg); 
}
ul.box li:after {
    left: auto;
    right: 10px;
    -webkit-transform: skew(15deg) rotate(6deg);
    -moz-transform: skew(15deg) rotate(6deg);
    -ms-transform: skew(15deg) rotate(6deg);
    -o-transform: skew(15deg) rotate(6deg);
    transform: skew(15deg) rotate(6deg); 
}

42、鮮豔的錨連結

a {
    color: #00e;
}
a:visited {
    color: #551a8b;
}
a:hover {
    color: #06e;
}
a:focus {
    outline: thin dotted;
}
a:hover, a:active {
    outline: 0;
}
a, a:visited, a:active {
    text-decoration: none;
    color: #fff;
    -webkit-transition: all .3s ease-in-out;
}
a:hover, .glow {
    color: #ff0;
    text-shadow: 0 0 10px #ff0;
}

43、禁用移動Webkit的選擇高亮

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

44、css3實現頭像變灰

CSS過濾器屬效能夠實現將圖片變為灰色
（支援Firefox 3.5+, Opera 15+, Safari, Chrome, and IE）

-webkit-filter: grayscale(100%);  
-webkit-filter: grayscale(1);  
filter: grayscale(100%);  
filter: gray;

45、圖片與文字在同意div中中間對齊

<div class="image-text">
    <img src="xxxx"/>
    <p>文字<p/>
</div>
.image-text {
    display:inline-block;
    vertical-align:middle;
}

46、實現水平和垂直翻轉

transform: scale(-1, 1);//水平翻轉
transform: scale(1, -1);//垂直翻轉

CSS 常用技巧
2018-06-13
CSS
css常用技巧梳理
2023-03-08
CSS
常用的CSS小技巧
2018-08-11
CSS
前端常用CSS小技巧
2017-12-14
前端CSS
常用前端佈局，CSS技巧介紹
2018-11-09
前端CSS
css技巧
2017-12-12
CSS
CSS系列：CSS常用樣式
2015-12-20
CSS
css小技巧
2017-10-25
CSS
CSS技巧（一）
2017-11-08
CSS
CSS技巧（二）
2017-11-15
CSS
CSS使用技巧
2010-03-31
CSS
api日常總結：前端常用js函式和CSS常用技巧
2017-10-21
API前端JS函式CSS
Css實用技巧
2019-04-04
CSS
css除錯技巧
2019-01-06
CSS除錯
CSS高階技巧
2016-11-20
CSS
css技巧總結
2017-10-29
CSS
css 技巧彙總
2018-06-30
CSS
HTML + CSS 小技巧
2018-07-01
HTMLCSS
CSS 專業技巧
2017-02-17
CSS
CSS Tricks - 你應該知道的 CSS 技巧
2018-10-29
CSS
（CSS學習記錄）：CSS高階技巧
2020-09-27
CSS
常用的CSS框架
2021-09-09
CSS框架
CSS常用佈局
2017-09-12
CSS
css常用屬性
2017-01-31
CSS
CSS實用技巧（中）
2021-09-06
CSS
CSS技巧總結2
2018-05-03
CSS
如何實現CSS居中？–CSS居中常用方法
2015-01-11
CSS
常用的Css函式
2019-05-06
CSS函式
CSS常用選擇器
2020-12-21
CSS
9種常用CSS動畫
2020-10-28
CSS動畫
css常用文字屬性
2020-10-18
CSS
css常用大總結
2020-12-23
CSS
CSS常用Mixin封裝
2017-12-14
CSS封裝
CSS 常用文字屬性
2024-03-24
CSS
CSS技巧之'text-justify'
2019-04-19
CSS
CSS 列表項佈局技巧
2018-11-20
CSS
CSS常見佈局技巧
2019-01-03
CSS
CSS 高階佈局技巧
2016-12-13
CSS