zoukankan      html  css  js  c++  java
  • box-shadow 的参数(模糊距离与阴影尺寸)

    box-shadow :

    语法: box-shadow: h-shadow v-shadow blur spread color inset;
        注意参数顺序不要乱写,尽量标准,避免不必要的bug
        多个阴影间,逗号隔开

    那第三个参数(模糊距离)和第四个参数(阴影尺寸)你能搞清楚他们的区别吗?

    于是,做下对比:


    阴影尺寸:

    可见,它相当于增加了border的宽度。但不是border哦,与border不同,box-shadow并不占据空间。在一些渐进增强的地方可以用。


     模糊距离:

      在这里根据他的表现形式,我又叫他模糊半径

          他的效果是一个模糊的圆。

      具体大小与数值的关系我没去对比,按需调整。这里只是区分下样式效果。

      这是下面效果的效果图:可以看出模糊距离出来是个圆的效果

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Document</title>
        <style>
            .shadow {
                box-shadow:green 0 0 100px ;
                height: 100px;
                width: 100px;
                margin: 30px;
                float: left;
            }
            .shadow_inset{
                box-shadow:  0 0  100px red inset ;
                height: 100px;
                width: 100px;
                margin: 30px;
                float: left;
    
            }
        </style>
    </head>
    <body>
        <div class="shadow">
            1
        </div>
        <div class="shadow_inset">
            2
        </div>
    </body>
    </html>

    
    
    
  • 相关阅读:
    二次离线莫队
    串串题-各种算法的应用
    插头dp 笔记
    ST03模拟赛#1 比赛记录
    AtCoder Regular Contest 123 比赛记录(vp)
    冷门trick:线性区间单调求和
    dp优化瞎吹
    概率期望
    NOI挑战赛#2 (vp) 记录
    动态规划-线性dp-序列组成-5833. 统计特殊子序列的数目
  • 原文地址:https://www.cnblogs.com/nostic/p/5869686.html
Copyright © 2011-2022 走看看