位置: IT常识 - 正文

CSS样式:渐变色圆角边框(css如何设置渐变色)

编辑:rootadmin
CSS样式:渐变色圆角边框 目录预期效果解决方法1.两层元素:外层渐变背景+圆角+内边距,里层圆角+背景色2.伪元素:background-clip属性+伪元素+定位+元素本身背景(以伪元素背景色做边框)3.单层元素: background-clip+background-iamge+background-origin番外:clip-path属性预期效果

推荐整理分享CSS样式:渐变色圆角边框(css如何设置渐变色),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:css如何设置渐变色,css渐变色设置,css实现渐变色,css样式颜色渐变属性,css渐变色代码 rgba,css样式颜色渐变属性,css渐变色代码 rgba,css样式渐变色,内容如对您有帮助,希望把文章链接给更多的朋友!

​​​​ 最近遇到一个css样式,最终需要实现渐变色+圆角的边框,最开始我的想法是通过border-image和border-radius实现这种效果,后来发现这两个属性竟然不兼容。 border-image border-image与border-radius属性分别可以实现渐变或圆角,但是不能一起用于渐变圆角边框(如图)。 官方给了一长串的解释,总的来说就是如果通过border-image属性给边框填充颜色,那么border-radius的裁剪效果就失效了。

贴了一个在线演示的地址,有兴趣的童鞋可以看一下 codepen演示地址:https://codepen.io/szy018/pen/MWGavvM

解决方法

反手贴一个在线地址,所有方法的代码都在里面,请自取。 codepen演示地址:https://codepen.io/szy018/pen/oNdjogm

1.两层元素:外层渐变背景+圆角+内边距,里层圆角+背景色CSS样式:渐变色圆角边框(css如何设置渐变色)

还是贴个代码吧,防止被骂:

