zoukankan      html  css  js  c++  java
  • box-shadow单边阴影

    一道笔试题引发的思考。

    我们写 css 的时候经常会用到 box-shadow 这个属性,这个属性是盒子阴影,但是因为阴影扩散的原因,经常是四周都出现阴影(如下所示),然后我们如果要只有一边有阴影的效果应该怎么做呢?

    <!-- log -->
    <style>
      #shadow {
         100px;
        height: 100px;
        border: 1px solid black;
        box-shadow: 10px 0px 5px black;
      }
    </style>
    <div id="shadow"></div>
    

    考虑 box-shadow 各位置参数的含义

    说明
    h-shadow 必需的。水平阴影的位置。允许负值
    v-shadow 必需的。垂直阴影的位置。允许负值
    blur 可选。模糊距离
    spread 可选。阴影的大小
    color 可选。阴影的颜色。
    inset 可选。从外层的阴影(开始时)改变阴影内侧阴影

    其中阴影大小可以为负值,意思是减少指定数值的阴影半径,则只需要让第四个数值为负即可。

    <!-- log-after -->
    <style>
      #shadow-oneside {
         100px;
        height: 100px;
        border: 1px solid black;
        box-shadow: 10px 0px 5px -5px black; /* 第四个数值为负 */
      }
    </style>
    <div id="shadow-oneside"></div>
    
  • 相关阅读:
    Linux常用命令-学习笔记
    Linux 输入输出重定向
    Linux 网卡配置参数
    JS Promise对象学习
    Linux用户身份与文件权限学习笔记
    4、点击事件
    3、自定义按压效果
    2、自定义背景形状
    1、文字大小,颜色
    5、跑马灯
  • 原文地址:https://www.cnblogs.com/oceans/p/13713026.html
Copyright © 2011-2022 走看看