CSS3文本阴影、盒子阴影

CSS3文本阴影、盒子阴影


在我们平时写页面时会遇到一些元素有阴影,内容有阴影的页面效果,对于初学者来说可能会用一些背景图或者定位来解决其中一部分阴影效果,但是并不能解决全部,本篇文章给大家介绍一下CSS3文本阴影、盒子阴影以方便以后遇到阴影效果多一种解决办法。


在css3里面文本阴影和盒子阴影都是有多个属性值得,每个属性值代表的意思都是不同的,可设置的值也是不同的


首先介绍的是文本阴影属性text-shadow:

文本阴影的写法

text-shadow:20px 20px 20px burlywood;


text-shadow第一个值

在text-shadow属性里第一个值代表的是水平方向的距离,这个值是必须有的而且支持负值

当我们改变第一个值得大小时为正值时阴影会向右发生移动


为负值时阴影会向左发生移动



text-shadow第二个值

在text-shadow属性里第二个值代表的是垂直方向的距离,这个值是必须有的而且支持负值

当我们改变第二个值得大小时为正值时阴影会向下发生移动


为负值时阴影会向上发生移动


text-shadow第三个值

在text-shadow属性里第三个值代表的是设置阴影清晰和模糊程度的值,这个值不支持负值

当我们改变第三个值得大小发生改变时阴影会随着值得大小显示模糊程度


注意,此值不能为负值当为负值时,text-shadow属性就会出现问题不显示了


text-shadow第四个值

在text-shadow属性里第四个值代表的是设置阴影颜色的值,这个值支持英文单词和#的写法

当我们改变第四个值的属性值时阴影的颜色会随着我们设置的颜色来显示



特别强调:第一个值和第二个值得位置不能互换;

书写多个文本阴影:

当给同一个文字设置多个阴影的时候,阴影和阴影之间用逗号隔开:

如:text-shadow:0 0 4px white,0 -5px 4px #ff3,2px -10px 6px #fd3,-2px -15px 11px #f80,2px -25px 18px #f20;



再次说明:水平、垂直阴影的位置允许负值,可进行多阴影设置(逗号分隔的方式)



盒子阴影属性box-shadow

box-shadow写法

box-shadow: 10px 10px 10px 10px greenyellow;


box-shadow第一个值

box-shadow的第一个值和文本属性的第一个值所代表的定义是一样的

当我们改变第一个值得大小时为正值时阴影会向右发生移动


为负值是会向左移动


box-shadow第二个值

box-shadow的第二个值和文本属性的第二个值所代表的定义也是一样的

当我们改变第二个值得大小时为正值时阴影会向下发生移动



为负值是会向上移动


box-shadow第三个值

box-shadow的第三个值和文本属性的第三个值所代表的定义也是一样的

当我们改变第三个值得大小发生改变时阴影会随着值得大小显示模糊程度(此值不可为负值)


box-shadow第四个值

box-shadow是有5个值的,第四个值代表的是盒子阴影区域的大小,第五个值代表的才是阴影颜色

当我们改变第四个值的时候盒子阴影区域会随着我们的改变,而变换大小


此值可以存在负值,如果负值过小,会被盒子盖在下面


box-shadow第五个值

box-shadow第5个值会随着我们设置的颜色来改变


box-shadow还有个inset值,这个值是设置阴影显示区域的,表示的是在内测显示,默认识外侧显示


内测显示时默认会从上方显示,刚好和外侧相反,此时我们把水平和垂直方向的值改为负值就可以使阴影在下方显示



同文本阴影当给一个盒子设置多个阴影的时候,阴影和阴影之间用逗号隔开:

box-shadow: 10px 10px 5px 10px #888888 inset,10px 10px 5px 10px #888888 inset,10px 10px 5px 10px #888888 inset;


©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果。随着HTML5和CSS...
    arlene112阅读 2,299评论 0 1
  • 1、属性选择器:id选择器 # 通过id 来选择类名选择器 . 通过类名来选择属性选择器 ...
    Yuann阅读 1,671评论 0 7
  • 一、CSS入门 1、css选择器 选择器的作用是“用于确定(选定)要进行样式设定的标签(元素)”。 有若干种形式的...
    宠辱不惊丶岁月静好阅读 1,650评论 0 6
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,350评论 0 11
  • 1.CSS3 边框 border-radius CSS属性用来设置边框圆角。当使用一个半径时确定一个圆形;当使用两...
    garble阅读 696评论 0 0