css边框与阴影

圆形边框

border-radius

border-radius: 20px 50px;两个值：第一值表示左上角和右下角的圆角大小，第二个值表示 右上角和左下角的圆角大小。

border-radius: 10px 30px 50px;三个值：第一个值表示左上角的圆角大小，第二个值表示右上角和左下角的圆角大小，第三个值表示右下角的圆角大小。

border-radius: 20px 10px 30px 50px;四个值：按照顺时针的顺序去设置 左上角，右上角，右下角，左下角。

border-radius: 50%;四个角都是50%

利用border-radius属性制作圆形的两个要点：

1.元素的宽度和高度必须相同。

2.圆角的半径为元素宽度的一半，或者直接设置圆角半径值为50%。

盒子阴影

box-shadow:inset x-offset y-offset blur-radius color;

inset：阴影类型内阴影

outset：阴影类型外阴影 （把inset删除 默认就是outset 外阴影模式）

x-offset：X轴位移，指定阴影水平位移量

y-offset：Y轴位移，用来指定阴影垂直位移量

blur-radius：阴影模糊半径阴影向外模糊的模糊范围

color：阴影颜色，定义绘制阴影时所使用的颜色

背景

length

background-size: 200px 400px;
background-size: 200px;

设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。

如果只给出一个值，第二个是设置为"auto(自动)"。

background-size: 100% 100%;

会覆盖背景定位区域，但是图片会全部出现展示出来，不会保持纵横比。

cover 此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。

background-size:cover;

会保持纵横比，会覆盖背景定位区域，但是图片会出现展示不全。

contain 此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。

background-size:contain;

会保持纵横比，图片会全部展示出来，不会完全覆盖背景定位区域。

背景图像位置

background-origin:padding-box;

背景图像相对于内边距框来定位。

背景图像会贴着内边距的内部来展示，也是默认的。

background-origin:border-box;

背景图像相对于边框盒来定位 。

背景图像会贴在边框的内部来展示。

background-origin:content-box;

背景图像相对于内容框来定位。

背景图像会贴在内容的内部来展示。

background-clip:padding-box;

背景被裁剪到内边距框。

background-clip背景图在padding之外的部分会被剪裁，而background-origin不会。

background-clip:border-box;

背景被裁剪到边框盒。

在背景图重复出现的时候background-clip不会在边框的内容展示，会在边框的外部完全展示出来，也可以理解为边框内部背景图的部分被剪裁了。

background-clip: content-box;

背景被裁剪到内容框。

背景图片还是在padding的内部位置，在文本外的区域会被剪裁掉。