首页 > 代码库 > 几个简单实用的css效果

几个简单实用的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; 
  }

几个简单实用的css效果