html css常用效果,HTML_CSS各种常用效果总结，css各种常用效果总结，包括背 - phpStudy...

CSS各种常用效果总结

css各种常用效果总结，包括背景图片固定居中，div阴影，背景半透明，div圆角，DIV渐变

CSS test

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));

}

CSS Demo

相关阅读:

html sub标记和sup标记

Linux下常用的FTP Server简介

Memcache 在PHP中的使用技巧

Linux操作系统使用经验大分享

当某IP 连接我机器的3389端口 报警的脚本

asp去除所有的超级链接的两种方法 替换与正则

用jquery来定位

系统设置--setup

jquery BS,dialog控件自适应大小

安装APACHE

javascript基础实例:如何计算24点(4)

在Windows上配置并整合PHP和MySQL(1)

js 字符串操作函数

Oracle用户名更改操作四步走