带不透明度渐变的虚线下划线链接样式答案

【问题标题】：dotted underline link style with opacity gradient带不透明度渐变的虚线下划线链接样式
【发布时间】：2013-03-07 08:39:48
【问题描述】：

我想用某种从 100% 不透明度到 0% 的虚线渐变来强调我的链接。我做了一个我应该是什么样子的屏幕：

我会做某事

a {
  border-bottom: 2px dotted #007acc;
}

但是没有渐变到 0 不透明度，并且单个点之间的空间太小了。

关于这个问题的另一个问题：我有一些 :before 内容（“+”），我不希望边框底部碰到该内容，如您所见。

这是可能的还是我必须使用 png 背景？

Jquery 也可以。

【问题讨论】：

渐变边框在 WebKit 中是可能的，我怀疑你可以在这里使用帮助css-tricks.com/examples/GradientBorder 来实现你想要的
谢谢你的链接，确实是用过的。

标签： jquery css hyperlink underline

【解决方案1】：

这是一个简单的例子。不知道是否符合你的需求。

body{
    background:#111;
}
ul{
    padding:0;
    margin:0;
}
li{
    margin-left:20px;
    width:200px;
    list-style:none;
    border-bottom:dotted 2px #99f;
    color:#99f;
    position:relative;
}
li:before{
    content:'+';
    position:absolute;
    left:-15px;
}
li:after{
    content:'';
    position:absolute;
    height:2px;
    width:100%;
    top:100%;
    background:red;
    left:0;

background: -moz-linear-gradient(left, rgba(17,17,17,0) 0%, rgba(17,17,17,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(17,17,17,0)), color-stop(100%,rgba(17,17,17,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(17,17,17,0) 0%,rgba(17,17,17,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(17,17,17,0) 0%,rgba(17,17,17,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(17,17,17,0) 0%,rgba(17,17,17,1) 100%); /* IE10+ */
background: linear-gradient(to right, rgba(17,17,17,0) 0%,rgba(17,17,17,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00111111', endColorstr='#111111',GradientType=1 ); /* IE6-9 */
}

http://jsfiddle.net/KZPbf/

方便的跨浏览器渐变生成器：http://www.colorzilla.com/gradient-editor/

【讨论】：

这是一个有趣的概念。
@VinnyFonseca 除了生成一系列具有不同背景颜色的单个 dom 对象之外，我唯一能想到的事情。 :)
谢谢，这就是我一直在寻找的！确实很有趣的概念。

【解决方案2】：

您可以使用具有线性渐变背景的伪元素覆盖在边框顶部。

a {
  border-bottom: 2px dotted #007acc;
}
a:after {
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 2px;
  top: 100%;
  background: linear-gradient(left, rgba(22, 23, 25, 1) 0%, rgba(22, 23, 25, 0) 100%);
}

您的背景可能需要保持相同的颜色，但这应该可以完成工作。根据您计划支持的浏览器，您仍然需要供应商前缀和正确的颜色代码。

【讨论】：