10.追求美是我们的天性css3边框和背景

1、一、边框宽度通过 border-width 属性进行设置属性值长度 1px%百分比细 中间粗thinmedium thick二. 边框样式通过 border-style 属性进行设置属性值none：无边框 dashed：定义虚线 dotted：定义点状边框 double：定义双线groove：定义3D 凹槽边框inset：定义 3D inset 边框outset 定义ridge：定义3D outset 边框3D 垄状边框solid：定义实线三. 单个边框设置上边border-top-width border-top-style border-top-color下边border-bottom-w

2、idth border-bottom-style border-bottom-color左边border-left-width border-left-style border-left-color右边border-right-width border-right-styleborder-right-color四.边框短属性borderborder-top border-bottom border-leftborder-right 五.圆角边框border-radius四个角左上角右上角border-top-left-radiusborder-top-right-radiusborder-bo

3、ttom-left-radius左下角border-bottom-right-radius 右下角六.边框border-image 属性是一个简写属性，用于设置以下属性用在边框的的路径border-image-sourceborder-image-slice border-image-width border-image-outset border-image-repeat边框向内偏移边框的宽度边框图像区域超出边框的量图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)七.边框阴影box-shadow 属性是一个属性，用来设置以下属性值box-shadow

4、: h-shadow v-shadow blur spread color inset;必需。水平阴影的位置。允许负值。必需。垂直阴影的位置。允许负值。可选。模糊距离。可选。阴影的尺寸。可选。阴影的颜色。可选。将外部阴影 (outset) 改为h-shadowv-shadow blurspreadcolor inset阴影。八.背景设置background-color设置元素的背景颜色设置元素的背景图像。background-image设置是否及如何重复背景图像。background-repeat可能的值值描述repeat默认。背景图像将在垂直方向和水平方向重复。规定背景的尺寸。backgro

5、und-size测值描述试length设置背景图像的高度和宽度。测第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 auto。percentage以父元素的百分比来设置背景图像的宽度和高度。测第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 auto。cover把背景图像扩展至足够大，以使背景图像完背景区域。测背景图像的某些部分也许无法显示在背景定位区域中。contain把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。测设置背景图像的开始位置。background-ition可能的值值描述top left如果您仅规定了一个，那么第

6、二个值将是center。top center默认值：0% 0%。top rightcenter left center center center right bottom left bottom center bottom rightx% y%第一个值是水平位置，第二个值是垂直位置。repeat-x背景图像将在水平方向重复。repeat-y背景图像将在垂直方向重复。no-repeat背景图像将仅显示一次。inherit规定应该从父元素继承 background-repeat 属性的设置。ent 设置背景图像是否固定或者随着页面的其余部分滚动。background-atta规定背景的绘制区域。

7、background-clip测值描述试border-box背景被裁剪到边框盒。测padding-box背景被裁剪到内边距框。测content-box背景被裁剪到内容框。测规定背景的定位区域。background-origin测值描述试padding-box背景图像相对于内边距框来定位。测border-box背景图像相对于边框盒来定位。测content-box背景图像相对于内容框来定位。测九.背景短属性background: lightgray top right no-repeat border-box content-box local url(banana.png);可能的值值描述scr

8、oll默认值。背景图像会随着页面其余部分的滚动而移动。fixed当页面的其余部分滚动时，背景图像不会移动。inherit规定应该从父元素继承 background-attaent 属性的设置。左上角是 0% 0%。右下角是 100% 100%。如果您仅规定了一个值，另一个值将是 50%。y第一个值是水平位置，第二个值是垂直位置。左上角是 0 0。是像素 (0px 0px) 或任何其他的 CSS。如果您仅规定了一个值，另一个值将是 50%。您可以混合使用 % 和ition 值。xbackground-color: lightgray;background-ition: top right;background-repeat: no-