Question

如何为此编码？

enter image description here

当我们有这个：
enter image description here

as

<html>
    <head>
        <style>             
            h2
            {
                letter-spacing:4pt;
                font-size:40pt;
                color:blue;
                text-align:center;
                position:absolute;
                top:0px;
            }
            h3
            {
                letter-spacing:4pt;
                font-size:40pt;
                color:blue;
                text-align:center;
                position: absolute;
                top:20px;
                left:20px;
            }
        </style>
    </head>

    <body>
        <h2>All right, Mate?</h2>
        <h3>All right, Mate?</h3>
    </body>
</html>
</html>

...而不更改原始功能/标签只添加（或修改）一点。

Answer 1

将其包裹在div中并设置边框。

尝试将html更改为：

<div>
    <span id="h2">All right, Mate?</span>
    <span id="h3">All right, Mate?</span>
</div>

你的css对此：

div {
    padding : 5px;
    border: 3px solid red;
    height: 70px;
    width: 440px;
}
div span {
    width: 420px;
    display: block;
    letter-spacing:4pt;
    font-size:40pt;
    color:blue;
    position: relative;
}
div span#h2
{
    top:0px;
}
div span#h3
{
    top:-50px;
    left:20px;
}

小提琴：http://jsfiddle.net/maniator/PJT9V/

Answer 2

您可以将它们放在包装中，也可以尝试使用text-shadow解决方案 - 类似http://dabblet.com/gist/2769678

Answer 3

您可以将两者都放在position设置为relative的包装中，并为其定义固定的width和height。

<强> HTML

<div class="wrapper">
    <h2>All righ, Mate?</h2>
    <h3>All right, Mate?</h3>
</div>

<强> CSS

.wrapper 
{
    border: 3px solid #ff0000;
    position: relative;
    width: 448px;
    height: 89px;
}    
h2
{
    letter-spacing:4pt;
    font-size:40pt;
    color:blue;
    text-align:center;
    position:absolute;
    top:0px;
}
h3
{
    letter-spacing:4pt;
    font-size:40pt;
    color:blue;
    text-align:center;
    position: absolute;
    top:20px;
    left:20px;
}

有必要定义height，因为两个元素都将position设置为absolute，它会使元素从文档的正常流中删除，因此父元素在这种情况下，包装器不会将绝对定位子项的height添加到自己的子项中另请注意，将父级position定义为relative会影响子级的位置，因为他们的位置将根据父级的位置进行计算。如果您不想要此行为，只需从position: relative规则中删除.wrapper。

<强> Live example

希望它有所帮助。

HTML / CSS：重叠文本周围的公共边框

3 个答案: