圍繞div的CSS3漸變邊框

1

既然你想做純CSS，這裏有一個方法：

.dblgradbox { 
 
\t margin: auto; 
 
\t padding: 15px; 
 
\t width: 275px; 
 
\t height: 200px; 
 
\t border: 15px solid transparent; 
 
\t border-top: 10px solid transparent; 
 
\t border-image: linear-gradient(to bottom, transparent, #FBCDEA) 3 100%; 
 
\t box-shadow: 0 15px 0 0 #FBCDEA, 0 -5px 0 0 #F7FCFF, inset 0px 15px 0 0 #FBCDEA; 
 
\t background-image: linear-gradient(#FBCDEA, transparent), linear-gradient(#FBCDEA, transparent); 
 
\t background-size: 15px 100%; 
 
\t background-position: 0 0, 100% 0; 
 
\t background-repeat: no-repeat; 
 
\t border-radius: 7px; 
 
}

<div class="dblgradbox"> 
 
    x3ns 
 
</div>

看看「全頁」運行的代碼段後。我沒有包含任何跨瀏覽器的屬性，因爲這是一個例子。

此方法通常通過應用漸變邊框，並使用盒陰影插入技術來幫助完成元素內的效果 - 因此也需要填充以適應內容。背景圖像僅在插圖的兩側顯示兩個漸變條。

來源

2015-06-21 19:09:49 x3ns

+1

接受此答案，因爲它不需要任何額外的div。謝謝！ – user1049961

0

也許是這樣嗎？

*{ 
 
    box-sizing: border-box; 
 
} 
 

 
.wrap{ 
 
    width: 300px; 
 
    height: 300px; 
 
    padding: 20px; 
 
    margin: 25px auto; 
 
    border-radius: 10px; 
 
    background: rgb(254,249,253); /* Old browsers */ 
 
background: -moz-linear-gradient(top, rgb(254,249,253) 0%, rgb(253,230,246) 50%, rgb(253,204,234) 100%); /* FF3.6+ */ 
 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(254,249,253)), color-stop(50%,rgb(253,230,246)), color-stop(100%,rgb(253,204,234))); /* Chrome,Safari4+ */ 
 
background: -webkit-linear-gradient(top, rgb(254,249,253) 0%,rgb(253,230,246) 50%,rgb(253,204,234) 100%); /* Chrome10+,Safari5.1+ */ 
 
background: -o-linear-gradient(top, rgb(254,249,253) 0%,rgb(253,230,246) 50%,rgb(253,204,234) 100%); /* Opera 11.10+ */ 
 
background: -ms-linear-gradient(top, rgb(254,249,253) 0%,rgb(253,230,246) 50%,rgb(253,204,234) 100%); /* IE10+ */ 
 
background: linear-gradient(to bottom, rgb(254,249,253) 0%,rgb(253,230,246) 50%,rgb(253,204,234) 100%); /* W3C */ 
 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fef9fd', endColorstr='#fdccea',GradientType=0); /* IE6-9 */  
 
} 
 
.wrap div{ 
 
    width: 100%; 
 
    height: 100%;  
 
    padding: 20px; 
 
} 
 
.wrap .inner{   
 
    background: rgb(253,204,234); /* Old browsers */ 
 
background: -moz-linear-gradient(top, rgb(253,204,234) 0%, rgb(253,230,246) 50%, rgb(254,249,253) 100%); /* FF3.6+ */ 
 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(253,204,234)), color-stop(50%,rgb(253,230,246)), color-stop(100%,rgb(254,249,253))); /* Chrome,Safari4+ */ 
 
background: -webkit-linear-gradient(top, rgb(253,204,234) 0%,rgb(253,230,246) 50%,rgb(254,249,253) 100%); /* Chrome10+,Safari5.1+ */ 
 
background: -o-linear-gradient(top, rgb(253,204,234) 0%,rgb(253,230,246) 50%,rgb(254,249,253) 100%); /* Opera 11.10+ */ 
 
background: -ms-linear-gradient(top, rgb(253,204,234) 0%,rgb(253,230,246) 50%,rgb(254,249,253) 100%); /* IE10+ */ 
 
background: linear-gradient(to bottom, rgb(253,204,234) 0%,rgb(253,230,246) 50%,rgb(254,249,253) 100%); /* W3C */ 
 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fdccea', endColorstr='#fef9fd',GradientType=0); /* IE6-9 */ 
 
} 
 
.wrap .item{ 
 
    background: #fff;  
 
}

<div class="wrap"> 
 
    <div class="inner"> 
 
     <div class="item"></div> 
 
    </div> 
 
</div>

來源

2015-06-21 18:35:50 Dmitriy

1

我建議使用border-image財產

.top-to-bottom { 
 
    border-bottom: 10px solid trasparent; 
 
    border-width: 10px; 
 
    border-style: solid; 
 
    -webkit-border-image: -webkit-gradient(linear, 0 0, 0 100%, from(black), to(rgba(0, 0, 0, 0))) 1 100%; 
 
    -webkit-border-image: -webkit-linear-gradient(#FBCDEA, rgba(0, 0, 0, 0)) 1 1; 
 
    -moz-border-image: -moz-linear-gradient(#FBCDEA, rgba(0, 0, 0, 0)) 1 1; 
 
    -o-border-image: -o-linear-gradient(#FBCDEA, rgba(0, 0, 0, 0)) 1 1; 
 
    border-image: linear-gradient(to bottom, #FBCDEA, rgba(0, 0, 0, 0)) 1 1; 
 
    height: 100px; 
 
    width: 97%; 
 
    border-top: 10px solid #FBCDEA; 
 
} 
 
.bottom-to-top { 
 
    border-top: 10px solid trasparent; 
 
    border-width: 10px; 
 
    border-style: solid; 
 
    -webkit-border-image: -webkit-gradient(linear, 0 100%, 0 0, from(#FBCDEA), to(rgba(0, 0, 0, 0))) 1 1; 
 
    -webkit-border-image: -webkit-linear-gradient(bottom, black, rgba(0, 0, 0, 0)) 1 1; 
 
    -moz-border-image: -moz-linear-gradient(bottom, #FBCDEA, rgba(0, 0, 0, 0)) 1 1; 
 
    -o-border-image: -o-linear-gradient(bottom, #FBCDEA, rgba(0, 0, 0, 0)) 1 1; 
 
    border-image: linear-gradient(to top, #FBCDEA, rgba(0, 0, 0, 0)) 1 1; 
 
    border-bottom: 10px solid #FBCDEA; 
 
    height: 100%; 
 
    width: 98% 
 
}

<div class="bottom-to-top"> 
 
    <div class="top-to-bottom"> 
 
    </div> 
 
</div>

來源

2015-06-21 18:39:03 gmuraleekrishna

圍繞div的CSS3漸變邊框

回答

相關問題