css如何给盒子底部加阴影,CSS3 | 您所在的位置:网站首页 › html给文字添加阴影 › css如何给盒子底部加阴影,CSS3 |
CSS3 - 给div或者文字添加阴影(盒子阴影、文本阴影的使用) CSS3定义了两种阴影:盒子阴影和文本阴影。其中盒子阴影需要IE9及其更新版本,而文本阴影需要IE10及其更新版本。下面分别介绍两种阴影的使用: 1,盒子阴影 (1)盒子阴影的属性是 box-shadow 1 box-shadow:5px 5px 10px gray; 前两个值分别表示阴影水平方向和垂直方向的偏移量。 第三个值表示模糊距离。最后一个值是阴影颜色。 (2)盒子阴影是可以随着盒子形状而自动变化的 原文:CSS3 - 给div或者文字添加阴影(盒子阴影、文本阴影的使用) (3)如果盒子下面有内容的话,可以使用 rgba() 函数,将阴影颜色设置为半透明的 原文:CSS3 - 给div或者文字添加阴影(盒子阴影、文本阴影的使用) 1 box-shadow:5px 5px 10px rgba(0,0,0,0.5); (4)伸展范围设置 在模糊距离后面还可以添加一个值,表示伸展范围(spread)。用来增大模糊边界之前的实心颜色面积。 下面昨天是未设置伸展范围,右图设置了: 原文:CSS3 - 给div或者文字添加阴影(盒子阴影、文本阴影的使用) 1 box-shadow:5px 5px 10px 5px gray; (5)在颜色后面加上 inset 用来创建内部阴影 原文:CSS3 - 给div或者文字添加阴影(盒子阴影、文本阴影的使用) 1 box-shadow:5px 5px 10px gray inset; 2,文本阴影 文本阴影的属性是 text-shadow。其值顺序与盒子阴影有所不同,先要指定颜色,接着才是水平和垂直偏移量,最后是模糊值。 原文:CSS3 - 给div或者文字添加阴影(盒子阴影、文本阴影的使用) 1 text-shadow: gray 10px 10px 7px; |
CopyRight 2018-2019 实验室设备网 版权所有 |