html - 插入框阴影显示周围的边框并需要隐藏它
问题描述
我用 css 创建了一个 div 使它变成圆形,并添加了内框阴影
.circle {
width: 690px;
height: 690px;
background: #000;
border-radius: 50%;
box-shadow: inset 0 0 80px 50px rgba(255, 255, 255, 1);
position: absolute;
left: -100px;
top: -100px;
}
<div class="circle"></div>
解决方案
添加一个小填充并调整background-clip
:
.circle {
width: 690px;
height: 690px;
background: #000;
border-radius: 50%;
box-shadow: inset 0 0 80px 50px rgba(255, 255, 255, 1);
padding: 1px;
background-clip: content-box;
position: absolute;
left: -100px;
top: -100px;
}
<div class="circle"></div>
您也可以使用以下方法重新创建相同的内容radial-gradient
:
.circle {
width: 690px;
height: 690px;
background: radial-gradient(#000 57%,transparent 70%);
border-radius: 50%;
position: absolute;
left: -100px;
top: -100px;
}
<div class="circle"></div>
推荐阅读
- java - Java Matcher.group(int) 显示以前的匹配值
- android - 如何在适配器中处理 onPause 和 onResume?
- c++ - 为什么这个总工资函数返回 0?
- javascript - 何时移除组件中的骨架屏幕?
- java - 无法在 android 中获取广告 ID 提供者
- java - 使用用户输入创建 2 个维度数组并查找特定列的总和
- ios - 如何在 iOS Swift 中剪切部分 CALayer?
- css - 使用html和css的组织结构图
- amazon-web-services - 无法通过 EC2 实例中的公共 IP 访问我的弹性搜索
- python-2.7 - RuntimeError:运行循环已在 pyttsx 中启动