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>

知识点

待补充~

相关推荐
萌萌哒草头将军6 小时前
⚡⚡⚡尤雨溪宣布开发 Vite Devtools,这两个很哇塞 🚀 Vite 的插件,你一定要知道!
前端·vue.js·vite
小彭努力中6 小时前
7.Three.js 中 CubeCamera详解与实战示例
开发语言·前端·javascript·vue.js·ecmascript
浪裡遊7 小时前
跨域问题(Cross-Origin Problem)
linux·前端·vue.js·后端·https·sprint
LinDaiuuj7 小时前
判断符号??,?. ,! ,!! ,|| ,&&,?: 意思以及举例
开发语言·前端·javascript
敲厉害的燕宝7 小时前
Pinia——Vue的Store状态管理库
前端·javascript·vue.js
Aphasia3118 小时前
react必备JavaScript知识点(二)——类
前端·javascript
玖玖passion8 小时前
数组转树:数据结构中的经典问题
前端
呼Lu噜8 小时前
WPF-遵循MVVM框架创建图表的显示【保姆级】
前端·后端·wpf
珠峰下的沙砾8 小时前
Vue3 里 CSS 深度作用选择器 :global
前端·javascript·css
航Hang*8 小时前
WEBSTORM前端 —— 第2章:CSS —— 第3节:背景属性与显示模式
前端·css·css3·html5·webstorm