box-shadow怎么用?CSS3 box-shadow 属性

向 div 元素添加 box-shadow:div{box-shadow: 10px 10px 5px #888888;}页面底部有更多实例。浏览器支持定义和用法IE9+、Firefox 4、Chrome、Opera 以及 Safari 5.1.1 支持 box-shadow 属性。box-shadow 属性向框添加

向 div 元素添加 box-shadow:

div
{
box-shadow: 10px 10px 5px #888888;
}

页面底部有更多实例。

浏览器支持

定义和用法IE9+、Firefox 4、Chrome、Opera 以及 Safari 5.1.1 支持 box-shadow 属性。

box-shadow 属性向框添加一个或多个阴影。

提示:请使用 border-image-* 属性来构造漂亮的可伸缩按钮!

默认值:none
继承性:no
版本:CSS3
JavaScript 语法:object.style.boxShadow="10px 10px 5px #888888"

语法

box-shadow: h-shadow v-shadow blur spread color inset;

注释:box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表,每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。

描述
h-shadow必需。水平阴影的位置。允许负值。
v-shadow必需。垂直阴影的位置。允许负值。
blur可选。模糊距离。
spread可选。阴影的尺寸。
color可选。阴影的颜色。请参阅 CSS 颜色值。
inset可选。将外部阴影 (outset) 改为内部阴影。

相关文章推荐:

1.box-shadow是给元素块添加内阴影外阴影

2.CSS3属性box-shadow使用详细教程

3.css3 box-shadow参数spread使用技巧

4.CSS3 box-shadow应用制作Drop Shadow效果

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

在介绍CSS3系列时,我花了一篇很长的篇幅专门介绍了CSS3的box-shadow属性以及其具体的使用等。在此文末尾还介绍了使用box-shadow配合CSS3的伪类中的“:before”和“:after”制作Box Drop Shadow效果的实例。随着CSS3和
text-shadow 是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果。随着html5和CSS3的普及,这一特殊效果使用越来越普遍。 基本语法 是{box-shadow:[inset] x-offset y-offset blur-radius spre