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高級應用：定義列表的特殊用法