|
一：背景（Background）与颜色（Color） 一。背景：background。设置对象的背景特性。一个元素可以设置多重背景图像，每组之间用逗号隔开，如果存在重叠关系，前面的背景图像会覆盖在后面背景图上。
1.background-color：指定背景的颜色。取值：正常的颜色取值。 2.background-image：背景图片。如果设置了这个属性，最好也添加下background-color ，用于当背景image不可见时保持与文本颜色有一定的对比度 3.background-repeat：设置对象背景图如何铺排填充。 repeat-x：背景在横向上平铺。 repeat-y：背景在纵向上平铺。 repeat：背景图在横向纵向上平铺。 no-repeat：图像不平铺。 round：背景图像自动缩放直到适应且填充整个容器。 space：背景图像以相同的间距平铺且填充满整个容器或者某个方向。
space:
round:
4.background-attachment：指定对象的背景图像是随对象内容滚动还是固定的。 取值：fixed：固定位置。scroll：相对于元素固定，跟着元素。local：相对于元素内容固定，总是跟着内容。 5.background-position:指定对象的背景图像位置。 取值：left，right，top，bottom，center。也可以用百分比。 6.background-size：指定对象的背景图像的尺寸大小。 取值：auto：背景图的真实大小。cover：等比例缩放到完全覆盖容器。有可能超出容器。 contain：将背景图等比例缩放到宽度或者高度与容器的宽度或者高度相等，始终都在容器内。 7.background-clip：指定对象的背景图像向外裁剪的区域。 取值：padding-box：从padding区域（不含padding）开始向外裁剪背景。 border-box：从border区域（不含border）开始向外裁剪背景。 content-box：从content 区域开始向外裁剪背景。 text：从前景内容的形状做为裁剪区域向外裁剪。 8.background-origin：指定对象的背景图像显示的原点。
取值：padding-box：从padding区域（不含padding）开始向外裁剪背景。 border-box：从border区域（不含border）开始向外裁剪背景。 content-box：从content 区域开始向外裁剪背景。 二。颜色：color：设置对象的文本颜色。 可使用颜色名，rgb，hex，rgba，hsl，hsla，transparent等等来设置。
opacity：设置对象的不透明度。取值范围为0.0-1.0。 opacity：0.2
opacity：0.8
颜色名可参考：颜色参考链接 二：边框(Border) 一.边框：border 设置对象边框的特性。 1.语法：border：length style color 2.style：none ，hidden，dotted，dashed，solid，double，groove，ridge，inset，outset。
二.相关属性。 1.border-width：设置边框宽度：常用取值：medium：默认值，相当于3px。thin：1px。thick：5px。不可以为负值。 2.border-color:设置边框颜色。 3.border-top:设置顶部边框。border-top-width,border-top-style,border-top-color 分别设置 宽度，样式以及颜色 4.border-right：设置右边框。 5.border-bottom：设置底边框。 6.border-left：设置左边框。 7.border-radius：设置对象使用圆角边框。取值为数字或者百分比。
8.当然也可以给4个角单独的设置： 左上角：border-top-left-radius，右上角：border-top-right-radius，左下角：border-bottom-left-radius，右下角：border-bottom-right-radius 9.box-shadow:设置对象阴影。
第一个值：设置水平方向阴影偏移量。 第二个值：设置垂直方向阴影偏移量。 第三个值：设置对象的阴影模糊值。不允许为负值 第四个值：设置对象的阴影外延值，不允许为负值 第五个值：color。 第六个值：inset，阴影在左上位置，如下图：box-shadow:6rpx 6rpx 6rpx 6rpx rebeccapurple inset
10.border-image：对象的边框样式使用图片来填充。 1>border-image-source:设置图片的来源。使用绝对或者相对地址或者渐变色来确定图片。 2>border-image-slice :设置边框背景图的分隔方式。取值：数值／百分比 fill.该属性指定从上右下左来分割图片，将图像分成4个角，4条边以及中间区域。中间区域始终是透明的，除非使用关键字fill。 3>border-image-width:设置边框背景的宽度。用于指定使用多厚的边框来承载呗裁剪后的图像。 4>border-image-outset：设置对象的边框背景图的扩展，意思就是说假如设置了10rpx，那么图像就会在原来基础上外延10rpx在显示。 5>border-image-repeat：设置对象的边框图片的平铺方式。 stretch:拉伸。 repeat：平铺，碰到边界的时候截断。 round：根据边框的尺寸动态调整图片的大小，使得刚好可以铺满整个边框。 space：根据边框的尺寸动态调整图片的之间的间距，使得刚好铺满整个边框。 | 
收藏