css--内凹圆角

最新推荐文章于 2025-05-27 21:41:06 发布

转载最新推荐文章于 2025-05-27 21:41:06 发布 · 87 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/LiuJL/p/9082846.html

本文介绍了一种使用纯CSS实现带有圆形阴影效果的盒子的方法。通过设置绝对定位元素及使用box-shadow属性，可以轻松创建出美观且实用的阴影效果。文章详细展示了如何利用CSS属性如border-radius、box-shadow等来定制样式。

:root {
　　--r: 2em;
}
.box {
　　overflow: hidden;
　　position: relative;
　　margin: .25em auto;
　　min-width: 15em;
　　max-width: 15em;
　　min-height: 10em;
　　border-radius: 1em;
}
.box:before {
　　position: absolute;
　　margin: calc(var(--r) * -1);
　　padding: var(--r);
　　border-radius: 50%;
　　box-shadow: 0 0 0 300px rgba(33,33,33,0.4);
　　-webkit-box-shadow: 0 0 0 300px rgba(33,33,33,0.4);