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}