首页 > 代码库 > 几个简单实用的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效果