可能會用到的CSS樣式

多欄CSS3

使用css3來創(chuàng)建多欄，它可以自適應(yīng)網(wǎng)頁，不兼容IE

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

用CSS包裹內(nèi)容很長的URL和文本

這個代碼片段通過保證文本的包裹元素寬度適應(yīng)內(nèi)容的寬度，能夠避免很長的文本超出內(nèi)容區(qū)域。

pre {
    white-space: pre;           /* CSS 2.0 */
    white-space: pre-wrap;      /* CSS 2.1 */
    white-space: pre-line;      /* CSS 3.0 */
    white-space: -pre-wrap;     /* Opera 4-6 */
    white-space: -o-pre-wrap;   /* Opera 7 */
    white-space: -moz-pre-wrap; /* Mozilla */
    white-space: -hp-pre-wrap;  /* HP Printers */
    word-wrap: break-word;      /* IE 5+ */
}

用css3創(chuàng)造3D文字

text-shadow屬性能幫助你只用CSS創(chuàng)造3D文字?！?/p> 

p.threeD{
    text-shadow:
        -1px 1px 0 #ddd,
        -2px 2px 0 #c8c8c8,
        -3px 3px 0 #ccc,
        -4px 4px 0 #b8b8b8,
        -4px 4px 0 #bbb,
        0px 1px 1px rgba(0,0,0,.4),
        0px 2px 2px rgba(0,0,0,.3),
        -1px 3px 3px rgba(0,0,0,.2),
        -1px 5px 5px rgba(0,0,0,.1),
        -2px 8px 8px rgba(0,0,0,.1),
        -2px 13px 13px rgba(0,0,0,.1);
}

IEcss hack

IE6：_
IE6/7： *
IE7/Firefox：!important
IE7：*+
IE6/7/8：\9
IE8：\0
safari : select{ [;line-height: 36px;] }
條件hack 
IE7以下版本：<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7"><![endif]-->
IE7：<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8"><![endif]-->
IE8：<!--[if IE 8]> <html class="no-js lt-ie9"><![endif]-->
IE8以上：<!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]-->兼容性

3D效果的按鈕

以前要想制作帶有3D效果，并且點擊下去還會變化的按鈕，就得用圖片替換的方法，現(xiàn)在CSS就可以了：

a{
    display: block;
    border: 1px solid;
    border-color: #aaa #000 #000 #aaa;
    width: 8em;
    background: #fc0;
}

a:hover{
    position: relative;
    top: 1px;
    left: 1px;
    border-color: #000 #aaa #aaa #000;
}

字符方面的選擇器

 p:first-letter { ... }

設(shè)置對象內(nèi)的第一個字符的樣式表屬性。
此偽對象僅作用于塊對象。內(nèi)聯(lián)對象要使用該偽對象，必須先設(shè)定對象的height或width屬性，或者設(shè)定position屬性為absolute，或者設(shè)定display屬性為block。
當(dāng)你想加強每一段中的第一個字符時，這個CSS屬性特別有用。
比如，段落首字下沉，

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


p:first-line { ... }

設(shè)置對象內(nèi)的第一行的樣式表屬性。
此偽對象僅作用于塊對象。內(nèi)聯(lián)對象要使用該偽對象，必須先設(shè)定對象的height或width屬性，或者設(shè)定position屬性為absolute，或者設(shè)定display屬性為block。
這個和first-letter類似的用法，不同的是，這個指定的第一行。

SVG圖片

沒有理由不使用 SVG 圖標(biāo)：

.logo {
  background: url("logo.svg");
}

SVG 在所有分辨率下都可以良好縮放，并且支持所有 IE9 以后的瀏覽器，丟掉你的 .png, .jpg, 或 .gif-jif-whatev 文件吧。
注意： 針對僅有圖標(biāo)的按鈕，如果 SVG 沒有加載成功的話，以下樣式對無障礙有所幫助：

.no-svg .icon-only:after {
  content: attr(aria-label);
}

通配符選擇器

* + * {
  margin-top: 1.5em;
}

通用選擇器 (*) 和 相鄰兄弟選擇器 (+) 一起使用，效果非凡
在此示例中，文檔流中的所有的相鄰兄弟元素將都將設(shè)置 margin-top: 1.5em 的樣式。

創(chuàng)造格子等寬的表格

table-layout: fixed 可以讓每個格子保持等寬：

.calendar {
  table-layout: fixed;
}

利用 Flexbox 去除多余的外邊距

與其使用 nth-， first-， 和 last-child 去除列之間多余的間隙，不如使用 flexbox 的 space-between 屬性：

.list {
display: flex;
justify-content: space-between;
}

.list .person {
flex-basis: 23%;
}
列之間的間隙總是均勻相等。

