css:圆角边框渐变色

目录

效果

代码[demo]

知识点


背景说明:设计图有一个这种边框,首先想到的是用border-image设置,但是这种方式出现的角是直角,查询资料了解到,当设置border-image的时候,border-radius就会失效。

效果

代码[demo]

html 复制代码
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>圆角边框渐变色</title>
        <style type="text/css">
            body {
                height: 100vh;
                display: flex;
                justify-content: center;
                align-items: center;
            }
            .demo {
                width: 400px;
                height: 200px;
                border-radius: 50px;
                border: 10px solid transparent; /* 关键:设置透明边框 */
                background-image: linear-gradient(#ffffff, #ffffff), linear-gradient(140deg, rgba(44, 220, 255, 0.8), rgba(255, 41, 41, 0.6));
                background-origin: border-box;
                background-clip: padding-box, border-box;
            }
        </style>
    </head>
    <body>
        <div class="demo"></div>
    </body>
</html>

知识点

待补充~

相关推荐
Li_Ning217 分钟前
【接口重复请求】axios通过AbortController解决页面切换过快,接口重复请求问题
前端
胡八一1 小时前
Window调试 ios 的 Safari 浏览器
前端·ios·safari
Dontla1 小时前
前端页面鼠标移动监控(鼠标运动、鼠标监控)鼠标节流处理、throttle、限制触发频率(setTimeout、clearInterval)
前端·javascript
再学一点就睡1 小时前
深拷贝与浅拷贝:代码世界里的永恒与瞬间
前端·javascript
CrimsonHu1 小时前
B站首页的 Banner 这么好看,我用原生 JS + 三大框架统统给你复刻一遍!
前端·javascript·css
Enti7c1 小时前
前端表单输入框验证
前端·javascript·jquery
拉不动的猪1 小时前
几种比较实用的指令举例
前端·javascript·面试
麻芝汤圆1 小时前
MapReduce 的广泛应用:从数据处理到智能决策
java·开发语言·前端·hadoop·后端·servlet·mapreduce
与妖为邻2 小时前
自动获取屏幕尺寸信息的html文件
前端·javascript·html
哟哟耶耶3 小时前
React-01React创建第一个项目(npm install -g create-react-app)
前端·javascript·react.js