亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

CSS給div一個帶有圓角的漸變邊框效果

  發(fā)布時間：2024-10-29 17:00:33   作者：Spongebob王   我要評論
本文介紹了CSS實現(xiàn)圓角漸變邊框的方法,首先設(shè)置元素邊框為1像素寬度,樣式為實線,顏色為透明,然后設(shè)置元素邊框圓角為10像素,再設(shè)置背景剪裁區(qū)域和背景繪制區(qū)域為內(nèi)邊距和邊框區(qū)域,最后設(shè)置元素的背景圖像為兩個線性漸變

單純的設(shè)置border-radius，是不行的，這樣設(shè)置完以后漸變色邊框雖然會顯示,但是圓角不能出來，解決方法如下

1.先看效果                                

2.這是個帶有漸變效果的div邊框，設(shè)置代碼如下

.box {
border-radius: 8px;
    /* 設(shè)置元素邊框為1像素寬度，樣式為實線，顏色為透明。 */
    border: 1px solid transparent;
    /* 設(shè)置元素邊框圓角為10像素。 */
    border-radius: 10px;
    /* 設(shè)置背景剪裁區(qū)域為內(nèi)邊距和邊框區(qū)域。 */
    background-clip: padding-box,border-box;
    /* 設(shè)置背景繪制區(qū)域為內(nèi)邊距和邊框區(qū)域。 */
    background-origin: padding-box,border-box;
    /* 設(shè)置元素的背景圖像為兩個線性漸變。第一個漸變從左到右，顏色從白色到白色；第二個漸變以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.如果想給劃入加些效果也可以做升級       ???????        ???????

.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一個帶有圓角的漸變邊框的文章就介紹到這了,更多相關(guān)css div漸變邊框內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論