使邊框消失的漸變邊框

我的頁面上有幾個標題（h3標籤），標題右側有一個雙邊框。我希望這些邊框可以淡出。我以爲我可以在邊界上使用漸變來做到這一點，但它不起作用。使邊框消失的漸變邊框

爲了更好地理解看看this jsFiddle的雙邊框。我希望這兩條線在向右移動時淡出。

這裏是我用來創建兩行代碼：

HTML

<div class="title"> 
    <h3>Title</h3> 
    <div class="title-container"> 
     <div class="title-separator"></div> 
    </div> 
</div>

CSS

.title h3{ 
    display: table-cell; 
    white-space: pre; 
    padding-right:7px; 
} 
.title-container { 
    position: relative; 
    display: table-cell; 
    vertical-align: middle; 
    height: 6px; 
    width: 100%; 
} 
.title-separator { 
    border-bottom-width: 1px; 
    border-top-width: 1px; 
    height: 6px; 
    display: block; 
    width: 100%; 
    box-sizing: content-box; 
    position: relative; 
    border-color:#222; 
    border-style:solid; 
    border-left:0; 
    border-right:0; 
}

我曾嘗試做通過添加以下代碼.title-separator CSS使用border-image：

border-image: linear-gradient(to right, rgba(25,50,39,1) 0%,rgba(17,34,27,0) 100%);

（我省略了供應商前綴爲這個職位。）

當我這樣做的邊界消失。帶梯度代碼的Here is a fiddle。

關於如何使雙邊框淡入淡出的任何想法？我可以根據需要更改HTML和/或CSS。

來源

2014-12-31 L84

你能做到這一點通過應用linear-gradients到:after和:before：僞元素。

.title h3 { 
 
    display: table-cell; 
 
    white-space: pre; 
 
    padding-right: 7px; 
 
} 
 
.title-container { 
 
    position: relative; 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    height: 6px; 
 
    width: 100%; 
 
} 
 
.title-container:after, .title-container:before { 
 
    position: absolute; 
 
    content: ''; 
 
    left: 0; 
 
    top: calc(50% + 3px); 
 
    width: 100%; 
 
    height: 1px; 
 
    background: linear-gradient(90deg, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 0)); 
 
} 
 
.title-container:before { 
 
    top: calc(50% - 2px); 
 
}

<div class="title"> 
 
    <h3>Title</h3> 
 
    <div class="title-container"></div> 
 
</div>

來源

2014-12-31 05:54:12

的最佳解決方案。謝謝！ – L84

@Lynda - 歡迎您。 :) –

您可以使用該屬性爲

border-image: linear-gradient(to right, rgba(25,50,39,1) 0%,rgba(17,34,27,0) 100%) 100% 100;

它可以幫助你

來源

2014-12-31 05:37:53 priya786

使邊框消失的漸變邊框

回答

相關問題