首页 > 其他分享 >94款超级漂亮的box-shadow样式 复制即用

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

时间:2023-01-16 18:03:42浏览次数:52  
标签:box code rgba shadow 0px 94 css


样式如图,代码已在结尾,按照序号复制粘贴便可直接用了:

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

代码:

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;


标签:box,code,rgba,shadow,0px,94,css
From: https://blog.51cto.com/u_15942590/6010668

相关文章

  • mysql主从同步失败 错误码1594
    起因某日mysql主从同步发生了错误,此时发现从库不再执行同步操作,于是在从库执行showslavestatus\G发现如下错误:上图中标红色的需要重点关注。解决办法之前出现其他常......
  • ncnn 加载 bin文件时,出错 报异常 0xC0000094:Integer division by zero。
    这次转yolov8.pt到onnx到ncnn,调用ncnn,加载bin文件时出错报异常0xC0000094:Integerdivisionbyzero。解决方式:导出onnx时,加 device="cpu" ......
  • 电动自行车出欧盟需要做CE认证,EN15194标准测试
    电动滑板是以传统人力滑板为基础,加上电力套件的交通工具,目前的电动滑板一般分为双轮驱动或单轮驱动。电动滑板出口欧盟是需要办理CE认证的,电动滑板CE认证标准为EN15194:201......
  • 15.PyQt5【基本组件】复选按钮-QCheckBox
    一、前言当文本标签前出现一个矩形框时QCheckBox对象被添加到父窗口。就像QRadioButton一样,它也是一个可选择的按钮。它的常见用途是在要求用户选择一个或多个可用选项......
  • 16.PyQt5【基本组件】下拉列表-QComboBox
    一、前言QComboBox提供一个下拉列表,其中包含可供选择的项目。只显示当前选定的项目所需的窗体上的最小屏幕空间。二、学习目标1.QComboBox常用方法2.QComboBox常用信......
  • 19.PyQt5【基本组件】消息对话框-QMessageBox
    一、前言QMessageBox是一种常用的模态对话框,用于显示一些信息性消息,并可选择要求用户通过单击其上的任何一个标准按钮来做出响应。每个标准按钮都有一个预定义的标题、一......
  • 26.PyQt5【高级组件】工具箱-QToolBox
    一、前言QToolBox控件提供了一个可进行一列选项卡操作方式,在每个选项卡内可包含不同的控件布局。QToolBox将选项卡一个一个地显示,当前项目显示在当前选项卡下方。每个选项......
  • 4.PyQt5【布局组件】水平布局-QHBoxLayout
    一、前言QLayout是Qt中布局管理器的抽象基类,通过对QLayout的继承,实现了功能各异且互补的布局管理器。布局管理器不是界面组件,而是界面组件的定位策略;任意容器类型的组件都......
  • 5.PyQt5【布局组件】垂直布局-QVBoxLayout
    一、前言本节我们介绍布局组件中的垂直布局QVBoxLayout。二、学习目标1.QVBoxLayout垂直布局应用三、知识点1.【QVBoxLayout垂直布局应用】垂直布局将多个控件在垂直......
  • 8.PyQt5【布局组件】容器布局-QGroupBox
    一、前言本节我们介绍布局组件中的容器布局QGroupBox。二、学习目标1.QGroupBox容器布局的应用三、知识点1.【QGroupBox容器布局的应用】容器布局将容器控件(Containe......