CSS_盒子阴影

盒子阴影

属性名: box-shadow

• box-shadow: 10px 20px 30px 40px #ccc;

  • 10px: 水平位移 +:右 -:左

  • 20px: 垂直位移 +:下 -:上

  • 30px: 模糊度 不能为负数

  • 40px: 阴影面积

    • 0px 代表本身大小
    • >0px 阴影面积越大
    • <0px 阴影面积比原大小还小
    • 可省略, 默认为0px

  • #ccc: 阴影颜色

<style>
        body{
            background: #f5f5f5;
        }
        .box{
            width: 200px;
            height: 200px;
            border: 2px solid red;
            box-shadow: 10px 20px 30px 40px #ccc;
        }
        .goods{
            width: 234px;
            height: 300px;
            background: #fff;
            margin: 100px auto;
            transition: all .3s;
        }
        .goods:hover{
            box-shadow: 0px 20px 30px 0px #ccc;
            transform: translateY(-5px);
        }
</style>

<div class="box"></div>
<div class="goods"></div>