blocks|key|534371|text|不要听图片爱好者的话，我已经在两个场合解决了这个问题，没有图片或额外的标记：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|534372|The+most+semantic+way+of+making+this+container|offset|length|534373|CSS+to+create+curved+corner+between+two+elements?|534374|这是关于“发现创造”的，就好像它是一个圆形的绿色按钮。|534375|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/4375978/the-most-semantic-way-of-making-this-container/4384017#4384017|1|https://stackoverflow.com/questions/4601317/css-to-create-curved-corner-between-two-elements/4622256#4622256^0|0|0|1A|0|0|0|1D|1|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|U|8|@]|9|@$D|V|E|W|1|X]]|A|$]]|$1|F|3|G|5|6|7|Y|8|@]|9|@$D|Z|E|10|1|11]]|A|$]]|$1|H|3|I|5|6|7|12|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|K|$L|$5|M|N|O|A|$P|Q]]|R|$5|M|N|O|A|$P|S]]]]

Don't listen to the image lovers, I've solved this very problem with no images or extra markup on two occasions:

<a href="https://stackoverflow.com/questions/4375978/the-most-semantic-way-of-making-this-container/4384017#4384017">The most semantic way of making this container</a>

<a href="https://stackoverflow.com/questions/4601317/css-to-create-curved-corner-between-two-elements/4622256#4622256">CSS to create curved corner between two elements?</a>

This about "Discover creations" as if it were a rounded green button.

blocks|key|2601227|text|我认为唯一的方法是使用图像；my+site使用图像。使用CSS3可能是可行的，但是标记太可怕了！|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2601228|詹姆斯|2601229|entityMap|0|LINK|mutability|MUTABLE|url|http://www.jamwaffles.co.uk/^0|E|7|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]]|C|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@]|C|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]]]

I think the only way to do this is to use an image; <a href="http://www.jamwaffles.co.uk" rel="nofollow">my site</a> uses images. It may be possible with CSS3, but the markup would be horrid!

James

blocks|key|2601257|text|http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-a-kick-butt-css3-mega-drop-down-menu/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2601258|这会给你一个10分的启动器。圆角可能是一个图像。|2601259|entityMap|0|LINK|mutability|MUTABLE|url^0|0|2W|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@$A|N|B|O|1|P]]|C|$]]|$1|D|3|E|5|6|7|Q|8|@]|9|@]|C|$]]|$1|F|3|-4|5|6|7|R|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|4]]]]

<a href="http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-a-kick-butt-css3-mega-drop-down-menu/" rel="nofollow">http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-a-kick-butt-css3-mega-drop-down-menu/</a>

This will give you a starter for 10. The rounded corner is probably an image.

blocks|key|2601307|text|根据firebug的说法，他们在http://images.aviary.com/images/layout/nav/link.gif上使用了一张图片。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2601308|一种更混乱的方法是使用圆角，这样绿色部分就有圆角，并且定位在灰色部分上。|2601309|entityMap|0|LINK|mutability|MUTABLE|url|http://images.aviary.com/images/layout/nav/link.gif^0|G|1F|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]]|C|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@]|C|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]]]

According to firebug, they use an image there <a href="http://images.aviary.com/images/layout/nav/link.gif" rel="nofollow">http://images.aviary.com/images/layout/nav/link.gif</a>. 

A messier way to do it would be to use rounded corners so the green part has rounded corners and is positioned over the gray part.

blocks|key|534320|text|这里有25种不同的圆角制作方法。选一个。:)+http://www.devwebpro.com/25-rounded-corners-techniques-with-css/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|534321|(它实际上不是25种技术，而是25个不同网站的链接，解释如何做到这一点。)|534322|entityMap|0|LINK|mutability|MUTABLE|url|http://www.devwebpro.com/25-rounded-corners-techniques-with-css/^0|N|1S|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]]|C|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@]|C|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]]]

Here are 25 different ways of making rounded corners. Pick one. :)
<a href="http://www.devwebpro.com/25-rounded-corners-techniques-with-css/" rel="nofollow">http://www.devwebpro.com/25-rounded-corners-techniques-with-css/</a>

(It's not actually 25 techniques, but links to 25 different sites that explain how to do it.)

blocks|key|1618413|text|如果你只有几个，你可以用javascript做的很快很容易。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1618414|See+Here|offset|length|1618415|1618416|entityMap|0|LINK|mutability|MUTABLE|url|http://docs.jquery.com/Tutorials%253aRounded_Corners^0|0|0|8|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@$D|Q|E|R|1|S]]|A|$]]|$1|F|3|-4|5|6|7|T|8|@]|9|@]|A|$]]|$1|G|3|-4|5|6|7|U|8|@]|9|@]|A|$]]]|H|$I|$5|J|K|L|A|$M|N]]]]

You can do it pretty quick and easy with javascript if you have just a few of them.

<a href="http://docs.jquery.com/Tutorials%3aRounded_Corners" rel="nofollow">See Here</a>

<hr>

I am trying to find out how I can replicate this effect as seen on <a href="http://www.aviary.com/" rel="nofollow noreferrer">Aviary</a>

<a href="http://www.aviary.com/" rel="nofollow noreferrer"><img src="https://imgur.com/WvyKE.jpg" alt=""></a>

How to acheive this effect (Rounded Corners & Drop Down Menu)

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

我正在尝试找出如何才能复制上看到的这种效果​​

问如何获得此效果(圆角和下拉菜单)
EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何获得此效果(圆角和下拉菜单)EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何获得此效果(圆角和下拉菜单)
EN