本文详细介绍了CSS3中的background-size属性，用于调整背景图像的尺寸，包括固定尺寸、百分比、cover和contain等用法。接着讨论了background-origin属性，它定义了背景图像的绘制区域，如padding-box、border-box和content-box。然后讲解了background-clip属性，用于控制背景图像的定位区域。最后，文章详细阐述了如何使用border-radius创建圆角效果，并提供了多个示例。
1.background-size，规定背景图像的尺寸
当图片需要用背景图像设置需求时使用background：url（图片路径）使用，但是图片大小时原本图片的尺寸，伪类把它变成自己需求的尺寸就可以使用background-size。如下：
<style>
.box{
width: 400px;
height: 200px;
border: 2px solid rgb(76, 234, 234);
background: url(./imges/1.jpg);
background-size：400px 200px；（background-size：宽px 高px）
}
</style>
<body>
<div class="box">
</div>
</body>
background-size：宽px 高px
设置background-size会放大和缩小但是还在边框内，如果太大，图片会放大，但是溢出边框大小的部分将不显示。
background-size还可以设置百分比；如background-size：100% 100%
将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度。
如果只给出一个值，第二个是设置为"auto(自动)，不会保持纵横比,会覆盖背景定位区域但是图片会全部出现展示出来
background-size: cover;也是设置图片大小，会保持纵横比，此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小，但是图片会全部出现展示出来
background-size: contain;会保持纵横比,图片会全部展示出来,不会完全覆盖背景定位区域 ,根据图片等比例大小按照纵横比展示
2.background-origin，属性规定背景的绘制区域
background-origin: padding-box;
background-origin: border-box;
background-origin: content-box;
作者自己总结： 图片大小不变，改变的是背景图片沿着padding内边距内边框线排列、border的外沿边线排列还是根据border里的文字排列。（图片可以看出变化的）
3.background-clip，属性规定 background-position 属性相对于什么位置来定位
作者有话说：虽然我们没有学到但是提一下哈，如果背景图像的 background-attachment 属性为 "fixed"，则该属性没有效果的。
background-clip: padding-box;
背景图在padding之外的部分会被剪裁 而background-origin不会
background-clip: border-box;
在背景图重复出现的时候background-clip不会在边框的内容展示，会在边框的外部完全展示出来，也可以理解为边框内部背景图的部分被剪裁了
background-clip: content-box;
背景图片照常放在border里面但是文本外的背景被剪裁掉了
作者自己总结：padding外的背景图片就会被剪裁掉，不会显示出来。border外部的也会被剪裁掉背筐内部也会被剪裁掉一点，受border影响。最后一个是展示在文本里的背景图片会显示，文本以外的背景图片江北剪裁掉。
4.圆角
<style>
.box{
width: 400px;
height: 200px;
border: 2px solid rgb(76, 234, 234);
background: url(./imges/1.jpg);
background-size: 400px 200px;
所有的角变成5px的圆角
border-radius: 30px;
两个值表示：左上角和右下角、游侠上交和左下角的圆角大小；对角关系
border-radius: 20px 40px;
三个值：左上角、右上角和左下角、右下角的圆角大小
border-radius: 10px 20px 40px;
按照顺时针的顺序去设置左上角、右上角、右下角、左下角，值越大，角越圆
border-radius: 10px 20px 30px 40px;
box-shadow :inset x-offset y-offset blur-radius color;
box-shadow :内阴影 x轴阴影位移量 y轴阴影位移量 模糊大小 阴影颜色;
inset阴影类型内阴影
outset阴影类型外阴影（默认）不需要加inset即可实现
x-offset x轴位移，指定阴影水平位移量（在x轴上位移水平向外移动）
y-offset Y轴位移，用来指定阴影垂直位移量（在y轴上位移）
blur-radius阴影模糊半径阴影向外模糊的模糊范围,值越大越模糊
color阴影颜色，定义绘制阴影时所使用的颜色
box-shadow: inset 15px 30px 20px rgb(253, 212, 226);
box-shadow:100px 20px 15px rgb(253, 212, 226) ;
能均匀的设置边框四周的阴影
box-shadow: inset 5px 5px 50px rgb(253, 212, 226);
}
</style>
<body>
<div class="box">
</div>
</body>
注意：
border-radius也可以画圆，在高宽值都相同的情况下，数值是边框高宽的一半即可画圆或者直接设置50%，这个就是圆的半径
border-radius: 50%;
5.练习，主要还是画图画网页的结构和运用css元素哈
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