<div class="example1 out"> <div class="in">两层元素</div> </div>.example1 { &.out { padding: 4px; border-radius: 99px; background: linear-gradient(to right, red, blue); } .in { width: 100%; height: 100%; background: #fff; border-radius: 99px; }}.box { width: 200px; height: 50px; line-height: 50px; text-align: center; margin-right: 20px;}

这种方法其实是将外层元素的内边距当作边框,由于外层元素背景是渐变色,视觉上就做到了渐变色的圆角边框。 由于是用内边距做的边框,多少会有点瑕疵,像下图(左边为内边距做边框),可以看到内边距左边框的内角没有真正的边框内角丝滑。 是因为这是两个元素且大小不一样,所以需要分别计算两个元素的圆角大小才能百分百还原边框。 缺点:这种方法需要里外两个元素,而且内容背景不可以透明(否则会暴露出外层元素的背景色)。最最重要的是内外层元素圆角大小需要计算(多少有点麻烦)。总的来说,不推荐(因为我就是用的这个方法)。

2.伪元素:background-clip属性+伪元素+定位+元素本身背景(以伪元素背景色做边框)

所有方法的代码都贴在那个地址里了哦,所有box类的样式都是一样的,这里就不贴了

<div class="example2 box">伪元素</div>.example2 { border: 4px solid transparent; position: relative; border-radius: 99px; background-color: #fff; background-clip: padding-box; &::before { content: ""; position: absolute; top: 0; right: 0; left: 0; bottom: 0; z-index: -1; margin: -4px; border-radius: 99px; background: linear-gradient(to right, red, blue); }}

background-clip属性非常好用,译名背景剪辑,它可以决定显示那一部分的元素背景,默认为border-box(边框及边框以内)。还有两个属性padding-box(内边距及内边距以内),content-box(文本内容区域)。 我们可以通过伪元素,将伪元素全部显示,而元素本身使用padding-box属性值,元素本身给一个透明色的边框,防止伪元素因为超出元素区域显示不出来。 就可以实现以下效果(显示的是伪元素的背景,但是区域是元素本身真实的边框区域) 缺点:和方法以一样,内容背景不可以透明

background-clip兼容性还是很好的:

3.单层元素: background-clip+background-iamge+background-origin

这个方法强烈推荐,简洁优雅

.example3 { border: 4px solid transparent; border-radius: 99px; background-clip: padding-box, border-box; background-origin: padding-box, border-box; background-image: linear-gradient(to right, #fff, #fff), linear-gradient(to right, #8f41e9, #578aef);}

背景属性都可以设置多个值,通过逗号分割。从左到右显示优先级依次递减,即先

本文链接地址:https://www.jiuchutong.com/zhishi/288926.html 转载请保留说明!

上一篇:锡安国家公园的秋色,犹他州 (© pabradyphoto/Getty Images)(80岁以上老年卡上的钱如何消费)

下一篇:圆顶礁国家公园里的希克曼桥,美国犹他州 (© Tim Fitzharris/Minden Pictures)(圆顶山遗址)

  • 新浪微博怎么加好友(新浪微博怎么加群)

    新浪微博怎么加好友(新浪微博怎么加群)

  • 华为p40来电闪光灯如何设置(华为p40来电闪光灯怎么弄)

    华为p40来电闪光灯如何设置(华为p40来电闪光灯怎么弄)

  • iPhone11如何设置辅助触控功能(iphone11如何设置主屏幕壁纸)

    iPhone11如何设置辅助触控功能(iphone11如何设置主屏幕壁纸)

  • 荣耀30s支持深色模式吗(荣耀30有深色模式吗)

    荣耀30s支持深色模式吗(荣耀30有深色模式吗)

  • xps数据用什么软件打开

    xps数据用什么软件打开

  • 华为mate30pro相册怎么加密(华为mate30pro相册怎么隐藏照片)

    华为mate30pro相册怎么加密(华为mate30pro相册怎么隐藏照片)

  • 笔记本电脑需要无线网卡吗(笔记本电脑需要插电使用吗)

    笔记本电脑需要无线网卡吗(笔记本电脑需要插电使用吗)

  • 苹果手机黑屏但是有声音怎么回事(苹果手机黑屏但是有声音屏幕不亮)

    苹果手机黑屏但是有声音怎么回事(苹果手机黑屏但是有声音屏幕不亮)

  • 小米手机进水了声音变了怎么办(小米手机进水了修一下要多少钱)

    小米手机进水了声音变了怎么办(小米手机进水了修一下要多少钱)

  • 机顶盒开不了机怎么回事(机顶盒开不了机怎么恢复出厂设置)

    机顶盒开不了机怎么回事(机顶盒开不了机怎么恢复出厂设置)

  • 短信悬浮窗是什么软件(短信悬浮窗是什么功能)

    短信悬浮窗是什么软件(短信悬浮窗是什么功能)

  • 1000kwh等于多少度电(1000kwh等于多少wh)

    1000kwh等于多少度电(1000kwh等于多少wh)

  • word设置底纹图案样式(word设置底纹图案样式为12.5%)

    word设置底纹图案样式(word设置底纹图案样式为12.5%)

  • 苹果11可以反向充电吗(苹果11可以反向充电嘛)

    苹果11可以反向充电吗(苹果11可以反向充电嘛)

  • 苹果x送的是无线耳机吗(苹果x送蓝牙耳机吗)

    苹果x送的是无线耳机吗(苹果x送蓝牙耳机吗)

  • 拼多多15单免一怎么用(拼多多15单免一单规则)

    拼多多15单免一怎么用(拼多多15单免一单规则)

  • qq特别关心怎么取消声音(qq特别关心怎么没有声音)

    qq特别关心怎么取消声音(qq特别关心怎么没有声音)

  • 苹果xsmax有高通基带吗

    苹果xsmax有高通基带吗

  • 抖音被评级怎么能恢复?(抖音评级怎么申诉)

    抖音被评级怎么能恢复?(抖音评级怎么申诉)

  • 树莓派4发布时间(树莓派4b 发布)

    树莓派4发布时间(树莓派4b 发布)

  • 全民k歌听歌有记录吗(全民k歌只要听了就有记录吗)

    全民k歌听歌有记录吗(全民k歌只要听了就有记录吗)

  • win10锁屏壁纸保存方法(window10锁屏壁纸图片在哪)

    win10锁屏壁纸保存方法(window10锁屏壁纸图片在哪)

  • npm install或npm i后没有依赖包node_modules?

    npm install或npm i后没有依赖包node_modules?

  • Chrome 网上应用店 FaWave(发微)(chrome网上应用商店在哪)

    Chrome 网上应用店 FaWave(发微)(chrome网上应用商店在哪)

  • 2019年的个税现在还可以退吗
  • 什么情况用已交税金
  • 房产税的计税依据是含税还是不含税
  • 印花税应计什么科目?
  • 材料采购成本是主营业务成本吗
  • 哪些准备金支出可实现税前扣除?
  • 税控盘退费怎么做会计分录
  • 电子税务局实名核验失败怎么回事啊
  • 出差补贴没有发票怎么做账
  • 社保局发放的稳岗补贴怎么入账
  • 如何根据销售额降序排序
  • 未分配利润很高说明什么
  • 会计软件每年都要付钱的吗
  • 物业费计入哪里
  • 支付宝怎么开个人增值税发票
  • 小规模纳税人实收资本印花税如何交
  • 购电子承兑汇票差额计入什么科目?
  • 为什么开增票要加点
  • 房地产企业用电计入什么科目
  • 汇算清缴残保金填哪里
  • 研发准备金的计提比例是多少
  • 小微企业月销售额不超过15万
  • 增值税附加税可以抵扣吗?
  • 维修费用的税率
  • 开票超过离线时长怎么解决
  • 承兑汇票延期托收证明
  • pos机刷卡手续费谁承担
  • 外管证预缴增值税怎么抵扣
  • 本月计提下月冲回
  • 营改增之前的建筑业税率是多少
  • 车船税的会计分录怎么写
  • xshell怎么用vim
  • linux系统输入
  • 增值税发票可以抵扣多少
  • 小程序在线反编译网页版
  • 肚子胀气怎么办 4个方法快速排气很轻松
  • 国有企业融资方案比较
  • 会计政策变更累计数
  • 建筑企业跨省经营
  • 增值税专用发票丢了怎么补救
  • 个税中累计住房怎么计算
  • 为什么说网络安全靠人民
  • zgrep命令详解
  • 政府性基金账务处理
  • vue项目使用less
  • wordpress编辑文章
  • 个体工商户能享受4050政策吗
  • 什么是三证合一纳税人
  • 企业注销未抵扣完进项税怎么处理
  • 个人所得税部分缴款怎么算
  • 服务业预收账款什么时候确认收入
  • 没有计提坏账如何做账
  • 航天信息税票
  • 应收票据的分录怎么做
  • 固定资产发票后到怎么入账
  • 如何进行企业建账
  • windows怎么安装apk
  • windows7 ie
  • 在windows中用于显示正在运行的程序名称的栏称为
  • win8应用商店废了
  • xwizard.exe是什么
  • win7设置宽带拨号
  • win10 u盘写保护
  • 联想笔记本win7装win10
  • win8跳过开机密码
  • win10 edge浏览器崩溃
  • 原生封装ajax
  • android模块开发
  • 了不起的女孩
  • 安卓自定义app
  • 基于贪心算法
  • 自动清除数据
  • 安全工具有哪些
  • asm/semaphore.h: No such file or directory
  • 批处理技术有哪些
  • unity安装进度条不动
  • 获取标签的属性值的方式
  • js中substring和substr有区别吗
  • [置顶]从lv2开始开挂的原勇者候悠闲的异世界生活
  • 石家庄经开区税务局
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设