渐变圆角边框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 是渐变的边框的两个颜色

相关推荐
Rsun045514 小时前
React相关面试题
前端·react.js·前端框架
鹏多多.4 小时前
Flutter使用screenshot进行截屏和截长图以及分享保存的全流程指南
android·前端·flutter·ios·前端框架
LawrenceLan5 小时前
37.Flutter 零基础入门(三十七):SnackBar 与提示信息 —— 页面反馈与用户交互必学
开发语言·前端·flutter·dart
怪侠_岭南一只猿5 小时前
爬虫工程师入门阶段一:基础知识点完全学习文档
css·爬虫·python·学习·html
迪巴拉15255 小时前
基于Vue与Spring Boot+Open Cv的智慧校园考勤系统
前端·vue.js·spring boot
swipe5 小时前
JavaScript 对象与属性描述符:从原理到实战
前端·javascript·面试
&活在当下&5 小时前
Vue3 h函数用法详解
前端·javascript·vue.js
小贵子的博客5 小时前
(vue3错误处理)has naming conflicts with other components, ignored.
前端·javascript·vue.js