我有一个边框向侧面延伸的标题(灵感来自 Chris Coyiers example)。我试图通过将边框与渐变背景重叠来淡出边框。但是,我无法让它工作,但我觉得它应该以某种方式成为可能。为了说明我正在寻找什么效果:
这就是我现在拥有的:
这就是我要实现的目标:
我现在的代码:
HTML
<article>
<p>Lorem ipsum etc.</p>
<p class="fancy">
<a href="#">read more</a>
</p>
</article>
CSS
body {
background: red; /* Just to show the effect of the transparency, the final background will be white */
font-size: 150%;
}
/* This is for the horizontal borders extending sideways from the heading */
.fancy a {
max-width: 100%;
margin: 0 auto;
overflow: hidden;
display: block;
color: black;
text-align: center;
text-decoration: none;
font-family:'Bitter', serif;
font-style: italic;
font-size: 16px;
line-height: 32px;
}
.fancy a:before, .fancy a:after {
content:"";
display: inline-block;
position: relative;
height: .1em;
width: 50%;
border-top: 1px dotted black;
border-bottom: 1px dotted black;
margin-bottom: .25em;
}
.fancy a:before {
right: .5em;
margin-left: -50%;
}
.fancy a:after {
left: .5em;
margin-right: -50%;
}
/* This is the gradient I want to display in front of the border. The body will have a white background, so it will look like the border is fading out */
.fancy {
/* Safari 5.1, Chrome 10+ */
background: -webkit-linear-gradient(left, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
/* Firefox 3.6+ */
background: -moz-linear-gradient(left, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
/* IE 10 */
background: -ms-linear-gradient(left, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
/* Opera 11.10+ */
background: -o-linear-gradient(left, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
}
为了方便摆弄,代码在这里:http://jsfiddle.net/QEdxe/3/
有人知道怎么做吗?我已经尝试过绝对定位和 z-index,但我无法让渐变与虚线边框重叠。
最佳答案
这对你有好处吗?
http://jsfiddle.net/coma/rcv5S/2/
HTML
<article>
<p>Lorem ipsum etc.</p>
<a class="fancy" href="#">
<span>read more</span>
</a>
</article>
CSS
body {
background: white; /* Just to show the effect of the transparency, the final background will be white */
font-size: 150%;
}
/* This is for the horizontal borders extending sideways from the heading */
a.fancy {
position: relative;
display: block;
color: black;
text-align: center;
text-decoration: none;
font-family:'Bitter', serif;
font-style: italic;
font-size: 16px;
line-height: 32px;
}
a.fancy > span {
position: relative;
z-index: 1;
display: inline-block;
background: white;
padding: 0 .5em;
}
a.fancy:before {
content: "";
display: block;
z-index: 0;
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 2px;
border-width: 1px 0 1px 0;
border-style: dotted;
border-color: black;
}
a.fancy:after {
content: "";
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
/* Safari 5.1, Chrome 10+ */
background: -webkit-linear-gradient(left, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
/* Firefox 3.6+ */
background: -moz-linear-gradient(left, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
/* IE 10 */
background: -ms-linear-gradient(left, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
/* Opera 11.10+ */
background: -o-linear-gradient(left, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
}
关于html - 如何在边框顶部叠加渐变(背景)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16264717/