操屁眼的视频在线免费看,日本在线综合一区二区,久久在线观看免费视频,欧美日韩精品久久综

前言

本文介紹css如何實(shí)現(xiàn)圓角漸變邊框。

-image 實(shí)現(xiàn)漸變邊框

有了 -image 之后將邊框設(shè)置圓角的css屬性名是，實(shí)現(xiàn)漸變邊框變得很方便，

.border-image {
    width: 200px;
    height: 100px;
    border-radius: 10px;
    border-image-source: linear-gradient(45deg, gold, deeppink);
    border-image-slice: 1;
    border-image-repeat: stretch;
}

上面關(guān)于 -image 的三個(gè)屬性可以簡(jiǎn)寫為

 border-image: linear-gradient(45deg, gold, deeppink) 1; 

-: 10px 但是實(shí)際表現(xiàn)沒有圓角。使用 -image 最大的問題在于，設(shè)置的 - 會(huì)失效。

方案二：-image + :

這個(gè)方法也很好理解，既然設(shè)置了 -image 的元素的 - 失效。那么，我們只需要給它加一個(gè)父容器，父容器設(shè)置 : + - 即可：

.border-image-overflow {
    position: relative;
    width: 200px;
    height: 100px;
    border-radius: 10px;
    overflow: hidden;
}
.border-image-overflow::before {
    content: "";
    position: absolute;

    width: 200px;
    height: 100px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 10px solid;
    border-image: linear-gradient(45deg, gold, deeppink) 1;
} 

方案三：-image + clip-path

設(shè)置了 -image 的元素的 - 失效。但是在 CSS 中，還有其它方法可以產(chǎn)生帶圓角的容器，那就是借助 clip-path。簡(jiǎn)而言之，這里，我們只需要在 -image 的基礎(chǔ)上，再利用 clip-path 裁剪出一個(gè)帶圓角的矩形容器即可。

.border-image-clip-path {
    position: relative;
    width: 200px;
    height: 100px;

    border: 10px solid;
    border-image: linear-gradient(45deg, gold, deeppink) 1;
    clip-path: inset(0 round 10px);
}

關(guān)于clip-path，之前文章有介紹過將邊框設(shè)置圓角的css屬性名是，可以看css中clip-path的介紹及使用二

clip-path: inset(0 round 10px) 。

clip-path: inset() 是矩形裁剪

inset() 的用法有多種，在這里 inset(0 round 10px)可以理解為，實(shí)現(xiàn)一個(gè)父容器大小（完全貼合，垂直水平居中于父容器）且 -: 10px的容器，將這個(gè)元素之外的所有東西裁剪掉（即不可見）。

當(dāng)然，還可以利用 : hue-()順手再加個(gè)漸變動(dòng)畫

使用 hue- 實(shí)現(xiàn)漸變背景動(dòng)畫

div {
    width: 300px;
    height: 180px;
    margin: auto;

    background: linear-gradient(45deg, #ffc107, deeppink, #9c27b0);
    animation: hueRotate 10s infinite alternate;
}
@keyframes hueRotate {
    100% {
        filter: hue-rotate(360deg);
    }
}

上面是一個(gè)背景流動(dòng)的動(dòng)畫，所以上面邊框可以做如下改進(jìn)：

.border-image-clip-path {
    width: 200px;
    height: 100px;
    margin: auto;
    border: 10px solid;

    border-image: linear-gradient(45deg, gold, deeppink) 1;
    clip-path: inset(0px round 10px);
    animation: huerotate 6s infinite linear;
    filter: hue-rotate(360deg);
}
@keyframes huerotate {
    0% {
        filter: hue-rotate(0deg);
    }
    100% {
        filter: hue-rorate(360deg);
    }
}

可以實(shí)現(xiàn)一個(gè)背景流動(dòng)圓角邊框效果。

小結(jié)

今天文章就到這里，祝大家元旦快了！