手工SEO

手工SEO首页 DEDE教程 正文

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

手工SEO 2020-03-08 14:34:18 DEDE教程 66℃ 手工SEO

向 div 元素添加 box-shadow:

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

页面底部有更多实例。

浏览器支持

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

定义和用法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效果

上一篇:java正则表达式 Java 正则表达式详解

下一篇:CSS背景图像位置属性background-position百分比详解

网站分类
标签列表