位置: 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)(圆顶山遗址)

  • 投资收益所得税前扣除
  • 借款合同印花税减免优惠政策2022
  • 企业办理银行承兑汇票的手续费用应计入什么账户
  • 电子税务局增值税发票系统
  • 职业年金单位缴费方式
  • 展会补贴收入会计处理
  • 保单的增值税发票
  • 开票税金和实际交的税金差额怎么办
  • 待抵扣进项税额转入进项税额
  • 税局用户名
  • 电子发票读取不出怎么办
  • 2020小规模纳税人印花税怎么算
  • 超过认证期限的发票未抵扣能红冲吗
  • 逾期还款银行罚息怎么算
  • 善意取得增值税专用发票如何处理
  • 货运代理公司会计涉及的科目
  • 不属于抵扣范围的是什么
  • 上年的增值税专票,下年还能抵扣认证吗
  • 企事业承包承租方缴纳的管理费税费
  • 税控盘开票流程图解2022
  • 管理费用的纳税调整
  • 应交税费属于什么费用科目
  • 建筑企业结转成本依据准则
  • 银行贷款受托支付受托人有风险吗
  • 自制材料入库计划成本
  • 预缴增值税抵扣销项税额账务处理
  • 利润分配怎么核算
  • 补缴以前年度附加税
  • 软件存在的意义
  • php怎么上传多个图片
  • macos big sur 怎么样
  • 城建税的会计账务处理
  • php strtok
  • 富山和富士山
  • web服务器做什么用的
  • 企业确认坏账损失时的会计分录为
  • PHP:imagepolygon()的用法_GD库图像处理函数
  • matlab中自由变量
  • yolo object detection
  • javascript最好的教程
  • 面试官问:mysql 的自增 id 用完了,怎么办?
  • php中定义函数
  • python中如何获取列表中的元素
  • 非税收入定额票据可以报销吗去什么地方报销
  • 进项转出了还能再转进去吗
  • 劳务公司承接项目的方案怎么写
  • 商业承兑汇票如何追索
  • erp用友u8操作教程
  • 可转债中签后怎么看涨跌
  • 收据可以入账的情况
  • 外币支付账户
  • 申报无票收入后怎么回冲
  • 高新技术企业取消资格的程序
  • 旅行社差额征收税率多少
  • 本期缴纳上期应纳税额怎么填
  • 材料人工制造费用是什么成本
  • sql语句汇总数据
  • mysql视图语句
  • sqlserver数据库怎么导出
  • asp.net select
  • 怎么操作win10系统
  • win8专业版系统更改电脑设置没反应
  • windowsserver2003ftp服务器怎么搭建
  • 主板不支持u盘装系统怎么办
  • win7任务管理器快捷键ctrl+alt+
  • centos6.5修改用户名
  • centos启动有三个选项
  • win7破解版和正版的区别
  • vlcplayer最新版
  • hosts文件win10
  • win7系统快速关机快捷键
  • perl脚本输出变量
  • js四舍五入两位小数
  • node搭建博客
  • shell脚本 -ne 0
  • js入门基础教程
  • jquery中的动画方法有哪些
  • 安卓短信提示
  • javascript的核心组成部分
  • 安徽国家税务局电话
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设