30+有用的CSS程式碼片段

info.9iphp.com發表於2015-12-18

原文網址 : http://www.admin10000.com/document/6930.html

　　在一篇文章中收集所有的CSS程式碼片段幾乎是不可能的事情，但是我們這裡列出了一些相對於其他的更有用的程式碼片段，不要被這些程式碼的長度所嚇到，因為它們都很容易實現，並且具有良好的文件。除了那些解決常見的惱人的問題外，也包含了一些解決新問題的新技術。

　1. 垂直對齊

　　如果你之前遇到過這個問題，你就應該知道它是多麼的煩人，幸運的是，現在你可以使用CSS3變換來解決這個問題：

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

　2. 只在一側或者兩側具有投影

.box-shadow {
    background-color: #AC92EC;
    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;
}

　3. 漸變背景動畫效果

　　從CSS3開始，動畫變得非常的酷了，但是切不可過分的使用它們。下面這一技巧巧妙地的移動背景位置，使其看起來像動畫一樣：

button {
    padding: 15px;
    background-image: linear-gradient(#FC6E51, #FFF);
    background-size: auto 200%;
    background-position: 0 100%;
    transition: background-position 0.5s;
}    
button:hover {
    background-position: 0 0;
}

　4. 將文字分成多列

div
{
    -moz-column-count:3; /* Firefox */
    -webkit-column-count:3; /* Safari and Chrome */
    column-count:3;
}

　5. 表格自動寬度

td {
    white-space: nowrap;
}

　6. 像出版物一樣，第一個字變得大些

p:first-child::first-letter{
  font-family: "papyrus";
  font-size: 28px;
  font-weight: bold;
}

　7. 特定瀏覽器的CSS Hacks的完整列表

　　有時候解決跨瀏覽器相容性可能會非常的棘手，但這些特定瀏覽器的技巧可能會幫你解決問題。

/***** Selector Hacks ******/
  
/* IE6 and below */
* html #uno  { color: red }
  
/* IE7 */
*:first-child+html #dos { color: red } 
  
/* IE7, FF, Saf, Opera  */
html>body #tres { color: red }
  
/* IE8, FF, Saf, Opera (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }
  
/* Opera 9.27 and below, safari 2 */
html:first-child #cinco { color: red }
  
/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: red }
  
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }
  
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho {  color: red }
  
/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
 #diez  { color: red  }
}
  
/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
 #veintiseis { color: red  }
}
  
  
/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece  { color: red  }
  
/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: red  }
  
/* Everything but IE6-8 */
:root *> #quince { color: red  }
  
/* IE7 */
*+html #dieciocho {  color: red }
  
/* Firefox only. 1+ */
#veinticuatro,  x:-moz-any-link  { color: red }
  
/* Firefox 3.0+ */
#veinticinco,  x:-moz-any-link, x:default  { color: red  }
  
  
  
/***** Attribute Hacks ******/
  
/* IE6 */
#once { _color: blue }
  
/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }
  
/* Everything but IE6 */
#diecisiete { color/**/: blue }
  
/* IE6, IE7, IE8 */
#diecinueve { color: blue\9; }
  
/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }
  
/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */

　8. 建立模糊文字

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

　9. 不使用表格實現跨瀏覽器垂直水平居中圖片

　　這段程式碼可以在一個已知寬高的容器內垂直水平居中一個未知大小的圖片，這是 IE 的一個hack：

<figure class='logo'>
    <span></span>
    <img class='photo'/>
</figure>
.logo {
  display: block;
  text-align: center;
  display: block;
  text-align: center;
  vertical-align: middle;
  border: 4px solid #dddddd;
  padding: 4px;
  height: 74px;
  width: 74px; }
  .logo * {
    display: inline-block;
    height: 100%;
    vertical-align: middle; }
    .logo .photo {
    height: auto;
    width: auto;
    max-width: 100%;
    max-height: 100%; }

　10. 高亮選中的 input

// HTML
<input id="mycheck1" type="checkbox" />
<label for="mycheck1">Check box label here</label>
<br />
<input id="mycheck2" type="checkbox" checked/>
<label for="mycheck2">Check box label here</label>
<br />
<input id="mycheck3" type="checkbox" />
<label for="mycheck3">Check box label here</label>

// CSS
input:checked + label{
    background: yellow;  
}

　11. 跨瀏覽器透明度

selector {
    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 */
}

　12. CSS投影

// 外投影
.shadow {
  -moz-box-shadow: 5px 5px 5px #ccc;
  -webkit-box-shadow: 5px 5px 5px #ccc;
  box-shadow: 5px 5px 5px #ccc;
}

// 內投影
.shadow {
   -moz-box-shadow:inset 0 0 10px #000000;
   -webkit-box-shadow:inset 0 0 10px #000000;
   box-shadow:inset 0 0 10px #000000;
}

　13. 跨瀏覽器最小高度

#div {
   min-height: 500px;
   height:auto !important;
   height: 500px;
}

　14. 固定 Footer

#footer {
   position:fixed;
   left:0px;
   bottom:0px;
   height:30px;
   width:100%;
   background:#999;
}
 
