盒子阴影和文字阴影

盒子阴影

说明

box-shadow 属性可以给元素边框周围添加一个或者多个阴影效果。定义多个阴影，使用逗号分隔。

语法

box-shadow: none | [inset? && [<x> <y> <blur-radius>? <spread-radius>? && <color>? ] ]

例如

box-shadow:3px 3px 1px 1px #666;

解释

none：默认值为none，表示没有阴影

inset：将边框外阴影改为边框内阴影，背景之上内容之下。如果不写，默认为边框外阴影。inset只可写在最前或者最后。

x：阴影水平偏移量，正值为右偏移，负值为左偏移。

y：阴影垂直偏移量，正值为下偏移，负值为上偏移。

blur-radius：阴影模糊值，不允许为负值。

spread-radius：阴影外延伸值，正值为向外扩大，负值为向内缩小。

color：阴影颜色。

盒子阴影.png

文字阴影

语法

text-shadow: none | [inset? && [<x> <y> <blur-radius>?  && <color>? ] ]

例如

text-shadow:3px 3px 1px #666

解释

none：默认值为none，表示没有阴影

x：阴影水平偏移量，正值为右偏移，负值为左偏移。

y：阴影垂直偏移量，正值为下偏移，负值为上偏移。

blur-radius：阴影模糊值，不允许为负值。

color：阴影颜色。

文字阴影.png