box-shadow


每个盒子都有阴影,只是在没有设置X轴和Y轴的偏移量的时候阴影是看不见的(可以理解为压在盒子下面)。来根据这张图来说说:

  1. X轴和Y轴的偏移量就是把阴影向左边和下边拉了多少距离。这两个值为负数的时候,就是向右和向上拉
  2. 阴影模糊半径相当于把阴影的从边向阴影的中心模糊,边上最模糊,中心模糊程度最低。但是不能为负值
  3. 阴影扩展半径是给阴影增加多少半径。允许负值,正曾负减。比如原来的盒子的宽和高都是200px,现在设置阴影扩展半径为50px,那么现在阴影的宽高就是300px。
  4. 可以添加多个阴影,用逗号隔开。比如2px 4px 2px red, 4px 4px blue inset;
    inset的意思是内凹

当只有三个值的时候,第三个值代表模糊距离。!!!

模糊距离不能为负值!!!

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

推荐阅读更多精彩内容

  • box-shadow是向盒子添加阴影。支持添加一个或者多个。(可多写几个小例子及时测试阴影位置) 1.语法: bo...
    Mandy_jin阅读 3,077评论 0 0
  • text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果。随着HTML5和CSS...
    arlene112阅读 6,720评论 0 1
  • 1、属性选择器:id选择器 # 通过id 来选择类名选择器 . 通过类名来选择属性选择器 ...
    Yuann阅读 5,561评论 0 7
  • 我对任何美的东西都会本能地生出一种爱,在CSS的世界里,凡和色彩渐变等沾边的属性都是我的菜。因此box-shado...
    张歆琳阅读 11,677评论 6 33
  • text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果。 文字阴影的结构是按照...
    may_mico阅读 5,625评论 0 2