CSS給div一個(gè)帶有圓角的漸變邊框效果
發(fā)布時(shí)間：2024-10-29 17:00:33 作者：Spongebob王 
我要評(píng)論
我要評(píng)論本文介紹了CSS實(shí)現(xiàn)圓角漸變邊框的方法,首先設(shè)置元素邊框?yàn)?像素寬度,樣式為實(shí)線,顏色為透明,然后設(shè)置元素邊框圓角為10像素,再設(shè)置背景剪裁區(qū)域和背景繪制區(qū)域?yàn)閮?nèi)邊距和邊框區(qū)域,最后設(shè)置元素的背景圖像為兩個(gè)線性漸變
單純的設(shè)置border-radius，是不行的，這樣設(shè)置完以后漸變色邊框雖然會(huì)顯示,但是圓角不能出來，解決方法如下
1.先看效果
2.這是個(gè)帶有漸變效果的div邊框，設(shè)置代碼如下
.box {
border-radius: 8px;
/* 設(shè)置元素邊框?yàn)?像素寬度，樣式為實(shí)線，顏色為透明。 */
border: 1px solid transparent;
/* 設(shè)置元素邊框圓角為10像素。 */
border-radius: 10px;
/* 設(shè)置背景剪裁區(qū)域?yàn)閮?nèi)邊距和邊框區(qū)域。 */
background-clip: padding-box,border-box;
/* 設(shè)置背景繪制區(qū)域?yàn)閮?nèi)邊距和邊框區(qū)域。 */
background-origin: padding-box,border-box;
/* 設(shè)置元素的背景圖像為兩個(gè)線性漸變。第一個(gè)漸變從左到右，顏色從白色到白色；第二個(gè)漸變以155度角從下左到上右，顏色從rgba(116, 233, 255, 1)到rgba(64, 158, 255, 1)。 */
background-image:
linear-gradient(to right, #fff, #fff),
linear-gradient(155deg, rgba(116, 233, 255, 1), rgba(64, 158, 255, 1));
}3.如果想給劃入加些效果也可以做升級(jí) ??????? ???????
.box:hover {
box-shadow: 0px 0px 8px 0px rgba(0, 130, 255, 0.6);
border-image: linear-gradient(155deg, rgba(116, 233, 255, 1), rgba(64, 158, 255, 1)) 0 0;
color: #409EFF;
font-weight: 600;
}到此這篇關(guān)于CSS給div一個(gè)帶有圓角的漸變邊框的文章就介紹到這了,更多相關(guān)css div漸變邊框內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
div+css用邊框?qū)崿F(xiàn)圓角矩形(多樣式)
css圓角卷起了一陣風(fēng)波，只用css來做圓角矩形的技術(shù)很早就有了,但是在網(wǎng)頁的設(shè)計(jì)過程中,我們通常用圖片實(shí)現(xiàn)圓角矩形效果?，F(xiàn)在網(wǎng)上很多關(guān)于無圖片實(shí)現(xiàn)css圓角矩形的方法,雖2013-03-25css div 邊框陰影利用背景圖或內(nèi)外層div實(shí)現(xiàn)層次感覺陰影效果
在網(wǎng)頁布局中偶爾會(huì)用到div 邊框陰影做一些特殊效果本文介紹兩種實(shí)現(xiàn)方法:一種是利用內(nèi)外層的div邊框來實(shí)例層次感覺的css邊框陰影效果，另一種是利用了背景圖片再加內(nèi)外div2012-12-18