css - 标题内 2 个跨度上的 CSS3 边框半径，这种效果可能吗？

Question

我想为页面上的所有 h2 实现我在下面的链接中发布的形状。我有一个粗略的想法，我可能如何使用在标题内有几个跨度的 png 背景图像来做到这一点。

http://vurtmedia.net/header.png

关于这在纯 CSS 中是否可行的任何想法？我更喜欢这个，因为在这种情况下我不关心 IE9 或更低版本。

对不起，如果我的帖子描述不是最好的，不知道如何描述这个形状！

提前致谢 ：）

拍

Answer 1

您可以设置填充、边框半径并使用绝对定位来使元素的位置笔直，请参阅此 jsFiddle

HTML：

 <h1 class="shaded">lorem</h1>
 <h2 class="shaded bottomright">ipsum</h2>

CSS：

.shaded
{
    padding:10px;
    background-color:#000;
    border-radius:12px;
    font-family:verdana;
}

.topleft
{

}

.bottomright
{
    position:absolute;
    left:40px;
    top:6px;
}

h1
{
    font-size:20px;
    color:#FFF;
    display:inline-block;
}

h2
{
    font-size:60px;
    color:#FFF;
    display:inline-block;
}

但这不允许您平滑两个元素之间的角，这仅在 CSS 中是不可能实现的。你可以用图片把角落弄平，但这会给你留下一些定位问题。