利用屬性選擇器來選擇空鏈接

當(dāng) '< a>' 元素沒有文本內(nèi)容，但有 href 屬性的時候，顯示它的 href 屬性：

a[href^="http"]:empty::before { 
    content: attr(href);
}

相當(dāng)簡便。

為破碎圖象定義樣式

只要一點CSS就可以美化破碎的圖象

img {  
  display: block;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 300;
  height: auto;
  line-height: 2;
  position: relative;
  text-align: center;
  width: 100%;
}

以添加偽元素的法則來顯示用戶信息和URL的引用：

img:before {  
  content: "We're sorry, the image below is broken :(";
  display: block;
  margin-bottom: 10px;
}

img:after {  
  content: "(url: " attr(src) ")";
  display: block;
  font-size: 12px;
}

為更好的移動體驗，為表單元素設(shè)置字體大小

當(dāng)觸發(fā)<select>的下拉列表時，為了避免表單元素在移動瀏覽器（IOS Safari 等等）上的縮放，加上font-size：

input[type="text"],
input[type="number"],
select,
textarea {
  font-size: 16px;
}

跨瀏覽器的不透明度

雖然CSS3標(biāo)準(zhǔn)包括Opacity屬性，但不是每個瀏覽器都支持它跨瀏覽器的透明度，這里的CSS技巧

transparent_class {
　filter:alpha(opacity=50);
　-moz-opacity:0.5;
　-khtml-opacity: 0.5;
　opacity: 0.5;
}
// 或者
.transparent { 
　zoom: 1; 
　filter: alpha(opacity=50); 
　opacity: 0.5;
 }

翻轉(zhuǎn)圖片

翻轉(zhuǎn)圖像隨著CSS3的transform越來越實用，不需要重新加載圖片，就可以實現(xiàn)一個圖片的旋轉(zhuǎn)。常見的是一個三角型效果，我們想讓他在不同狀態(tài)展示不同的風(fēng)格：

img.flip {
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
}

黑白圖像

img.desaturate {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
}

模糊文本

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

禁用鼠標(biāo)事件

CSS3 新增的 pointer-events 讓你能夠禁用元素的鼠標(biāo)事件，例如，一個連接如果設(shè)置了下面的樣式就無法點擊了。

.disabled { pointer-events: none; }

文本漸變

h2[data-text] {
  position: relative;
}
h2[data-text]::after {
  content: attr(data-text);
  z-index: 10;
  color: #e3e3e3;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), color-stop(50%, rgba(0,0,0,1)), to(rgba(0,0,0,0)));}

使用屬性選擇器用于空鏈接

當(dāng)a元素沒有文本值，但 href 屬性有鏈接的時候顯示鏈接：

a[href^="http"]:empty::before {
  content: attr(href);
}

表格單元格等寬

表格工作起來很麻煩，所以務(wù)必盡量使用 table-layout: fixed 來保持單元格的等寬：

.calendar {
  table-layout: fixed;
}

頁面頂部陰影

下面這個簡單的 CSS3 代碼片段可以給網(wǎng)頁加上漂亮的頂部陰影效果：

body:before {
          content: "";
          position: fixed;
          top: -10px;
          left: 0;
          width: 100%;
          height: 10px;
          -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
          -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
          box-shadow: 0px 0px 10px rgba(0,0,0,.8);
          z-index: 100;
}
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案？ 參考答案 (1)瀏覽器兼容問題一：不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補...
    _Yfling閱讀 14,108評論 1贊 92
  • 一:在制作一個Web應(yīng)用或Web站點的過程中，你是如何考慮他的UI、安全性、高性能、SEO、可維護(hù)性以及技術(shù)因素的...
    Arno_z閱讀 1,360評論 0贊 1
  • 曾經(jīng)相憶人何在？遙望祁連山外。樹隱浮煙一派，隔斷囂塵界。 幾多詩夢酬天籟，似到神仙地帶。領(lǐng)略當(dāng)時勝概，惹我無窮愛。
    雪窗_武立之閱讀 244評論 0贊 5
  • 高懸的十字架， 上浮的煙氣， 信徒垂眸，虔誠祈禱。 空中繚繞著低低的細(xì)語， 我知道的，那是你。 晃動的燈光， 華麗...
    細(xì)雨淡煙閱讀 233評論 0贊 0
  • 嬴稷聽到侍從私下議論母后和義渠王的關(guān)系，怒氣沖天，拿劍挑釁義渠王。羋月命嬴稷面壁思過。刺客刺殺羋月，義渠王替羋月?lián)?..
    雙人鳥醫(yī)閣_鵬鵬鵬666閱讀 939評論 0贊 0

友情鏈接更多精彩內(nèi)容