CSS各种常用效果总结

2020-03-24 18:51:26

字体：大中小

来源：转载

供稿：网友

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 > -ms-filter: alpha(opacity=100 finishopacity=50 > 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
/htmlhtml教程

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。

上一篇：HTML表格标记教程(48)-CSS修饰表格

下一篇：CSS高级应用：定义列表的特殊用法