几个简单实用的css效果

1.要使按钮具有3D效果，只要将它的左上部分边框设置为浅色，右下部分边框设置为深色即可。

eg：#button {
　　　　background: #888;
　　　　border: 2px solid;
　　　　border-color: #999 #777 #777 #999;
　　}

2. 实现透明效果

将一个容器设为透明，可以使用下面的代码：

　　.element { 
　　　　filter:alpha(opacity=50); 
　　　　-moz-opacity:0.5; 
　　　　-khtml-opacity: 0.5; 
　　　　opacity: 0.5; 
　　}

在这四行CSS语句中，第一行是IE专用的，第二行用于Firefox，第三行用于webkit内核的浏览器，第四行用于Opera。

3. CSS三角形效果

先编写一个空元素<div class=”triangle”></div>，然后将它四个边框中的三个边框设为透明，剩下一个设为可见，就可以生成三角形效果：

   .triangle{

         display:block;
         height:0px;
         width:0px;
         border:50px solid #000;
         border-color:transparent transparent green transparent;
         border-style:solid;
}

效果如下所示：

4.CSS提示框效果

<div class=”tip-bubble tip-bubble-left”>Arrow on left </div>

<div class=”tip-bubble tip-bubble-right”>Arrow on Right</div>

<div class=”tip-bubble tip-bubble-top”>Arrow on top</div>

<div class=”tip-bubble tip-bubble-bottom”>Arrow on bottom</div>

.tip-bubble {
position: relative;
background-color: #202020;
width: 100px;
padding: 20px;
color: #CCC;
text-align: center;
border-radius: 10px;
margin: 50px;
border: 1px solid #111;
border-shadow: 1px 1px 2px #CCC;
text-shadow: 0px 0px 5px #404040;
}

.tip-bubble:after {
content: ”;
position: absolute;
width: 0;
height: 0;
border: 15px solid;
}

/* Position the Arrow */
.tip-bubble-top:after {
border-bottom-color: #202020;
left: 50%;
bottom: 100%;
margin-left: -15px;
}
.tip-bubble-right:after {
border-left-color: #202020;
left: 100%;
top: 50%;
margin-top: -15px;
}

.tip-bubble-bottom:after {
border-top-color: #202020;
top: 100%;
left: 50%;
margin-left: -15px;
}

.tip-bubble-left:after {
border-right-color: #202020;
top: 50%;
right: 100%;
margin-top: -15px;
}

效果如下所示：

5.固定位置的页首效果

　body{ margin:0;padding:100px 0 0 0;}

　　div#header{
　　　　position:absolute;
　　　　top:0;
　　　　left:0;
　　　　width:100%;
　　　　height:<length>;
　　}

　　@media screen{
　　　　body>div#header{position: fixed;}
　　}

　　* html body{overflow:hidden;}

　　* html div#content{height:100%;overflow:auto;}

6. 用图片替换文字

有时我们需要在标题栏中使用图片，但是又必须保证搜索引擎能够读到标题，CSS语句可以这样写：

　　h1 { 
　　　　text-indent:-9999px; 
　　　　background:url(“h1-image.jpg”) no-repeat; 
　　　　width:200px; 
　　　　height:50px; 
　　}