CSS小技巧

1.容器垂直居中

 1 好比，有一大一小兩個容器，請問如何將小容器垂直居中
 2 
 3 <div id="big">
 4 
 5 <div id="small">
 6 
 7 </div>
 8 
 9 </div>
10 
11 首先，將大容器的定位爲relative。
12 
13 div#big{
14 
15 position:relative;
16 
17 height:480px;
18 
19 }
20 
21 而後，將小容器定位爲absolute，再將它的左上角沿y軸下移50%，最後將它margin-top上移自己高度的50%便可。
22 
23 div#small {
24 
25 position: absolute;
26 
27 top: 50%;
28 
29 height: 240px;
30 
31 margin-top: -120px;
32 
33 }

2.3D按鈕

要使按鈕具備3D效果，只要將它的左上部邊框設爲淺色，右下部邊框設爲深色便可。

div#button {

background: #888;

border: 1px solid;

border-color: #999 #777 #777 #999;

}

3.用圖片充當列表標誌

默認狀況下，瀏覽器使用一個黑圓圈做爲列表標誌，能夠用圖片取代它：

ul {list-style: none}

ul li {

background-image: url("path-to-your-image");

background-repeat: none;

background-position: 0 0.5em;

}

 

4.如何使用CSS生成一個三角形？

先編寫一個空元素

<div class="triangle"></div>

而後，將它四個邊框中的三個邊框設爲透明，剩下一個設爲可見，就能夠生成三角形效果：

.triangle {

border-color: transparent transparent green transparent;

border-style: solid;

border-width: 0px 300px 300px 300px;

height: 0px;

width: 0px;

}

 5.禁止自動換行

 

若是你但願文字在一行中顯示完成，不要自動換行，CSS命令以下：

h1 { white-space:nowrap; }

 

6. 用圖片替換文字

有時咱們須要在標題欄中使用圖片，可是又必須保證搜索引擎可以讀到標題，CSS語句能夠這樣寫：

h1 {

text-indent:-9999px;

background:url("h1-image.jpg") no-repeat;

width:200px;

height:50px;

}

7.CSS提示框

當鼠標移動到連接上方，會自動出現一個提示框。

<a class="tooltip" href="#">連接文字 <span>提示文字</span></a>

CSS這樣寫：

a.tooltip {position: relative}

a.tooltip span {display:none; padding:5px; width:200px;}

a:hover {background:#fff;} /*background-color is a must for IE6*/

a.tooltip:hover span{display:inline; position:absolute;}

8.取消IE文本框的滾動條

textarea { overflow: auto; }

9. 黑白圖像

這段代碼會讓你的彩色照片顯示爲黑白照片，是否是很酷？

img.desaturate {

filter: grayscale(100%);

-webkit-filter: grayscale(100%);

-moz-filter: grayscale(100%);

-ms-filter: grayscale(100%);

-o-filter: grayscale(100%);

}

10. 頁面頂部陰影

下面這個簡單的 CSS3 代碼片斷能夠給網頁加上漂亮的頂部陰影效果：

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

11.優化顯示文本

 

 

有時，字體並不能在全部設備上都達到最佳的顯示，因此可讓設備瀏覽器來幫助你：

html {

-moz-osx-font-smoothing: grayscale;

-webkit-font-smoothing: antialiased;

text-rendering: optimizeLegibility;

}

有時，字體並不能在全部設備上都達到最佳的顯示，因此可讓設備瀏覽器來幫助你：

 

12.文本漸變

文本漸變效果很流行，使用 CSS3 可以很簡單就實現：

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

13.禁用鼠標事件

CSS3 新增的 pointer-events 讓你可以禁用元素的鼠標事件，例如，一個鏈接若是設置了下面的樣式就沒法點擊了。

.disabled { pointer-events: none; }

14.Font-Size 基準

/* 假設瀏覽器的默認的大小是 16px ， 首先將其設置爲10px (font-size:10/16) */

body {font-size:10/16;}

/* 而後就能夠用em作統一字體單位了 2.4em = 24px */

h1 {font-size: 2.4 em}