新闻资讯

    前言

    本文介绍css如何实现圆角渐变边框。

    -image 实现渐变边框

    有了 -image 之后将边框设置圆角的css属性名是,实现渐变边框变得很方便,

    .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; }

    上面关于 -image 的三个属性可以简写为

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

    -: 10px 但是实际表现没有圆角。使用 -image 最大的问题在于,设置的 - 会失效。

    css设置div圆角边框_将边框设置圆角的css属性名是_圆角边框css

    方案二:-image + :

    这个方法也很好理解,既然设置了 -image 的元素的 - 失效。那么,我们只需要给它加一个父容器,父容器设置 : + - 即可:

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

    css设置div圆角边框_圆角边框css_将边框设置圆角的css属性名是

    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

    设置了 -image 的元素的 - 失效。但是在 CSS 中,还有其它方法可以产生带圆角的容器,那就是借助 clip-path。简而言之,这里,我们只需要在 -image 的基础上,再利用 clip-path 裁剪出一个带圆角的矩形容器即可。

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

    将边框设置圆角的css属性名是_圆角边框css_css设置div圆角边框

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

    关于clip-path,之前文章有介绍过将边框设置圆角的css属性名是,可以看css中clip-path的介绍及使用二

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

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

    inset() 的用法有多种,在这里 inset(0 round 10px)可以理解为,实现一个父容器大小(完全贴合,垂直水平居中于父容器)且 -: 10px的容器,将这个元素之外的所有东西裁剪掉(即不可见)。

    当然,还可以利用 : hue-()顺手再加个渐变动画

    使用 hue- 实现渐变背景动画

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

    将边框设置圆角的css属性名是_css设置div圆角边框_圆角边框css

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

    上面是一个背景流动的动画,所以上面边框可以做如下改进:

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

    css设置div圆角边框_圆角边框css_将边框设置圆角的css属性名是

    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); } }

    可以实现一个背景流动圆角边框效果。

    小结

    今天文章就到这里,祝大家元旦快了!

网站首页   |    关于我们   |    公司新闻   |    产品方案   |    用户案例   |    售后服务   |    合作伙伴   |    人才招聘   |   

地址:北京市海淀区    电话:010-     邮箱:@126.com

备案号:冀ICP备2024067069号-3 北京科技有限公司版权所有