CSS小技巧

1.容器垂直居中

 1 比如，有一大一小两个容器，请问如何将小容器垂直居中
 2 
 3 
"big">
 4 
 5 
"small">
 6 
 7 
 8 
 9 
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生成一个三角形？

先编写一个空元素

class="triangle">


然后，将它四个边框中的三个边框设为透明，剩下一个设为可见，就可以生成三角形效果：

.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提示框

当鼠标移动到链接上方，会自动出现一个提示框。

class="tooltip" href="#">链接文字 提示文字

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}