Question

我正在尝试创建一个可能是多行的圆形标题。我的问题是，如果文本需要转到另一行，左右图像就开始重复了。

编辑如果您需要图像：http://www.filedropper.com/corners

CSS

.Label
{
    color:White;
}

.Left
{
    background:url('images/tab_left.png') repeat-y;
    height:auto;
    width:12px;
}

.Middle
{
    width:200px;
    height:auto;
    background:url('images/tab_mid.png');
    font-weight:lighter;
    background-repeat:repeat-x;
    color:White;
    vertical-align:middle;
    padding-top:1px;
    text-align:center;
}

.Right
{
    background:url('images/tab_right.png') repeat-y;
    height:auto;
    width:12px;
}

HTML

<table style="height:auto;" cellspacing="0" cellpadding="0" border="0">
    <tr>
        <td class="Left"></td>
        <td class="Middle"><asp:Label runat="server" ID="Label1" Text="Label1" CssClass="Label" /></td>
        <td class="Right"></td>
    </tr>
</table>

Answer 1

您提供的图像仅适用于单行。如果你想要多行，你将需要做一些额外的工作。此外，图像具有渐变，因此无法将它们用于多行。

另一方面，JQuery为圆角提供了更简单的解决方案。痛苦和灵活性要小得多。

Tutorials:Rounded Corners

CSS多行圆形标题

1 个答案: