css有用的程式碼片段

標籤：table   斑馬線   rgb   span   des   shadow   pix   splay   top   

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

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

html, body {    height: 100%;}

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

div {    height: 100%;}

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

　　如果你要一個盒陰影，試試這個技巧，能為任一邊添加陰影。為了實現這個，首先定義一個有具體寬高的盒子，然後正確定位: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;}

3、製造模糊文本

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

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

3、新版清除浮動（2011）

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

4、通用媒體查詢

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

5、強制出現垂直捲軸

html { height: 101% }

6、CSS3 斑馬線

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

原文連結：1190000002773955

css有用的程式碼片段