Question

只是想知道是否可以在css中执行此操作：

我已经为我当前的测试网站创建了一个简化的jfiddle版本：http://jsfiddle.net/QhPQa/

HTML：

<header>
    Ight'sul
</header>

CSS：

body {

background: rgb(140,140,140);

}



header{
    height: 200px;
    width: 100%;
    text-align: center;
    vertical-align: top;
    font-size: 140px;
    color: black;
    background: rgb(201,201,201);

    -webkit-box-shadow: 0px 1px 5px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    0px 1px 5px rgba(50, 50, 50, 0.75);
    box-shadow:         0px 1px 5px rgba(50, 50, 50, 0.75);
}

任何人都知道是否可能，或者我是否应该再次使用图像。

Answer 1

您可以使用图像来达到这种效果，但那里的乐趣在哪里？ ;）

JSFiddle

HTML

<h1 id="outer">
    <div id="inner">
        lgth'sul
    </div>
</h1>

CSS

#inner{
    height: 200px;
    width: 120%;
    position: relative;
    left: -10%;
    text-align: center;
    font-size: 140px;
    color: black;
    background: rgb(201,201,201);
    border-radius: 0 0 50% 50%;

    -webkit-box-shadow: 0px 1px 5px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    0px 1px 5px rgba(50, 50, 50, 0.75);
    box-shadow:         0px 1px 5px rgba(50, 50, 50, 0.75);
}

#outer {
    background-color: #3d3d3d;
    padding-bottom: 40px;
}

<强>解释

我们的想法是让outer div作为曲线的背景，inner div作为曲线。

使用border-radius曲线化#inner

的底部

 border-radius: 0 0 50% 50%;

将#inner的宽度设置为大于100%的值，以便曲率延伸到容器之外并将其定位以确保对称。

 width: 120%;
 position: relative;
 left: -10%; /*Move back half of excess width*/

在padding-bottom上设置#outer，您就完成了。

凸出底部的标题

1 个答案: