CSS3 box-shadow 属性

CSS阴影效果详解

最新推荐文章于 2023-02-26 23:02:42 发布

原创最新推荐文章于 2023-02-26 23:02:42 发布 · 999 阅读

0 ·

CC 4.0 BY-SA版权

html5 专栏收录该内容

16 篇文章

订阅专栏

本文详细介绍了CSS中box-shadow属性的使用方法，包括阴影的水平和垂直位置、模糊程度及颜色设置等关键参数，并提供了标准格式示例。

-moz-box-shadow: 10px 10px 5px #888888; /* 老的 Firefox */
box-shadow: 10px 10px 5px #888888 ;

第一个参数：阴影向右偏离距离
第二个参数：阴影向下偏移距离
第三个参数：模糊程度
第四个参数：阴影的颜色

标准格式如下：

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

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