帶有不透明度梯度的虛線下劃線鏈接樣式

我想用100％不透明度到0％的某種虛線漸變來強調我的鏈接。我做的應該是什麼我像一個屏幕：帶有不透明度梯度的虛線下劃線鏈接樣式

dotted links

我想做某事像

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

但沒有梯度爲0，不透明度和單點之間的空間實在是太路小。

關於這個問題的另一個問題：我有一些：內容之前（'+'），我不想讓border-bottom打內容，就像你看到的。

這是甚至可能或我必須使用PNG背景嗎？

jquery也可以。

來源

2013-03-18 sqe

漸變邊框WebKit中是可能的，我懷疑你將能夠達到你想要使用幫助在這裏什麼HTTP：// CSS-技巧.com/examples/GradientBorder/ – Rockafella 2013-03-18 20:52:40

感謝您的鏈接，這確實是曾經使用過的。 – sqe 2013-03-18 21:14:32

下面是一個簡單的例子。不知道它是否適合您的需求。

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-18 20:55:45 Andy

這是一個有趣的概念。 – 2013-03-18 20:58:58

@VinnyFonseca我唯一能想到的就是除了生成一系列具有不同背景顏色的單個dom對象之外。 :) – Andy 2013-03-18 21:11:34

謝謝，這就是我一直在尋找的！確實有趣的概念。 – sqe 2013-03-18 21:13:13

您可以使用具有線性漸變背景的psuedo元素重疊在邊框的頂部。

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-18 20:52:06 JasonPolito

帶有不透明度梯度的虛線下劃線鏈接樣式

回答

相關問題