94款超级漂亮的box-shadow样式 复制即用

这篇具有很好参考价值的文章主要介绍了94款超级漂亮的box-shadow样式 复制即用。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

样式如图,代码已在结尾,按照序号复制粘贴便可直接用了:
94款超级漂亮的box-shadow样式 复制即用

代码:文章来源地址https://www.toymoban.com/news/detail-510611.html

box-shadow #0 css code ====> box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
box-shadow #1 css code ====> box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
box-shadow #2 css code ====> box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
box-shadow #3 css code ====> box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
box-shadow #4 css code ====> box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
box-shadow #5 css code ====> box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
box-shadow #6 css code ====> box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
box-shadow #7 css code ====> box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px, rgb(51, 51, 51) 0px 0px 0px 3px;
box-shadow #8 css code ====> box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
box-shadow #9 css code ====> box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
box-shadow #10 css code ====> box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
box-shadow #11 css code ====> box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
box-shadow #12 css code ====> box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
box-shadow #13 css code ====> box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
box-shadow #14 css code ====> box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
box-shadow #15 css code ====> box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
box-shadow #16 css code ====> box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
box-shadow #17 css code ====> box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
box-shadow #18 css code ====> box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
box-shadow #19 css code ====> box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
box-shadow #20 css code ====> box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
box-shadow #21 css code ====> box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;
box-shadow #22 css code ====> box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
box-shadow #23 css code ====> box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
box-shadow #24 css code ====> box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
box-shadow #25 css code ====> box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
box-shadow #26 css code ====> box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
box-shadow #27 css code ====> box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
box-shadow #28 css code ====> box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
box-shadow #29 css code ====> box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
box-shadow #30 css code ====> box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
box-shadow #31 css code ====> box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
box-shadow #32 css code ====> box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
box-shadow #33 css code ====> box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
box-shadow #34 css code ====> box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
box-shadow #35 css code ====> box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
box-shadow #36 css code ====> box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
box-shadow #37 css code ====> box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
box-shadow #38 css code ====> box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
box-shadow #39 css code ====> box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
box-shadow #40 css code ====> box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
box-shadow #41 css code ====> box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset;
box-shadow #42 css code ====> box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1px 0px;
box-shadow #43 css code ====> box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
box-shadow #44 css code ====> box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
box-shadow #45 css code ====> box-shadow: rgba(0, 0, 0, 0.2) 0px 18px 50px -10px;
box-shadow #46 css code ====> box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px;
box-shadow #47 css code ====> box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;
box-shadow #48 css code ====> box-shadow: rgba(240, 46, 170, 0.4) -5px 5px, rgba(240, 46, 170, 0.3) -10px 10px, rgba(240, 46, 170, 0.2) -15px 15px, rgba(240, 46, 170, 0.1) -20px 20px, rgba(240, 46, 170, 0.05) -25px 25px;
box-shadow #49 css code ====> box-shadow: rgba(240, 46, 170, 0.4) 0px 5px, rgba(240, 46, 170, 0.3) 0px 10px, rgba(240, 46, 170, 0.2) 0px 15px, rgba(240, 46, 170, 0.1) 0px 20px, rgba(240, 46, 170, 0.05) 0px 25px;
box-shadow #50 css code ====> box-shadow: rgba(240, 46, 170, 0.4) 5px 5px, rgba(240, 46, 170, 0.3) 10px 10px, rgba(240, 46, 170, 0.2) 15px 15px, rgba(240, 46, 170, 0.1) 20px 20px, rgba(240, 46, 170, 0.05) 25px 25px;
box-shadow #51 css code ====> box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px;
box-shadow #52 css code ====> box-shadow: rgba(67, 71, 85, 0.27) 0px 0px 0.25em, rgba(90, 125, 188, 0.05) 0px 0.25em 1em;
box-shadow #53 css code ====> box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
box-shadow #54 css code ====> box-shadow: rgba(27, 31, 35, 0.04) 0px 1px 0px, rgba(255, 255, 255, 0.25) 0px 1px 0px inset;
box-shadow #55 css code ====> box-shadow: rgba(3, 102, 214, 0.3) 0px 0px 0px 3px;
box-shadow #56 css code ====> box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
box-shadow #57 css code ====> box-shadow: rgba(0, 0, 0, 0.2) 0px 12px 28px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset;
box-shadow #58 css code ====> box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;
box-shadow #59 css code ====> box-shadow: rgba(33, 35, 38, 0.1) 0px 10px 10px -10px;
box-shadow #60 css code ====> box-shadow: blue 0px 0px 0px 2px inset, rgb(255, 255, 255) 10px -10px 0px -3px, rgb(31, 193, 27) 10px -10px, rgb(255, 255, 255) 20px -20px 0px -3px, rgb(255, 217, 19) 20px -20px, rgb(255, 255, 255) 30px -30px 0px -3px, rgb(255, 156, 85) 30px -30px, rgb(255, 255, 255) 40px -40px 0px -3px, rgb(255, 85, 85) 40px -40px; border-radius: 0px;
box-shadow #61 css code ====> box-shadow: rgb(85, 91, 255) 0px 0px 0px 3px, rgb(31, 193, 27) 0px 0px 0px 6px, rgb(255, 217, 19) 0px 0px 0px 9px, rgb(255, 156, 85) 0px 0px 0px 12px, rgb(255, 85, 85) 0px 0px 0px 15px; border-radius: 0px;
box-shadow #62 css code ====> box-shadow: rgb(204, 219, 232) 3px 3px 6px 0px inset, rgba(255, 255, 255, 0.5) -3px -3px 6px 1px inset;
box-shadow #63 css code ====> box-shadow: rgba(136, 165, 191, 0.48) 6px 2px 16px 0px, rgba(255, 255, 255, 0.8) -6px -2px 16px 0px;
box-shadow #64 css code ====> box-shadow: rgba(17, 17, 26, 0.1) 0px 1px 0px;
box-shadow #65 css code ====> box-shadow: rgba(17, 17, 26, 0.05) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 0px 8px;
box-shadow #66 css code ====> box-shadow: rgba(17, 17, 26, 0.1) 0px 0px 16px;
box-shadow #67 css code ====> box-shadow: rgba(17, 17, 26, 0.05) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px;
box-shadow #68 css code ====> box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px;
box-shadow #69 css code ====> box-shadow: rgba(17, 17, 26, 0.1) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 48px;
box-shadow #70 css code ====> box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px;
box-shadow #71 css code ====> box-shadow: rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px, rgba(17, 17, 26, 0.1) 0px 24px 80px;
box-shadow #72 css code ====> box-shadow: rgba(50, 50, 105, 0.15) 0px 2px 5px 0px, rgba(0, 0, 0, 0.05) 0px 1px 1px 0px;
box-shadow #73 css code ====> box-shadow: rgba(0, 0, 0, 0.15) 0px 15px 25px, rgba(0, 0, 0, 0.05) 0px 5px 10px;
box-shadow #74 css code ====> box-shadow: rgba(0, 0, 0, 0.15) 2.4px 2.4px 3.2px;
box-shadow #75 css code ====> box-shadow: rgba(0, 0, 0, 0.15) 0px 3px 3px 0px;
box-shadow #76 css code ====> box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 12px;
box-shadow #77 css code ====> box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px;
box-shadow #78 css code ====> box-shadow: rgba(0, 0, 0, 0.18) 0px 2px 4px;
box-shadow #79 css code ====> box-shadow: rgba(0, 0, 0, 0.1) -4px 9px 25px -6px;
box-shadow #80 css code ====> box-shadow: rgba(0, 0, 0, 0.2) 0px 60px 40px -7px;
box-shadow #81 css code ====> box-shadow: rgba(0, 0, 0, 0.4) 0px 30px 90px;
box-shadow #82 css code ====> box-shadow: rgba(0, 0, 0, 0.56) 0px 22px 70px 4px;
box-shadow #83 css code ====> box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px;
box-shadow #84 css code ====> box-shadow: rgba(255, 255, 255, 0.2) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.9) 0px 0px 0px 1px;
box-shadow #85 css code ====> box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
box-shadow #86 css code ====> box-shadow: rgba(0, 0, 0, 0.09) 0px 3px 12px;
box-shadow #87 css code ====> box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px; border-radius: 35px;
box-shadow #88 css code ====> box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px;
box-shadow #89 css code ====> box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
box-shadow #90 css code ====> box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgb(209, 213, 219) 0px 0px 0px 1px inset;
box-shadow #91 css code ====> box-shadow: rgba(0, 0, 0, 0.35) 0px -50px 36px -28px inset;
box-shadow #92 css code ====> box-shadow: rgba(9, 30, 66, 0.25) 0px 1px 1px, rgba(9, 30, 66, 0.13) 0px 0px 1px 1px;
box-shadow #93 css code ====> box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;

