gpt4 book ai didi

css - 我可以制作纯 css 选项卡式边框吗?

转载 作者:太空宇宙 更新时间:2023-11-03 21:56:22 24 4
gpt4 key购买 nike

我想给元素一个 border-top,右上角有一个标签,如下所示:

由于这将是 Adob​​e Business Catalyst 模板中的重复元素,我希望它是纯 CSS 或至少是 CSS 和 javascript,而不使用任何图像。有什么办法可以做到这一点?

因为它只是一个装饰元素,所以它不一定是跨浏览器的。

最佳答案

看看这个:

http://jsfiddle.net/8hB7E/

HTML:

<body>
<div class="element">

</div>
</body>

CSS:

body { background: #555 }

.element { background: #000; border-top: 2px solid #fff; height: 100px; position: relative; width: 300px; }

.element:after { background: #fff; content: " "; height: 10px; position: absolute; right: 0; top: 0; width: 20px; }

它利用了 :after 伪元素(我发现它非常有用!)

更多信息请看这里:

http://coding.smashingmagazine.com/2011/07/13/learning-to-use-the-before-and-after-pseudo-elements-in-css/

不幸的是,这在 IE7 或 6 中不起作用 - 虽然它不是网站功能的核心,所以我认为它没问题。

关于css - 我可以制作纯 css 选项卡式边框吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13588635/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com