您现在的位置是：网站首页> 编程资料编程资料

css 透明边框background-clip妙用一文教你玩转CSS border(边框)CSS 奇思妙想边框动画效果的实现CSS3 按钮边框动画的实现CSS3 实现发光边框特效两款纯CSS3鼠标经过按钮边框动画特效一篇文章带你学习CSS3图片边框css3多种边框悬停按钮填色动画特效CSS3实现缺角矩形，折角矩形以及缺角边框CSS边框长度控制功能的实现CSS实现半透明边框与多重边框的场景分析

2021-09-03 873人已围观

简介这篇文章主要介绍了css 透明边框background-clip妙用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

本篇文章主要介绍了css 透明边框background-clip妙用，分享给大家，也给自己留个笔记

 .border { width: 300px; height: 300px; background: url("https://waiqin.oss-cn-shenzhen.aliyuncs.com/jxb-vip-ts/activitys/activitys15677540269589timg.jpg"); background-size: cover; margin-left: 100px; border: 10px solid rgba(255,255,255,.6); background-clip: padding-box; }

background-clip: padding-box; 重点代码

background-clip 这个属性的初始值是 border-box，意味着背景会被元素的 border box（边框的外沿框）裁切掉。如果不希望背景侵入边框所在的范围，我们要做的就是把它的值设为 padding-box，这样浏览器就会用内边距的外沿来把背景裁切掉

效果

不加background-clip: padding-box; 效果
可以看出背景图被半透明边框透出来了

加了之后,背景在边框部位就被裁减了

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

上一篇：浅析css中使用border属性与display属性的方法一文了解CSS 标签显示模式详解CSS标签中的显示模式详解css display:box 新属性浅谈CSS3中display属性的Flex布局的方法浅谈CSS的Display属性可能的值CSS display属性的table表格布局详解CSS标签模式display属性

下一篇：详解CSS3新增的背景属性CSS 有序或者无序列表的前面的标记 list-style-type 属性的实现css浮动 float属性详解css选择器四大类：基本、组合、属性、伪类js判断并告知支持css属性（值）的情况分析

您现在的位置是：网站首页> 编程资料编程资料

相关内容

点击排行

本栏推荐

猜你喜欢