background-clip: padding-box;的作用b

最新推荐文章于 2022-05-18 20:22:51 发布
最新推荐文章于 2022-05-18 20:22:51 发布
阅读量3.6k 收藏 1
点赞数
分类专栏： 编程开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wanhui520/article/details/48435507
版权

背景被裁剪到内边距框。

在写移动端页面时，经常会用padding撑开一个内容，这时如果有圆角的话，里面的背景将超出圆角，看不出圆角效果，这时需要添加这个属性。

background-clip的属性还有：

content-box: 背景被裁剪到内容框的位置

border-box: 背景被裁剪到边距框的位置

Tomefy
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【css】半透明边框- background-clip: padding-box;
qq_34365469的博客
03-14 1883
一.要达到的效果 半透明边框效果 二.效果图 三.相关知识点 背景图片从什么地方开始裁切: background-clip content-box: 只显示内容区部分的背景图片 padding-box:显示内容区和内边距部分的背景图片 border-box: 显示内容区、内边距和边框部分的图 四.源码 ----------------------------------...
详解css中background-clip属性的作用
12-12
当设置`background-clip`为`padding-box`时，背景将只填充到内填充区域内，不包括边框。代码如下： ```html *{margin:0;padding:0;} .box{ width:380px; height:280px; margin:100px auto; background:url...
CSS3:background-orgin：padding-box、border-box、content-box属性值理解
m0_43410458的博客
05-18 772
border-box：起始位置为左上角，背景覆盖包括所有边框宽度，padding不影响背景起始位置 ​content-box：起始位置为左上角内，不包括左、上边线宽度，背景覆盖仅包括右、下边框宽度，左、上两侧设置内边距padding时，背景图片起始位置跟着移动 padding-box：起始位置为左上角内，不包括左、上边线宽度，背景覆盖仅包括右、下边框宽度，左、上两侧设置padding时，背景图片起始位置不变。 ...
CSS3 之background-clip 属性
生活要有激情的博客
05-31 1460
clip中文为裁剪的意思，为了明显展示三个属性padding-box,border-box,content-box的区别，下面的代码中加上20px的内边距。1.padding-boxdiv{ width: 150px; height: 150px; border: 20px solid rgba(0,0,0,0.2);
background-origin默认从padding-box开始的哈
qq_37805832的博客
09-22 1052
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>113-背景图片定位区域属性</title> <style> *{ margin: 0; padding: 0; } ul li{ list-s
CSS之Background-clip属性
热门推荐
tian361zyc的博客
06-22 1万+
css
CSS3教程：background-clip和background-origin
09-27
在不支持`background-clip`和`background-origin`属性的浏览器中，通常会退回到CSS2.1的行为，即`background-clip`默认类似`border-box`，`background-origin`默认类似`padding-box`。然而，Internet Explorer（尤其...
解决CSS 中box-sizing与background-clip解决背景显示范围的问题
12-11
过去在学习CSS的时候，首要任务就是要理解“box model”，因为box model是CSS里头很重要的模型概念，描述了padding、margin、border与content的空间定位，今天的项目竟然卡在一个简单的小问题，因此就用一篇文章做个...
深入浅出CSS3 background-clip,background-origin和border-image教程
12-01
- `background-clip: padding-box`：背景填充到内边距盒，不包括边框。 - `background-clip: border-box`：背景延伸到边框盒，这是默认值。 2. **background-origin** `background-origin`属性定义了背景图像的...
CSS背景background、background-position使用详解
09-25
- `background-clip`：控制背景绘制的区域，可以是`border-box`（默认，背景绘制到边框外缘）、`padding-box`（背景绘制到内边距外缘）或`content-box`（背景绘制到内容外缘）。 - `background-blend-mode`：定义...
CSS background-clip属性
小阳的博客
12-05 2825
Clip有“裁剪”的意思，，放到CSS的background中就是裁剪背景。当你看上一套西服，你非常喜欢，于是你一咬牙买了下来，却发现它并不合你的身，穿在你瘦小的身材上它显得有些肥大，这时你就需要裁剪。裁剪西服的工具是剪刀。转换场景，如果你发现背景不合适，裁剪的工具是什么呢？没错，就是这个background-clip。background-clip是CSS3的新属性。它就是一把剪刀，哪里不爽剪哪里
【CSS】background-clip属性解决background问题。
得未曾有 心净踊跃
09-05 1861
引言：相信你点进来，一定对这个话题感兴趣，那今天我们就来研究一下半透明边框！！！先来举一个例子：div{ background-color:#fff; border:40px solid rgba(255,255,255,.5); ... //此处省略不重要的代码！！！ } 背景图片是#fff白色，边框颜色是rgba(255,255,2
padding+background-clip绘制图形
Wind_waving的博客
03-26 245
参考《CSS世界》——张鑫旭 background-clip属性用于描述背景绘制的区域，默认为border-box，还可以取值content-box，padding-box 效果一：移动端经常使用的折叠菜单图标 分析：上下两条使用border-top/bottom实现，中间条利用黑色绘制背景部分。想要背景和border中间有间隙，设置上下padding。默认背景绘制包含padding和border，使用background-clip属性修改背景绘制区域 代码： .menu{ w
【css实现:渐变文字】巧妙使用background-clip属性
popstarqq的博客
03-19 2243
1 效果 （1）用背景图片实现 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> h1{ background: url('./1.webp'); background-size: 100% 100%; -webkit-background-clip: tex
background-clip属性详解
Emiya__Tan的博客
07-08 5135
我的《css揭秘》读后总结 近日读完了《CSS揭秘》，感觉收获颇丰，固做一些总结，以免自己忘得太快。 目录我的《css揭秘》读后总结1，DRY原则2，你不知道的background(1)background-clip(2)background-origin新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内...
box-sizing:border-box,padding-box 颠覆盒子模型
ISaiSai的专栏
01-16 5758
DEMO： box-sizing：定义使用的盒子模型(CSS3) 默认值是  content-box ：border  padding 在width height 外面，传统的盒子模型 border-box：border 和 padding 在width height 中 padding-box :(w3c 似乎没有，在firefox中有) padding包含在width height
padding，margin，盒模型
wen_special的博客
02-09 293
padding：内边距。内部填充。设置padding之后会撑开容器的大小。可以设置4个方向的：top，right，bottom，left。 若padding:20px ，则在容器的4个方向的padding都为20px; 若padding：20px 30px， 则在容器的上下方向的padding值为20px，左右方向的padding值为30px; 若padding：10px 20px 30px，...
css3中box-sizing属性用法详解-content-box-padding-box-border-box
weixin_34363171的博客
12-26 445
手机页面多列不计算Border的方法 %borderbox{ -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box;} box-sizing...
CSS3 background-clip 属性和 box-sizing 属性
qq_32095903的博客
07-08 1192
一、CSS3 box-sizing 属性：允许以特定的方式定义匹配某个区域的特定元素。 例：“` box-sizing:border-box; -webkit-background-size: 100%; -ms-background-size: 100%; -moz-background-size:100%; -o-background-size: 100%;``` box-sizin
background-clip: padding-box;是啥
最新发布
09-06
具体来说，当background-clip属性设置为padding-box时，背景图像不会超出元素的内边距框。<span class="em">1</span><span class="em">2</span><span class="em">3 #### 引用[.reference_title] - *1* *2* *3* [奇妙...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值