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;
box shadow怎么设置
(5)在颜⾊后⾯加上 inset ⽤来创建内部阴影
原⽂:CSS3 - 给div或者⽂字添加阴影(盒⼦阴影、⽂本阴影的使⽤)
1
box-shadow:5px 5px 10px gray inset;
2，⽂本阴影
⽂本阴影的属性是 text-shadow。其值顺序与盒⼦阴影有所不同，先要指定颜⾊，接着才是⽔平和垂直偏移量，最后是模糊值。
原⽂:CSS3 - 给div或者⽂字添加阴影(盒⼦阴影、⽂本阴影的使⽤)
1
text-shadow: gray 10px 10px 7px;

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。