Html 如何在边框顶部覆盖渐变(背景)?
我有一个标题,边线横向延伸(灵感来源于克里斯·科伊尔斯)。我正试图用渐变背景将边界重叠,使其淡出。然而,我不能让它工作,但我觉得它应该是可能的。为了说明我想要的效果: 这就是我现在拥有的: 这就是我想要实现的目标: 我现在拥有的代码是: HTML 为了便于修改,代码如下: 有人知道怎么做吗?我已经尝试过绝对定位和z索引,但我无法使渐变重叠到虚线边界。这对你有好处吗 HTMLHtml 如何在边框顶部覆盖渐变(背景)?,html,css,border,gradient,Html,Css,Border,Gradient,我有一个标题,边线横向延伸(灵感来源于克里斯·科伊尔斯)。我正试图用渐变背景将边界重叠,使其淡出。然而,我不能让它工作,但我觉得它应该是可能的。为了说明我想要的效果: 这就是我现在拥有的: 这就是我想要实现的目标: 我现在拥有的代码是: HTML 为了便于修改,代码如下: 有人知道怎么做吗?我已经尝试过绝对定位和z索引,但我无法使渐变重叠到虚线边界。这对你有好处吗 HTML <article> <p>Lorem ipsum etc.</p>
<article>
<p>Lorem ipsum etc.</p>
<a class="fancy" href="#">
<span>read more</span>
</a>
</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));
}
<article>
<p>Lorem ipsum etc.</p>
<a class="fancy" href="#">
<span>read more</span>
</a>
</article>
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));
}