4

不透明度100％から0％までのある種の点線のグラデーションでリンクに下線を引きたいと思います。私は私がどのように見えるべきかについてのスクリーンを作りました：

点線のリンク

私はsthのようにします

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

ただし、不透明度0までのグラデーションはなく、単一のドット間のスペースは小さすぎます。

この問題に関する別の質問：いくつかの：beforeコンテンツ（「+」）があり、ご覧のとおり、border-bottomがそのコンテンツにヒットすることを望んでいません。

これも可能ですか、それともpng背景を使用する必要がありますか？

Jqueryも大丈夫でしょう。

4

2 に答える 2

4

これが簡単な例です。それがあなたのニーズに合っているかどうかわからない。

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/

于 2013-03-18T20:55:45.690 に答える
1

線形グラデーションの背景を持つ疑似要素を使用して、境界線の上にオーバーレイすることができます。

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

あなたの背景はおそらく同じ色のままである必要があるでしょうが、これは仕事をするはずです。サポートする予定のブラウザに応じて、ベンダープレフィックスと正しいカラーコードが引き続き必要です。

于 2013-03-18T20:52:06.147 に答える