/* 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');
}

　15. 清除浮動 Clearfix

/* slightly enhanced, universal clearfix hack */
.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

　16. 給可點選元素新增手型游標

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

　17. iPad 定向CSS

<!-- css -->
@media only screen and (max-device-width: 1024px) and (orientation:portrait) { 
    .landscape { display: none; }
}
@media only screen and (max-device-width: 1024px) and (orientation:landscape) { 
    .portrait { display: none; }
}
 
<!-- example markup -->
<h1 class="portrait">Your device orientation is "portrait"<h1>
<h1 class="landscape">Your device orientation is "landscape"<h1>

　18. Pre 標籤內文字換行

pre{
height: 120px;
overflow: auto;
font-family: “Consolas”,monospace;
font-size: 9pt;
text-align:left;
background-color: #FCF7EC;
overflow-x: auto; /* Use horizontal scroller if needed; for Firefox 2, not
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
margin: 0px 0px 0px 0px;
padding:5px 5px 3px 5px;
white-space : normal; /* crucial for IE 6, maybe 7? */
}

　19. CSS3媒體查詢

/* 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 */
}

　20. 重置載入

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, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
    outline: 0;
}
body {
    line-height: 1;
    color: black;
    background: white;
}
ol, ul {
    list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: separate;
    border-spacing: 0;
}
caption, th, td {
    text-align: left;
    font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: "";
}
blockquote, q {
    quotes: "" "";
}

　21. 多邊框

元素必須是相對定位，且具有足夠的padding來顯示多餘的邊框：

#borders {
   position:relative;
   z-index:1;
   padding:30px;
   border:5px solid #f00;
   background:#ff9600;
}
#borders:before {
   content:"";
   position:absolute;
   z-index:-1;
   top:5px;
   left:5px;
   right:5px;
   bottom:5px;
   border:5px solid #ffea00;
   background:#4aa929;
}
 
#borders:after {
   content:"";
   position:absolute;
   z-index:-1;
   top:15px;
   left:15px;
   right:15px;
   bottom:15px;
   border:5px solid #00b4ff;
   background:#fff;
}

　22. 移除IE中textarea的滾動條

textarea { overflow: auto; }

　23. 簡單但好看的引用樣式

css-blockquote

blockquote {
    background:#f9f9f9;
    border-left:10px solid #ccc;
    margin:1.5em 10px;
    padding:.5em 10px;
    quotes:"\201C""\201D""\2018""\2019";
}
blockquote:before {
    color:#ccc;
    content:open-quote;
    font-size:4em;
    line-height:.1em;
    margin-right:.25em;
    vertical-align:-.4em;
}
blockquote p {
    display:inline;
}

　24. :-moz-placeholder

<!doctype html>
<html>
<head>
  <title>Placeholder demo</title>
  <style type="text/css">
    input:-moz-placeholder {
      color: green;
    }
  </style>
</head>
<body>
  <input id="test" placeholder="Placeholder text!">
</body>
</html>

　25. 另一種固定footer的方式

* { margin:0; padding:0; } 
 
html, body, #wrap { height: 100%; }
 
body > #wrap {height: auto; min-height: 100%;}
 
#main { padding-bottom: 150px; }  /* must be same height as the footer */
 
#footer {
        position: relative;
        margin-top: -150px; /* negative value of footer height */
        height: 150px;
        clear:both;} 
 
