首页 > 教程 > 文章 > CSS > 正文

Css边框阴影:box-shadow属性

转载2020-02-28 13:55:09 0 621

二. box-shadow属性值的详细解析

根据前面的语法规则,box-shadow可以有六个值。接下来我们来聊一聊box-shadow属性里的每个值都怎么用

1. h-shadow【必需】

这个值代表的是阴影在x轴上的阴影位置。可以是负值。

当它为正值的时候表示向右位移一定的距离【出现在元素的右边】,负值表示向左位移【出现在元素的左边】。这个距离的单位可以是px、em或者rem;

需要注意的是:h-shadow是必需的,不能省略!

box-shadow: 10px 0px 10px rgba(0,0,0,0.9) /*阴影出现在元素的右侧*/

box-shadow: -10px 0px 10px rgba(0,0,0,0.9) /*阴影出现在元素的左侧*/

2. v-shadow【必需】

这个值表示阴影在y轴上的位置。也可以是负值。

当值为负的时候表示向上偏移一定的距离【出现在元素的上方】;值为正的时候表示向下偏移一定的距离【出现的元素的下方】

box-shadow: 0px -20px 10px rgba(0,0,0,0.9)/*阴影出现在元素上方*/ box-shadow: 0px 20px 10px rgba(0,0,0,0.9)/*阴影出现在元素下方*/

3. blur【可选】

blur指的是阴影的模糊半径。这个值使得阴影部分的过渡看起来更柔和。我们可以试一试不同blur值对阴影效果的影响:

box-shadow: 10px 10px 5px rgba(0,0,0,0.9) /*blur值为5px*/ box-shadow: 10px 10px 10px rgba(0,0,0,0.9)/*blur值为10px*/box-shadow: 10px 10px 15px rgba(0,0,0,0.9)/*blur值为15px*/

将blur值为5px、10px、15px 的效果图依次从左往右排列,可以看出来随着模糊半径数值的增大,阴影的模糊程度越高。

4. spread【可选】

spread表示的是阴影的半径。我在网上看到有人对spread和blur的区别发出疑问,其实很简单:blur用于描述模糊半径,它的值决定了阴影的模糊程度;而spread是表示阴影所占区域的大小,这是两个不同的概念。

我们来试试其他属性值相同的情况下,spread不同时阴影的表现:

box-shadow: 10px 10px 10px 5px rgba(0,0,0,0.9);/*阴影半径为5px*/ box-shadow: 10px 10px 10px 15px rgba(0,0,0,0.9);/*阴影半径为15px*/ box-shadow: 10px 10px 10px 25px rgba(0,0,0,0.9);/*阴影半径为25px*/

将spread的值为5px、15px、25px的效果图依次 从左向右排列,很明显阴影在逐渐变大

以上就是《Css边框阴影:box-shadow属性》的详细内容,更多请关注 “设计者在线”其它相关文章!

申明:本站文章多来自互联网,如果侵犯了你的权益,请联系站长及时处理!谢谢!!

  • 相关标签:
  • 本文由 设计者在线 原创发布,转载请注明出处,感谢您的尊重!
  • 相关文章

    相关视频


    网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论 条评论
  • 专题推荐

    • 帝国系统

      简介:帝国CMS系统教程,开发技巧

    • JQUERY

      简介:春节好春节好春节好春节好春节好春节好春节好春节好

    • 不忘初心牢记使命教育活动

      简介:不忘初心牢记使命教育活动

    • 我们的生活

      简介:我们的生活我们的生活我们的生活我们的生活我们的生活我们的生活我们的生活我们的生活我们的生活我们的生活我们的生活我们的生活我们的生活

    • 明天会更好

      简介:明天会更好明天会更好明天会更好明天会更好明天会更好明天会更好明天会更好

    推荐视频教程
    视频分类
    [!--date--]Y-m-d[!--date--]