Question

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

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>，我无法将其添加到border-top。我如何得到我需要的结果？

Answer 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)); 
}

Answer 2

您可以通过删除边框并将伪元素的高度设置为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>，因为它具有不属于此处的语义值。（这不是表象元素。）

水平线上的文字...如何制作线条渐变？

2 个答案: