css3单边阴影

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

  其实是解铃还须系铃人,我们需要对box-shadow其中的阴影半径做调整:x轴偏移值 y轴偏移值 模糊半径 阴影半径 || 颜色 insect,其中阴影半径可以为负值,意思是增加或减少指定数值的阴影半径


html & css

    <style>
        .box1{
            margin:10px 50px;
            width:100px;
            height:100px;
            border:1px solid grey;
            display:inline-block;
        }
        .box1{
            box-shadow: 5px 0px 5px -5px black;
        }
    </style>
</head>
<body>
    <div class="box1">

    </div>

</body>

效果

效果

其中还有什么两边阴影,三边阴影呀,不过有了这个参考,其余我觉得就很简单了

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值