纯css实现内凹圆形
1. 单个透明内凹半圆:
以下就是两个div嵌套的真实效果,可以开启查看元素,调整内div层的各项数值查看对应的效果:
html代码如下:
<div style="background-color: red; width: 300px; height: 100px; padding-top: 100px;"> <div style="width: 300px; height: 100px; background: radial-gradient(circle at 50% 0, transparent 50px, yellow 0);"></div> </div>
注:调整内层div背景样式中的各数值,可以调整半圆的直径大小、半圆的位置、边框是否虚化等,可以直接在上边实例开启查看元素查看实时效果。
关键样式代码:
background: radial-gradient(circle at 50% 0, transparent 50px, yellow 0);
解析: radial-gradient 这里有三个参数,分别表示圆形径向渐变方向 | 渐变开始 | 渐变结束。
第一个参数 circle at 50% 0 这里50%表示横向居中,0表示在顶部;circle at定义圆形径向渐变方向,也可以设置为left/right/top/bottom;
第二个参数 transparent 50px 表示从顶部中间位置开始以50像素为半径的圆开始径向渐变,数值可以调整圆的大小;
第三个参数 yellow 0) 表示径向渐变以黄色结束;后边的0最大可以取到50像素(圆的半径)对圆无影响,如果再大圆就会出现模糊效果,感兴趣的可以试试。
2.左右两个半圆实例如下:
html代码如下:
<div style="width: 300px;height: 200px;background: radial-gradient(circle at left,transparent 10px, red 0) left,radial-gradient(circle at right,transparent 10px, red 0) right;background-repeat: no-repeat;background-size: 50% 100%;"> </div>
关键样式代码:
background: radial-gradient(circle at left,transparent 10px, red 0) left,
radial-gradient(circle at right,transparent 10px, red 0) right;
background-repeat: no-repeat;
background-size: 50% 100%;
解析:
这里采用了两个圆形径向渐变,以 background-size: 50% 100% 进行左右分割;
同时也要设置 background-repeat: no-repeat ,不然左右两半部分的渐变会相互覆盖就没有半圆效果了。
3. 上下两个半圆:
关键样式代码:
background: radial-gradient(circle at top,transparent 10px, red 0) top,
radial-gradient(circle at bottom,transparent 10px, red 0) bottom;
background-repeat: no-repeat;
background-size: 100% 50%;
4. 更多的效果:
代码:
background: radial-gradient(circle at top,transparent 50px, red 55px) top,
radial-gradient(circle at 50% 50% ,transparent 30px, red 35px) center,
radial-gradient(circle at 50%,transparent 10px, red 20px) bottom;
background-size: 100% 34%;
background-repeat: no-repeat;
当然,如果你想,还可以用径向渐变实现更多炫酷的效果,现在的智能设备更新换代比较快,现在已经很少考虑兼容行问题了,大部分设备都支持css3的,感兴趣的可以多多尝试哦!
如果有其他好的建议,也欢迎评论留言。
注:以上实例均直接以html代码+css实现,目前已经调整到发布后可以正常显示的效果。如果后续显示不正常,那有可能是平台改了规则,某些代码被屏蔽了。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析