CSS3 box-shadow阴影

box-shadow: color x-offset v-offset blur spred

  • color: 阴影的颜色
  • x-offset: 阴影水平距离; 0: 左右阴影平分;正值:阴影在对象的右侧;负值:阴影在对象的左侧;
  • v-offset: 阴影的垂直距离; 0: 上下阴影评分;正值:阴影在对象的下方;负值:阴影在对象的上方
  • blur: 阴影模糊距离; 0: 无阴影;只能为正值:值越大边缘越模糊
  • spred: 阴影尺寸; 正值: 阴影延展扩大;负值: 阴影缩小
案例
案例1:

    <div class="base" style="box-shadow: #ddd 0 0 10px 5px;"></div>

案例2:
    <div class="base" style="box-shadow: #ddd 5px 0 10px 5px;"></div>

案例3:
    <div class="base" style="box-shadow: #ddd -5px 0 10px 5px;"></div>

案例4:
    <div class="base" style="box-shadow: #ddd 0 5px 10px 5px;"></div>

案例5:
    <div class="base" style="box-shadow: #ddd 0 -5px 10px 5px;"></div>

案例6:
    <div class="base" style="box-shadow: #ddd 0 0 20px 5px;"></div>

案例7:
    <div class="base" style="box-shadow: #ddd 0 0 5px 10px;"></div>

posted @ 2018-10-24 21:04  Zero_追梦  阅读(725)  评论(0编辑  收藏  举报