到了这里,关于94款超级漂亮的box-shadow样式 复制即用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • CSS系列之盒子阴影box-shadow(CSS3)

    用于在元素的框架上添加阴影效果。你可以在同一个元素上设置多个阴影效果,并用逗号将他们分隔开。该属性可设置的值包括 阴影的X轴偏移量 、 Y轴偏移量 、 模糊半径 、 扩散半径 和 颜色 。 当给出两个、三个或四个 length 值时。 如果只给出两个值, 那么这两个值将会被

    2023年04月08日
    浏览(48)
  • 【CSS】盒子模型阴影 ( box-shadow: 水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内外阴影; )

    盒子模型阴影 使用 如下 属性设置 : 只有 前两个阴影 , 水平阴影 和 垂直阴影 必须写 , 后面的四个值可以省略 ; 标准的阴影代码 : 展示效果 : 水平阴影代码 : 只修改第一个属性值 ; 展示效果 : 水平阴影代码2 : 只修改第一个属性值 ; 展示效果 : 垂直阴影代码 : 只修改第二个属

    2024年02月12日
    浏览(47)
  • 我不允许你还不知道CSS的filter的drop-shadow阴影用法以及与box-shadow的区别详解

    这里有两个图片的阴影,你觉得哪个好看? 一个是使用box-shadow另一个是使用filter: drop-shadow 该CSS的filter属性可以实现很多效果 (一)filter: blur(5px) // 高斯模糊,值越大越模糊 (二)filter: brightness(150%) // 图片的亮度百分比,以100%为分界,100%以上越亮,100%以下越暗 (三)f

    2024年02月13日
    浏览(54)
  • Web Components详解-Shadow DOM样式控制

    本文继续Web Components系列文章,介绍一下Shadow DOM的样式及选择器。 Shadow DOM的样式与外界是隔离的,即自定义元素的样式只会影响到Shadow DOM内部,不会影响到外部的页面元素,这点在之前有说到过。那么有什么办法可以在Shadow DOM中使用全局样式?样式选择器又有什么异同呢?

    2024年02月08日
    浏览(34)
  • 常用正则表达式,复制粘贴即用

    目录 校验密码强度 校验中文 由数字、英文字母、下划线组成的字符串  校验邮箱地址 校验身份证号  校验日期 校验金额 校验手机号 检查IE版本 校验IP地址  校验URL  校验文件路径及扩展名  文件路径的正则表达式:  扩展名的正则表达式: 提取Hex颜色值 匹配HTML标签 密码

    2024年01月23日
    浏览(45)
  • Linux环境使用docker安装MySQL(简单粗暴,复制即用)

    –name指定容器名字 -v目录挂载 -p指定端口映射 -e设置mysql参数 -d后台运行 将以下内容复制到文本

    2024年01月17日
    浏览(39)
  • Linux系统使用docker部署Geoserver(简单粗暴,复制即用)

    **注意:**此处有坑,网上很多教程并没有指定管理用户,此版本部署时就遇到了默认账户admin登陆不上去的问题,指定后可解决 账户名:admin 账户密码:geoserver 数据存储 - 添加新的数据存储 - shp数据 - 选择挂载的目录中的数据项 图层 - 添加新的资源 - 添加图层 - 发布

    2024年01月18日
    浏览(37)
  • wx.getPrivacySetting 小程序隐私保护指引的使用(复制粘贴即用)

    创建privacyPopup 组件 privacyPopup.js privacyPopup.json privacyPopup.wxml privacyPopup.wxss 效果如下: 注意: 如果wx.getPrivacySetting中 needAuthorization始终返回的是 false , 则需要在app.json中添加\\\" usePrivacyCheck \\\": true,,如图所示: 引入方式: 在需要使用的页面的wxml文件中,直接 ****即可,注意组件需

    2024年02月05日
    浏览(43)
  • uniapp - 实现微信小程序电子签名板,横屏手写姓名签名专用写字画板(详细运行示例,一键复制开箱即用)

    实现了在uniapp项目中,微信小程序平台流畅的写字签名板(也可以绘图)功能源码,复制粘贴,改改样式几分钟即可搞定! 支持自动横屏、持预览,真机运行测试非常流畅不卡顿。 如下代码所示。

    2024年02月16日
    浏览(173)
  • 【unity小技巧】unity最完美的CharacterController 3d角色控制器,实现移动、跳跃、下蹲、奔跑、上下坡,复制粘贴即用

    其实一开始我是不打算写的,我感觉这种简单的功能,原以为网上随便一搜一大堆,但是我实际去搜发现网上很多都是 复制粘贴 ,要么 没有实操过 ,要么就是 功能不全 ,或者毫无解释的把代码丢出来,我自以为简单的3D角色控制,我整整花了3-4天才研究明白(虽然每天只

    2024年02月03日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包