CSS3 阴影(Shadows)
使用CSS3阴影
CSS3使您能够像在Photoshop中一样向元素添加阴影效果,而无需使用任何图像。在CSS3之前,切片图像用于在非常烦人的元素周围创建阴影。
下一节将介绍如何在文字和元素上应用阴影。
CSS3 box-shadow属性
box-shadow属性可用于向元素的框中添加阴影。您甚至可以使用逗号分隔的阴影列表应用多个阴影效果。创建盒子阴影的基本语法可以通过以下方式给出:
box-shadow:offset-xoffset-yblur-radiuscolor;
该box-shadow属性的组件具有以下含义:
offset-x —设置阴影的水平偏移量。
offset-y —设置阴影的垂直偏移。
blur-radius —设置模糊半径。值越大,模糊越大,阴影的边缘越模糊。不允许使用负值。
color —设置阴影的颜色。如果省略或未指定颜色值,则它将采用color属性的值。
请参考CSS3 box-shadow属性,以了解有关其他可能值的更多信息。
.box{width:200px;height:150px;background:#ccc;box-shadow:5px5px10px#999;}测试看看‹/›
注意:添加时box-shadow,如果未指定模糊半径分量的值或将其设置为零(0),则阴影的边缘将变清晰。
同样,您可以使用逗号分隔的列表添加多框阴影:
.box{width:200px;height:150px;background:#000;box-shadow:5px5px10pxred,10px10px20pxyellow;}测试看看‹/›
CSS3 text-shadow属性
您可以使用text-shadow属性在文本上应用阴影效果。 您还可以使用与box-shadow相同的表示法对文本应用多个阴影。
h1{text-shadow:5px5px10px#666;}h2{text-shadow:5px5px10pxred,10px10px20pxyellow;}测试看看‹/›
编辑于2024-06-07 01:24