CSS3中如何实现文本阴影和边框阴影

关于CSS3中如何实现文本阴影和边框阴影

下面分享一下在CSS3中，如何能够做到文本与边框阴影。

1、文本阴影

首先
建立一个盒模型，在当中输入一些文字，代码下图所示：

效果如下：

然后给盒子添加属性：text-shadow:;

实现效果如下：

其中，text-shadow有四个属性值，第一个属性值表示文字在水平方向上的阴影；
第二个属性值表示文字在垂直方向上的阴影；第三个属性值表示文字的模糊度；
第四个属性值表示文字阴影的颜色。

在text-shadow:;中可以添加多层阴影属性，中间用,号隔开。

2、边框阴影
首先，建立一盒模型并添加边框属性，代码如下：

实现效果如下：

然后给该盒子添加border-radius:;属性，代码如下：

实现效果如下：

其中，box-shadow的第一个属性值表示在水平方向上的阴影；
第二个属性值表示在垂直方向上的阴影；
第三个属性值表示阴影的模糊度；
第四个属性值表示阴影的模糊大小；
第五个属性值表示阴影的颜色。

注意：这个阴影默认是在边框外部，如果需要在内部实现阴影，那么在颜色属性值后面加inset，就会得到如下结果：

以上就是对CSS3中文字阴影与边框阴影的分享。
欢迎大佬指出错误^ - ^