首页 前端知识 css:阴影效果box-shadow

css:阴影效果box-shadow

2024-08-24 23:08:48 前端知识 前端哥 523 832 我要收藏

属性

box-shadow 属性值由四个参数组成:

  • 水平偏移量:表示阴影相对于元素的水平位置。
  • 垂直偏移量:表示阴影相对于元素的垂直位置。
  • 模糊度:表示阴影的模糊程度。
  • 颜色:表示阴影的颜色

示例

单个box-shadow

0px -2px 6px rgba(0, 0, 0, 0.5); (水平偏移为0表示不进行水平偏移;垂直为-2表示向上偏移2px;模糊度为6px;颜色为rgba(0, 0, 0, 0.5))

组合box-shadow

box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.5),
    /* 下方和右侧模糊 */
    0 -2px 6px rgba(0, 0, 0, 0.5),
    /* 上方模糊 */
     -2px 0 6px rgba(0, 0, 0, 0.5),
    /* 左侧模糊 */
    2px 0 6px rgba(0, 0, 0, 0.5)
    /* 右侧模糊 */
;

 

转载请注明出处或者链接地址:https://www.qianduange.cn//article/16768.html
标签
评论
发布的文章

安装Nodejs后,npm无法使用

2024-11-30 11:11:38

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!