200字范文 > 蛙蛙推荐：css背景图片固定居中 div阴影背景半透明 div圆角 DIV渐变【HTML】

蛙蛙推荐：css背景图片固定居中 div阴影背景半透明 div圆角 DIV渐变【HTML】

时间：2021-02-21 08:58:45

web前端|html教程

蛙蛙推荐：css背景图片固定居中，div阴影，背景半透明，div圆角，DIV渐变

web前端-html教程

很久不更新博客，整理了CSS的一些常用效果，尽量兼容多的浏览器，包括背景图片固定居中，div阴影，背景半透明，div圆角，DIV渐变等。

android 简单飞机大战游戏源码,ubuntu重建开机引导,网页部署到本地tomcat,zillow反爬虫,php怎么转换为pdf,seo友情lzw

CSS testbody{margin:0; /*背景图片固定居中 /css/pr_background-position.asp /?action=show&id=51*/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可去掉滤镜 /cross-browsers-css-shadow/*/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; /*背景半透明 /zenwong/archive//08/29/2846546.aspx*/filter:alpha(opacity=70); /*IE*/-moz-opacity:0.7; /*Mozilla*/opacity:0.7; /*FF*/ /*圆角效果，不考虑低版本IE /creating-rounded-corners-with-css/*/-moz-border-radius:20px;-webkit-border-radius:20px;border-radius:20px; }#footer{margin:0 auto;width:960px;height:100px; /*渐变效果 /wordpress/?p=743*/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)); }