我有一个横向延伸的标题(灵感来自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,但我不能让渐变重叠到虚线边框..
答案 0 :(得分:2)
这对你有好处吗?
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));
}