渐变圆角边框css

概要

样式要求:渐变边框 + 圆角

代码内容

border-radius: 15px;
border: 1px solid transparent;
background-clip: padding-box, border-box;
background-origin: padding-box, border-box;
background-image: linear-gradient(to right, #262537FF, #262537FF),linear-gradient(to right, #76124cFF, #09c4e2FF);

解释:

background-image的第一个to right 是按钮的底色,第二个to right 是渐变的边框的两个颜色

相关推荐
速盾cdn14 分钟前
速盾:高防 CDN 怎么屏蔽恶意访问?
前端·网络·web安全
一生为追梦6 小时前
Linux 内存管理机制概述
前端·chrome
喝旺仔la6 小时前
使用vue创建项目
前端·javascript·vue.js
心.c6 小时前
植物大战僵尸【源代码分享+核心思路讲解】
前端·javascript·css·数据结构·游戏·html
喝旺仔la6 小时前
Element Plus中button按钮相关大全
前端·javascript·vue.js
柒@宝儿姐6 小时前
Git的下载与安装
前端·javascript·vue.js·git·elementui·visual studio
Hiweir ·6 小时前
机器翻译之数据处理
前端·人工智能·python·rnn·自然语言处理·nlp·机器翻译
曈欣7 小时前
vue 中属性值上变量和字符串怎么拼接
前端·javascript·vue.js
QGC二次开发8 小时前
Vue3:v-model实现组件通信
前端·javascript·vue.js·前端框架·vue·html
努力的小雨9 小时前
从设计到代码:探索高效的前端开发工具与实践
前端