Jquery中文网 www.jquerycn.cn
Jquery中文网 >  CSS教程  >  正文 CSS3给div或者文字添加阴影(盒子阴影、文本阴影的使用)

CSS3给div或者文字添加阴影(盒子阴影、文本阴影的使用)

发布时间:2019-10-25   编辑:www.jquerycn.cn
jquery中文网为您提供CSS3给div或者文字添加阴影(盒子阴影、文本阴影的使用)等资源,欢迎您收藏本站,我们将为您提供最新的CSS3给div或者文字添加阴影(盒子阴影、文本阴影的使用)资源
添加阴影效果以前只能使用图片来实现了,现在的css3功能非常的强大了,今天我们就一起来看关于CSS3给div或者文字添加阴影(盒子阴影、文本阴影的使用)的方法,具体的例子如下所示.

CSS3定义了两种阴影:盒子阴影和文本阴影。其中盒子阴影需要IE9及其更新版本,而文本阴影需要IE10及其更新版本。下面分别介绍两种阴影的使用:

1,盒子阴影

(1)盒子阴影的属性是 box-shadow


box-shadow:5px 5px 10px gray;

前两个值分别表示阴影水平方向和垂直方向的偏移量。

第三个值表示模糊距离。最后一个值是阴影颜色。
 
(2)盒子阴影是可以随着盒子形状而自动变化的

原文:CSS3 - 给div或者文字添加阴影(盒子阴影、文本阴影的使用)


(3)如果盒子下面有内容的话,可以使用 rgba() 函数,将阴影颜色设置为半透明的

原文:CSS3 - 给div或者文字添加阴影(盒子阴影、文本阴影的使用)


box-shadow:5px 5px 10px rgba(0,0,0,0.5);

(4)伸展范围设置
在模糊距离后面还可以添加一个值,表示伸展范围(spread)。用来增大模糊边界之前的实心颜色面积。

下面昨天是未设置伸展范围,右图设置了:

原文:CSS3 - 给div或者文字添加阴影(盒子阴影、文本阴影的使用)


box-shadow:5px 5px 10px 5px gray;

(5)在颜色后面加上 inset 用来创建内部阴影

原文:CSS3 - 给div或者文字添加阴影(盒子阴影、文本阴影的使用)


box-shadow:5px 5px 10px gray inset;

2,文本阴影

文本阴影的属性是 text-shadow。其值顺序与盒子阴影有所不同,先要指定颜色,接着才是水平和垂直偏移量,最后是模糊值。
原文:CSS3 - 给div或者文字添加阴影(盒子阴影、文本阴影的使用)


text-shadow: gray 10px 10px 7px;

您可能感兴趣的文章:
CSS3给div或者文字添加阴影(盒子阴影、文本阴影的使用)
canvas如何设置阴影?canvas设置阴影的方法
CSS3 box-shadow 属性
CSS3 box-shadow 属性
CSS3 text-shadow 属性
CSS3 text-shadow 属性
CSS3 边框
css3特效 box-shadow制作loading图教程
photoshop制作逼真的弥散阴影效果教程
开发人员最常用的HTML5/CSS3代码生成器

[关闭]