0

我正在尝试在水平线上创建文本，我成功了。这是代码

HTML

<div class="featuredtext">
       <h2><span>Featured Art Work</span></h2>
</div>

CSS

.featuredtext {
    text-align: center;
}
.featuredtext h2 {
    margin-top: 30px;
    font-family: 'PrintClearlyRegular', Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-style: normal;
    font-size: 36px;
    position: relative;
    text-align: center;
    color: #FFF;
    z-index: 1;
}
.featuredtext h2:before {
    border-top: 2px solid #ee357a;
    content:"";
    margin: 0 auto;
    position: absolute;
    top: 17px;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    z-index: -1;
}
.featuredtext h2 span {
    background: #1a132a;
    padding: 0 12px;
}

但是，我希望这条线像这样的线性渐变：http ://css-tricks.com/examples/hrs/列表中的第二行。但是，它仅适用于<hr>并且我无法将其添加到边框顶部。如何获得我需要的结果？

4

2 回答 2

1

如评论中所述，只需复制粘贴 css-tricks中的代码即可。这是您上面提供的示例的有效jsfiddle。

CSS

/* Gradient transparent - color - transparent */

hr {
    border: 0;
    height: 1px;
    background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
    background-image:    -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
    background-image:     -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
    background-image:      -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
}
于 2013-04-30T15:31:58.110 回答
0

您可以通过删除边框并将伪元素的高度设置为 2px 来轻松调整 Coyier 的代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<style media="all">
.featuredtext {
    text-align: center;
}
.featuredtext h2 {
    margin-top: 30px;
    font-family: 'PrintClearlyRegular', Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-style: normal;
    font-size: 36px;
    position: relative;
    text-align: center;
    color: #FFF;
    z-index: 1;
}
.featuredtext h2:before {
    height: 2px;
    content:"";
    margin: 0 auto;
    position: absolute;
    top: 17px;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    z-index: -1;
    background-image: -webkit-linear-gradient(left, rgba(238, 53, 122, 0), rgba(238, 53, 122, 0.75), rgba(238, 53, 122, 0));
    background-image: -moz-linear-gradient(left, rgba(238, 53, 122, 0), rgba(238, 53, 122, 0.75), rgba(238, 53, 122, 0));
    background-image: -ms-linear-gradient(left, rgba(238, 53, 122, 0), rgba(238, 53, 122, 0.75), rgba(238, 53, 122, 0));
    background-image: -o-linear-gradient(left, rgba(238, 53, 122, 0), rgba(238, 53, 122, 0.75), rgba(238, 53, 122, 0));
}
.featuredtext h2 span {
    background: #1a132a;
    padding: 0 12px;
}
</style>

</head>
<body>

<div class="featuredtext">
       <h2><span>Featured Art Work</span></h2>
</div>

</body>
</html>

我不喜欢使用，<hr>因为它具有不属于这里的语义值。（这不是一个表现元素。）

于 2013-04-30T15:37:42.407 回答