|
css各种常用效果总结，包括背景图片固定居中，div阴影，背景半透明，div圆角，DIV渐变
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS test</title>
<style type="text/css">
body
{
margin: 0; /*背景图片固定居中
www.jzxue.com收集整理
*/
background-image: url('images/bg1.jpg');
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
}
#header
{
}
#inner-header
{
margin: 0 auto;
width: 960px;
background-color: Gray;
height: 80px; /*布局块阴影，如果不想支持低版本IE可去掉滤镜
www.jzxue.com收集整理
*/
box-shadow: 3px 3px 4px #000;
-moz-box-shadow: 3px 3px 4px #000;
-webkit-box-shadow: 3px 3px 4px #000;
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
}
#main
{
background-color: Gray;
margin: 10 auto;
width: 960px;
min-height: 500px;
height: auto; /*
背景半透明
www.jzxue.com收集整理
*/
filter: alpha(opacity=70); /*IE*/
-moz-opacity: 0.7; /*Mozilla*/
opacity: 0.7; /*FF*/ /*
圆角效果，不考虑低版本IE
www.jzxue.com收集整理
*/
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
}
#footer
{
margin: 0 auto;
width: 960px;
height: 100px; /*渐变效果
www.jzxue.com收集整理
*/
filter: alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0);
-ms-filter: alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0); /*IE8*/
background-color: Gray; /* 一些不支持背景渐变的浏览器 */
background: -moz-linear-gradient(top, red, rgba(0, 0, 255, 0.5));
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#ff0000), to(rgba(0, 0, 255, 0.5)));
background: -o-linear-gradient(top, red, rgba(0, 0, 255, 0.5));
}
</style>
<!--[if IE]>
<style type="text/css">
#main
{
height: 500px;
}
body
{
text-align:center;
}
#inner-header
{
text-align:left;
}
</style>
<![endif]-->
</head>
<body>
<div id="header">
<div id="inner-header">
<h1>
CSS Demo</h1>
</div>
</div>
<div id="main">
</div>
<div id="footer">
</div>
</body>
</html>
(责任编辑：admin) |
