您尚未登录,无法添加相关文章。 - 登录

新用户?

哎呀,出了点小问题,您可以稍后重试!

未填写内容或格式不正确!

CSS3 box-shadow使用参考指南

浏览:70212

相关技术文章博览

我要添加++

基础知识(取自腾讯ISD Webteam CSS3中文手册)

语法:

box-shadow<length> <length> <length> <length> || <color>

相关属性:text-shadow

取值:
<length> <length> <length>? <length>? || <color>
阴影水平偏移值(可取正负值);阴影垂直偏移值(可取正负值);阴影模糊值;阴影颜色
说明:

设置块阴影

引擎类型 Gecko Webkit Presto
Box-shadow -moz-box-shadow -webkit-box-shadow  
 
兼容性:
类型 IEInternet Explorer FirefoxFirefox ChromeChrome OperaOpera SafariSafari
版本 (×)IE6 (×)Firefox 3.0.10 (√)Chrome 2.0.x (×)Opera 9.64 (√)Safari 4
(×)IE7 (√)Firefox 3.5 (√)Opera 10.6
(×)IE8
(√)IE9

代码与实例

CSS代码:
.box_shadow{
    width:180px; 
    padding:40px 20px; 
    background:white; 
    -webkit-box-shadow:4px 2px 6px #333333; 
    -moz-box-shadow:3px 2px 6px #333333;
}
                
HTML代码:
<div class="box_shadow">盒阴影效果,看看如何~~</div>
                
效果截图
CSS3 box-shadow效果截图
查看demo原页面>>

拓展知识点(由各前端同仁提供)

知识点(1) 提供者:张鑫旭 [编辑本段]
CSS3盒阴影效果不支持图片中空透明背景边缘的阴影效果

见如下测试代码:

img{-moz-box-shadow:2px 2px 4px #333333; -webkit-box-shadow:2px 2px 4px #333333; box-shadow:2px 2px 4px #333333; background:-moz-linear-gradient(top, white, #beceeb); background:-webkit-gradient(linear,0 0, 0 bottom, from(white), to(#beceeb));}

<img src="../image/zxx_cavity.png" />

结果中空的“张鑫旭”三个字的边缘却没有阴影,只有图片的边缘有。您可以狠狠地点击这里查看demo:http://www.zhangxinxu.com/study/201004/png-cavity-box-shadow-test.html
CSS3盒阴影效果不支持图片中空透明背景边缘的阴影效果

见如下测试代码:

img{-moz-box-shadow:2px 2px 4px #333333; -webkit-box-shadow:2px 2px 4px #333333; box-shadow:2px 2px 4px #333333; background:-moz-linear-gradient(top, white, #beceeb); background:-webkit-gradient(linear,0 0, 0 bottom, from(white), to(#beceeb));}

<img src="../image/zxx_cavity.png" />

结果中空的“张鑫旭”三个字的边缘却没有阴影,只有图片的边缘有。您可以狠狠地点击这里查看demo:http://www.zhangxinxu.com/study/201004/png-cavity-box-shadow-test.html
对下面的内容进行修改编辑:
知识点(2) 提供者:张鑫旭 [编辑本段]
CSS3盒阴影效果不仅支持盒外阴影,还支持内阴影,使用时增加一个inset属性即可。例如:box-shadow: inset 0 0 1px #fff;

所表示的含义是没有偏移,1像素模糊的白色内阴影。

box-shadow还支持多阴影,例如:box-shadow: inset 0 0 1px #fff, inset 4px 4px 20px rgba(255,255,255,0.33), inset -2px -2px 10px rgba(255,255,255,0.25);

所表示的含义是,无偏移1像素模糊白色阴影重叠于左上角4像素偏移20像素模糊透明度0.33的白色内阴影再重叠于右下角偏移2像素,模糊10像素,透明度0.25的白色内阴影。

box-shadow的投影功能很强大,配合其他一些CSS3属性,能够轻松实现很多精湛的UI效果,例如下面的样式:

-webkit-border-radius: 40px;

-webkit-box-shadow: 0 0 1px #fff, 0 0 3px #000, 0 0 3px #000;

-moz-border-radius: 40px;

-moz-box-shadow: 0 0 1px #fff, 0 0 3px #000, 0 0 3px #000, inset 0 1px #fff, inset 0 12px rgba(255,255,255,0.15), inset 0 4px 10px #cef, inset 0 22px 5px #0773b4, inset 0 -5px 10px #0df;

height: 34px;

width: 80px;

border-radius: 40px;

background: #034a76;

box-shadow: 0 0 1px #fff, 0 0 3px #000, 0 0 3px #000, inset 0 1px #fff, inset 0 12px rgba(255,255,255,0.15), inset 0 4px 10px #cef, inset 0 22px 5px #0773b4, inset 0 -5px 10px #0df;

能够实现下图所示的按钮效果:

CSS3盒阴影效果不仅支持盒外阴影,还支持内阴影,使用时增加一个inset属性即可。例如:box-shadow: inset 0 0 1px #fff;

所表示的含义是没有偏移,1像素模糊的白色内阴影。

box-shadow还支持多阴影,例如:box-shadow: inset 0 0 1px #fff, inset 4px 4px 20px rgba(255,255,255,0.33), inset -2px -2px 10px rgba(255,255,255,0.25);

所表示的含义是,无偏移1像素模糊白色阴影重叠于左上角4像素偏移20像素模糊透明度0.33的白色内阴影再重叠于右下角偏移2像素,模糊10像素,透明度0.25的白色内阴影。

box-shadow的投影功能很强大,配合其他一些CSS3属性,能够轻松实现很多精湛的UI效果,例如下面的样式:

-webkit-border-radius: 40px;

-webkit-box-shadow: 0 0 1px #fff, 0 0 3px #000, 0 0 3px #000;

-moz-border-radius: 40px;

-moz-box-shadow: 0 0 1px #fff, 0 0 3px #000, 0 0 3px #000, inset 0 1px #fff, inset 0 12px rgba(255,255,255,0.15), inset 0 4px 10px #cef, inset 0 22px 5px #0773b4, inset 0 -5px 10px #0df;

height: 34px;

width: 80px;

border-radius: 40px;

background: #034a76;

box-shadow: 0 0 1px #fff, 0 0 3px #000, 0 0 3px #000, inset 0 1px #fff, inset 0 12px rgba(255,255,255,0.15), inset 0 4px 10px #cef, inset 0 22px 5px #0773b4, inset 0 -5px 10px #0df;

能够实现下图所示的按钮效果:

对下面的内容进行修改编辑:
图片地址是:取消
插入:

我要分享

分享到:1