css3圆⾓、边界图⽚、盒⼦阴影、背景⼤⼩、填充位置、定位
位置、背景颜⾊渐变
1. css3圆⾓：border-radius
（1）这是个复合属性：⽐如：border-radius：10px；
== border-radius：10px 10px 10px 10px；对应的四个⾓：左上⾓，右上⾓，右下⾓，左下⾓
== 四个值分别对应：border-top-left-radius: 10px、border-top-right-radius: 10px;、border-bottom-right-radius: 10px;、border-bottom-left-radius: 10px;
这四个分开写的值也是复合属性：拿左上⾓举例：border-top-left-radius: 50px;
其实是：border-top-left-radius: 50px(x轴) 50px(y轴)；
效果如图：
（2）如果左上⾓和右上⾓的x轴值的和⼤于了div的上边，会出现什么结果？
答：切点会发⽣偏移，具体的在实例中测试便知
⽐如：
border-top-left-radius: 50px 50px;
border-top-right-radius: 70px 50px;
2. css3边界图⽚：border-image
该属性是复合属性，包括：
值描述
border-image-source⽤在边框的图⽚的路径。相对路径或是绝对路径
border-image-slice图⽚边框向内偏移。没有单位，默认单位就是像素(px)。⽀持百分⽐值
border-image-width图⽚边框的宽度。
border-image-outset边框图像区域超出边框的量。
border-image-repeat图像边框是否应平铺(repeat)、铺满(round)或拉伸(stretch)。默认stretch
3. css3盒⼦阴影：border-shadow
box-shadow: h-shadow v-shadow blur spread color inset;
值说明
h-shadow必需的。⽔平阴影的偏移量。允许负值
v-shadow必需的。垂直阴影的偏移量。允许负值
blur可选。模糊距离
spread可选。阴影的⼤⼩。0px表⽰原始⼤⼩
color可选。阴影的颜⾊。
inset可选。从外层的阴影（开始时）改变阴影内侧阴影
⽐如：box-shadow: 5px 5px 2px 0px green;
4. background-size
规定背景图像的尺⼨⼤⼩
值描述测试
length 设置背景图像的⾼度和宽度。
第⼀个值设置宽度，第⼆个值设置⾼度。
如果只设置⼀个值，则第⼆个值会被设置为 "auto"。
percentage 以⽗元素的百分⽐来设置背景图像的宽度和⾼度。
第⼀个值设置宽度，第⼆个值设置⾼度。
如果只设置⼀个值，则第⼆个值会被设置为 "auto"。
cover 把背景图像扩展⾄⾜够⼤，以使背景图像完全覆盖背景区域。背景图⽚的宽填充
contain把图像图像扩展⾄最⼤尺⼨，背景图⽚的⾼填充
5. background-origin
background-origin 属性规定 background-position 属性相对于什么位置来定位。
注释：如果背景图像的 background-attachment 属性为 "fixed"，则该属性没有效果。
值描述测试padding-box背景图像相对于内边距框来定位。
border-box背景图像相对于边框盒来定位。
content-box背景图像相对于内容框来定位。
6. background-clip
background-clip 属性规定背景的绘制区域。背景图⽚或背景颜⾊
object.style.backgroundClip="content-box"
值描述测试
border-box背景被裁剪到边框盒。（默认值）
padding-box背景被裁剪到内边距框。
content-box背景被裁剪到内容框。
7. 背景颜⾊渐变
（1）线性渐变：linear-gradient
1）渐变⽅向：left top right等、45deg、90deg等两种⽅向⽅式。
borderbox
2）颜⾊开始变化和结束变化的设置：百分⽐，默认起始变化是0%，终⽌变化是100%。
3）线性渐变 - 透明度：为了添加透明度，我们使⽤ rgba() 函数来定义颜⾊结点。rgba() 函数中的最后⼀个参数可以是从 0 到 1 的值，它定义了颜⾊的透明度：0 表⽰完全透明，1 表⽰完全不透明。
4）重复的线性渐变：repeating-linear-gradient() 函数⽤于重复线性渐变。
（2）径向渐变：radial-gradient
background: radial-gradient(center, shape size, start-color, ..., last-color);
1）渐变中⼼，可选参数，如30px 20px指距离左侧30px距离上侧20px，可以是像素，可以是百分⽐，也可以是关键字，默认为中⼼位置。
2）shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表⽰圆形，ellipse 表⽰椭圆形。默认值是 ellipse。
3）size 参数定义了渐变的⼤⼩。它可以是以下四个值：
closest-side：指定径向渐变的半径长度为从圆⼼到离圆⼼最近的边
closest-corner：指定径向渐变的半径长度为从圆⼼到离圆⼼最近的⾓
farthest-side：指定径向渐变的半径长度为从圆⼼到离圆⼼最远的边
farthest-corner：指定径向渐变的半径长度为从圆⼼到离圆⼼最远的⾓
4）重复的径向渐变
repeating-radial-gradient() 函数⽤于重复径向渐变。
background: repeating-radial-gradient(red, yellow 10%, green 15%)

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。