/* CLEAR FIX*/
.clearfix:after {content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
<div id="wrap">
 
        <div id="main" class="clearfix">
 
        </div>
 
</div>
 
<div id="footer">
 
</div>

　26. 背景透明

.rgba {
  background-color: transparent;
  background-color: rgba(200,200,200,0.8);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99dddddd,endColorstr=#99dddddd);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99dddddd,endColorstr=#99dddddd)";
}

　27. 居中未知寬度的DIV元素

.content {
    margin: 0 auto 8px;
    display: table;
    }
 
.content div {
    display: table-cell;
    }
 
<!--[if IE]>
.content {
    display: block;
    text-align: center;
    }
.content div {
    display: inline;
    zoom: 1;
}
<![endif]-->

　28. 根據檔案型別設定樣式

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

　29. 解決IE6/7雙倍margin/padding問題

ul li
{
  float: right;
  margin-right: 10px;
  *display: inline; /*Target IE7 and bellow*/
  _display: inline; /*Target IE6 and bellow*/
}
/* This example fixes the double right margin bug */

　30. 更改選中文字的樣式

::selection
{
color: white;
background-color: red;
}
 
::-moz-selection  /* Firefox needs an extra attention for this */
{
color: white;
background-color: red;
}

　31. 首字下沉

p:first-letter{
        display:block;
        margin:5px 0 0 5px;
        float:left;
        color:#FF3366;
        font-size:60px;
        font-family:Georgia;
    }

　　via：designyourway.net，翻譯：info.9iphp.com

常用 CSS 程式碼片段集合，建議收藏
2022-05-23
CSS
幾個超級實用的css程式碼片段
2020-03-15
CSS
程式碼片段
2019-02-21
RN程式碼片段
2019-02-14
Gorm常用程式碼片段
2024-05-07
GoORM
vscode使用者程式碼片段
2024-04-22
VSCode
程式碼片段管理工具
2021-09-25
vs code 新建程式碼片段路由基礎程式碼
2019-08-19
路由
vs code 新建程式碼片段 vue 基礎程式碼
2019-08-14
Vue
那些優雅靈性的JS程式碼片段
2018-04-10
JS
前端開發常用程式碼片段（中篇）
2018-05-09
前端
前端開發常用程式碼片段（下篇）
2018-05-10
前端
分享前端開發常用程式碼片段
2018-05-05
前端
在 markdown 中執行程式碼片段
2024-08-21
行程
sublime text 3 自制快速程式碼片段
2018-03-30
VIM 程式碼片段外掛 Ultisnips 使用教程
2018-09-03
SnippetsLab for Mac(程式碼片段管理工具)
2023-02-10
Mac
rubymine設定自定義快捷程式碼片段
2020-11-28
使用 implode.io 記錄分享你的程式碼片段
2018-09-24
遞迴顯示字型交換程式碼片段
2021-09-09
遞迴
【程式碼鑑賞】簡單優雅的JavaScript程式碼片段（二）：流控和重試
2021-11-07
JavaScript
分享8個非常時髦的翻頁特效（附程式碼片段）
2018-11-18
特效
記錄--N 個值得一看的前端程式碼片段
2024-06-14
前端
Bash 常用指令碼片段
2021-12-20
指令碼
css程式碼整理
2018-04-02
CSS
為什麼 StackOverflow 上的程式碼片段會摧毀你的專案？
2020-12-31
直觀對比幾個不同 Python 程式碼片段的執行速度
2020-04-12
Python
Golang，以 9 個簡短程式碼片段，弄懂 defer 的使用特點
2019-03-24
Golang
一些JS事件小片段程式碼整理收集（持續）
2018-08-09
JS事件
VS Code 程式碼片段指南: 從基礎到高階技巧
2024-08-30
completablefuture-examples：Java 20個CompletableFuture API案例程式碼片段
2022-03-15
JavaAPI
30秒內便能學會的30個超實用Python程式碼片段
2019-10-10
Python
網站製作中常見的10個 HTML5 程式碼片段整理
2019-05-11
網站HTML
組織css程式碼
2019-01-08
CSS
CSS顏色程式碼
2018-10-07
CSS
css程式碼規範
2018-06-25
CSS
CSS程式碼註釋
2018-07-28
CSS
一行 CSS 程式碼的魅力
2021-01-06
CSS
畢業兩年良心之作--不一樣的程式碼片段管理軟體 CodeExpander
2019-03-24

30+有用的CSS程式碼片段

1. 垂直對齊

2. 只在一側或者兩側具有投影

3. 漸變背景動畫效果

4. 將文字分成多列

5. 表格自動寬度

6. 像出版物一樣，第一個字變得大些

7. 特定瀏覽器的CSS Hacks的完整列表

8. 建立模糊文字

9. 不使用表格實現跨瀏覽器垂直水平居中圖片

10. 高亮選中的 input

11. 跨瀏覽器透明度

12. CSS投影

13. 跨瀏覽器最小高度

14. 固定 Footer

15. 清除浮動 Clearfix

16. 給可點選元素新增手型游標

17. iPad 定向CSS

18. Pre 標籤內文字換行

19. CSS3媒體查詢

20. 重置載入

21. 多邊框

22. 移除IE中textarea的滾動條

23. 簡單但好看的引用樣式

24. :-moz-placeholder

25. 另一種固定footer的方式

26. 背景透明

27. 居中未知寬度的DIV元素

28. 根據檔案型別設定樣式

29. 解決IE6/7雙倍margin/padding問題

30. 更改選中文字的樣式

31. 首字下沉

相關文章

　1. 垂直對齊

　2. 只在一側或者兩側具有投影

　3. 漸變背景動畫效果

　4. 將文字分成多列

　5. 表格自動寬度

　6. 像出版物一樣，第一個字變得大些

　7. 特定瀏覽器的CSS Hacks的完整列表

　8. 建立模糊文字

　9. 不使用表格實現跨瀏覽器垂直水平居中圖片

　10. 高亮選中的 input

　11. 跨瀏覽器透明度

　12. CSS投影

　13. 跨瀏覽器最小高度

　14. 固定 Footer

　15. 清除浮動 Clearfix

　16. 給可點選元素新增手型游標

　17. iPad 定向CSS

　18. Pre 標籤內文字換行

　19. CSS3媒體查詢

　20. 重置載入

　21. 多邊框

　22. 移除IE中textarea的滾動條

　23. 簡單但好看的引用樣式

　24. :-moz-placeholder

　25. 另一種固定footer的方式

　26. 背景透明

　27. 居中未知寬度的DIV元素

　28. 根據檔案型別設定樣式

　29. 解決IE6/7雙倍margin/padding問題

　30. 更改選中文字的樣式

　31. 首字下沉