如何仅使用 CSS 在矩形中创建圆形切口?
使用 CSS 从矩形创建圆形切口
提出的问题寻求一种在矩形内实现圆形切口的替代方法。最初的解决方案使用元素和边框的组合,效果令人满意,但缺乏干净的标记,并且在某些浏览器中遇到错误。
替代方法
更多优雅的解决方案涉及利用单个元素(以及伪元素)并采用径向渐变背景。这是修改后的 CSS:
div:before { position: absolute; content: ''; width: 90px; height: 90px; top: -75px; left: calc(50% - 45px); background-color: red; border-radius: 50%; } div { position: relative; margin: 100px auto 0 auto; width: 90%; height: 150px; border-radius: 6px; background: radial-gradient(50px 50px at 50% -30px, rgba(0, 0, 0, 0) 49.5px, rgba(0, 0, 0, .8) 50.5px); }
登录后复制
说明
- 伪元素 (:before) 创建一个尺寸为 90px 的圆形红色切口并将其定位在父元素内部。
- 父元素有一个透明的径向渐变,填充剩余区域,创建具有切口的矩形形状。
- 透明渐变的半径略大于切口的半径,从而在边缘周围留有薄薄的透明间隙。
- 圆的中心和透明间隙是通过径向渐变中心点的位置来控制的。
此更新的方法解决了干净标记问题和初始版本中遇到的浏览器错误 解决方案。它仅使用 CSS 从矩形形状提供无缝且视觉上令人愉悦的圆形切口。
以上是如何仅使用 CSS 在矩形中创建圆形切口?的详细内容。更多信息请关注PHP中文网其他相关文章!
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章
<🎜>:种植花园 - 完整的突变指南
3 周前
By DDD
如何修复KB5055612无法在Windows 10中安装?
3 周前
By DDD
<🎜>:泡泡胶模拟器无穷大 - 如何获取和使用皇家钥匙
3 周前
By 尊渡假赌尊渡假赌尊渡假赌
北端:融合系统,解释
3 周前
By 尊渡假赌尊渡假赌尊渡假赌
Mandragora:巫婆树的耳语 - 如何解锁抓钩
3 周前
By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

在本周的平台新闻综述中,Chrome引入了一个用于加载的新属性,Web开发人员的可访问性规范以及BBC Move

文档负责人可能不是网站上最迷人的部分,但是其中所处的内容对于您的网站的成功也一样重要

有很多分析平台可帮助您跟踪网站上的访问者和使用数据。也许最著名的是Google Analytics(广泛使用)
