CSS 如何实现让div的四个边框都有阴影的效果?

CSS 实现让div的四个边框都有阴影的效果:首先:HTML代码 CSS 如何实现让div的四个边框都有阴影的效果? CSS代码body{background:#f00;} html{background:#f00;}/*html加背景色*/ .g1{ width:500px;height:500px;border:2px solid #fff;margin:30px auto;background-color:#fff;box-siz...
CSS 如何实现让div的四个边框都有阴影的效果?
CSS 实现让div的四个边框都有阴影的效果:
首先:
HTML代码
<h1>CSS 如何实现让div的四个边框都有阴影的效果?</h1>
<div class="g1">
<div class="g2"></div>
</div>
CSS代码body{background:#f00;}
html{background:#f00;}/*html加背景色*/
.g1{
width:500px;
height:500px;
border:2px solid #fff;
margin:30px auto;
background-color:#fff;
box-sizing:border-box;
}
.g2{
width:400px;
height:400px;
margin:50px auto;
border:2px solid #000;
box-shadow:5px 5px 5px #000,5px -5px 5px #000,-5px 5px 5px #000,-5px -5px 5px #000;
}

具体效果:

2022-11-16
mengvlog 阅读 8 次 更新于 2025-06-20 00:24:54 我来答关注问题0
檬味博客在线解答立即免费咨询

CSS相关话题

Copyright © 2023 WWW.MENGVLOG.COM - 檬味博客
返回顶部