谁知道如何使用 css,实现这样的下圆弧效果?

2023-06-14 19:49:29 +08:00
 atfeel

大家好,如图这样的下圆弧效果是怎么做出来的呢? CSS 还是图片呢?

1681 次点击
所在节点    CSS
7 条回复
iMusic
2023-06-14 19:59:16 +08:00
1145148964
2023-06-14 20:02:53 +08:00
<font style="vertical-align: inherit;"><font style="vertical-align: inherit;">0% 0% 50% 50% / 0% 0% 10% 10%</font></font>
atfeel
2023-06-14 20:03:20 +08:00
厉害啊,哥哥
LeegoYih
2023-06-14 20:03:33 +08:00
https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius
试试这个
border-radius: 50% / 10%;
border-top-left-radius:0;
border-top-right-radius:0;
atfeel
2023-06-14 20:07:43 +08:00
不过,如果是固定的尺寸能用这个方法,似乎对于不同的手机分辨率,就行不通了
learnshare
2023-06-14 20:19:43 +08:00
圆的宽度用屏幕宽度的 4~6 倍
atfeel
2023-06-14 20:47:07 +08:00

可以了非常感谢

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/948766

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX