教程:盒阴影、文本阴影

嗨!大家好

今天我们来分享——盒子阴影、文本阴影

先来看下案例

案例效果

1>   box-shadow:none (无阴影)  |   shadow  (阴影)

       使用方法   shadow:X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜⾊] [投影⽅式]

                  例:Box-shadow:  3px   3px   3px  5px  颜色  Inset

*注释

          inset :置对象的阴影类型为内阴影。该值为空时,则对象的阴影类型为外阴影 (inset可以写在参数的第⼀个或者最后⼀个,其他位置⽆效;

         <length>①: 第1个长度值⽤来设置对象的阴影⽔平偏移值。⽔平偏移量 正值向右 负值向左;

         <length>②: 第2个长度值⽤来设置对象的阴影垂直偏移值。垂直偏移量 正值向下 负值向上;

         <length>③: 如果提供了第3个长度值则⽤来设置对象的阴影模糊值。模糊度是不能为负值;

         <length>④: 如果提供了第4个长度值则⽤来设置对象的阴影外延值。不允许负值

         <color>: 设置对象的阴影的

注意哦:设置边框阴影不会改变盒⼦的⼤⼩,即不会影响其兄弟元素的布局。可以设置多重边框阴影,实现更好的效果,增强⽴体感,符合渐进

                增强,实际开发中可以⼤胆

2>   text-shadow:none   |   shadow

 使用方法   shadow:X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜⾊] [投影⽅式]

 例:Box-shadow:  3px   3px     5px  颜色  

         <length>①: 第1个长度值⽤来设置对象的阴影⽔平偏移值。⽔平偏移量 正值向右 负值向左;

         <length>②: 第2个长度值⽤来设置对象的阴影垂直偏移值。垂直偏移量 正值向下 负值向上;

         <length>③: 如果提供了第3个长度值则⽤来设置对象的阴影模糊值。模糊度是不能为负值;

         <color>: 设置对象的阴影的

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

推荐阅读更多精彩内容

  • text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果。随着HTML5和CSS...
    arlene112阅读 6,716评论 0 1
  • 1、属性选择器:id选择器 # 通过id 来选择类名选择器 . 通过类名来选择属性选择器 ...
    Yuann阅读 5,561评论 0 7
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 6,831评论 0 11
  • 一、CSS入门 1、css选择器 选择器的作用是“用于确定(选定)要进行样式设定的标签(元素)”。 有若干种形式的...
    宠辱不惊丶岁月静好阅读 5,542评论 0 6
  • 今天是星期天,先生夜班在家休息。我先把女儿送到蝈蝈书店,女儿对我说,妈妈,你去吧,我支持你,我自己在书店看书就可以...
    郑会敏阅读 1,930评论 0 3