背景图的设置与盒子模型、阴影和圆角

一、背景颜色。

  通过background-color的方式来进行操作，但颜色的输入方式有很多。其中

（1）可以直接写颜色的英文，如：background-color：red。此时就会使背景呈现出红色

  (2)用十六位进制的方式（0-f）输入形式#xxxxxx。当其中有相同的两个连着的元素是可以省成一个

（3）用rgb的方式（rgb是三原色的缩写），在次中写数字，数字的范围为0-255（且值越小颜色越深。形式rgb（x,x,x)

二、背景图形的样式配置。

  通过样式来设置背景图片时，需要使用background-image属性来设置，而图片的路径需要写在url（）中，但是在默认情况下，背景图片如果没有容器大时它会将图片复制平铺开来再显示。对于背景图的处理，我们一般有如下方式：

[1]1、no-repeat：不平铺

2、repeat-x：x轴方向平铺

3、repeat-y：y轴方向平铺

4、repeat：x轴和y轴都平铺（默认方式）

这时要想设置图的值，我们需要另外的属性：background-repeat

[2]但若想要定位图的位置时我们需要background-position来操作：

1、left top：左上角（默认值）

2、right top：右上角

3、left/right bottom：左/右下角

4、left/right/center center：左/右中间位置/居中位置。

但他们都可以用一个通用的方式来设置：

background：color position size repeat origin clip attachment image；

[3]另外还有一些方式：border-left-color之久编辑的左边框的颜色。其中还有样式-style（solid-实线、dotted-小圆点构成的线、dashed-虚线），粗细（宽度）等等

[4]内边距的设置：

padding-left/right/top/bottom

若没有规定方向只写了几个样式，它的显示顺序：

（1）四个值时：上、右、下、左

（2）三个值时：上、左右、下

[5]外边距的设置：

首先它指的是容器之间的间距叫外边距，用margin来设置，其他的跟内边距基本一致。

[6]float（它可以是标签中的内容从竖着显示变成横着显示，他有两个值：

-left：左浮动

-right：右浮动

clear：both（清除浮动）

三、阴影。

通过box-shadow来实现的，可以在框中添加一个或多个阴影，该属性是用逗号来分隔的。每个阴影由2-4个长度值，可选的颜色值以及可选的position关键词来规定。

其中有如下几个值：

h-shadow：水平阴影的位置，必需，允许负值

v-shadow：垂直阴影的位置，必需，允许负值

blur：模糊距离

spread：阴影的尺寸

color：阴影的颜色

position：阴影的位置，将外部（outset）阴影改为内部阴影，默认为inset

四、圆角。

使一个具有棱角的元素变的圆一些，使用border-radius属性来定义。它的语法：

border-radius：length/persentage

即border-radius：xpx xpx xpx xpx/x% x% x% x%

但当没有规定方向时，有以下定律：

1、有四个值时：左上-右上-右下-左下

2、有三个值时：左上-右上和左下-右下

3、有两个值时：左上和右下-右上和左下