背景颜色的样式设置

背景颜色的样式设置有4种方法

1、直接使用相应颜色的英文单词表示

如 

<style>
        .box {
            width: 100px;
            height: 100px;
            background-color: red;
        }
</style>

2、使用16进制表示

如

<style>
        .box {
            width: 100px;
            height: 100px;
            background-color: #000000;
        }
</style>

3、使用rgb表示

如

<style>
        .box {
            width: 100px;
            height: 100px;
            background-color: rgb(255,255,255);
        }
</style>

rgb后的()中需要写3个数字并使用,隔开，数字的范围在0~255之间，值越小颜色越深。

4、使用rgba表示

如

<style>
        .box {
            width: 100px;
            height: 100px;
            background-color: rgba(0,255,255, 1);
        }
    </style>

rgba与rgb相似，但rgba()中最后一个值表示透明度，范围在0~1之间，0表示完全透明，1表示完全不透明。

背景图片样式设置

使用 background-image属性来设置，图片的路径需要写在 url()中。

默认情况下，背景图片尺寸没有容器大的话，那么它会把背景图平铺后再显示。 也可以通过以下代码进行设置 1. no-repeat: 不平铺 2. repeat-x: x轴方向平铺 3. repeat-y: y轴方向平铺 4. repeat: x轴和y轴方向都平铺（默认方式）

如

 <style>
        .box {
            width: 100px;
            height: 100px;;
            background:url("图片位置");
        }
    </style>

默认情况下，背景图片尺寸没有容器大的话，那么它会把背景图平铺后再显示。 也可以通过以下代码进行设置 ：
1. no-repeat: 不平铺
2. repeat-x: x轴方向平铺
3. repeat-y: y轴方向平铺
4. repeat: x轴和y轴方向都平铺（默认方式）

同时也可以使用background-position属性来指定，它是通过坐标轴来设置的。分别有：
1. left top: 左上角（默认值）
2. right top: 右上角
3. left bottom: 左下角
4. right bottom: 右下角
5. left center: 左中间位置
6. right center: 右中间位置
7. center center: 居中位置
 

边框属性

设置边框属性时可以使用：

border-left|top|right|bottom-color来设置左上右下颜色

border-left|top|right|bottom-style来设置左上右下样式 （可使用的值有solid实线,dotted小圆点构成的线,dashed虚线)

border-left|top|right|bottom-width来设置左上右下宽度 

也可以使用border 属性来统一指定整个边框的样式。 统一指定的语法格式为：

border: 线的宽度 线的样式 线的颜色

如

<style>
        .box {
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }
    </style>

亦或是

<style>
        .box {
            width: 100px;
            height: 100px;
            border-left-color: red;
            border-left-style: dashed;
            border-left-width: 5px;
            border-top-color: green;
            border-top-style: dotted;
            border-top-width: 5px;
            border-right-color: blue;
            border-right-style: dashed;
            border-right-width: 5px;
            border-bottom-color: black;
            border-bottom-style: dashed;
            border-bottom-width: 5px;
            }
</style>

内外边距

使用margin 属性来设置外边距，语法为margin-left/right/top/bottom

使用padding来设置内边距，语法为padding-left/right/top/bottom

如

<style>
    .box{
        border: 5px solid red;
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 10px;
        padding-bottom: 10px;
    }
</style>

也可直接使用padding来按上右下左的顺序来设置内边距

或直接使用margin来按上右下左的顺序来设置外边距

如

<style>
    .box{
        border: 5px solid red;
        margin: 10px 10px 10px 10px;
        }
  </style>

注意padding或margin直接进行设置时

使用4个值时设置上 右 左 下

使用3个值时设置上 左右 下

使用2个值时设置上下 左右

使用1个值则是同时设置上下左右

阴影

定义阴影效果使用 box-shadow 属性

它的语法格式为： box-shadow: h-shadow v-shadow blur spread color position;

其中 h-shadow为必需值。水平阴影的位置。允许负值。

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

 blur为可选值。模糊距离。 - spread：可选。阴影的尺寸。

 color为可选值。阴影的颜色。 

 position为可选值。将外部阴影 (outset) 改为内部阴影。默认为inset

如

<style>
        .box {
            width: 100px;
            height: 100px;
            box-shadow: 10px 10px 2px red;
        }
    </style>

圆角的设置

定义圆角时使用 border-radius 属性

它的语法为： border-radius：length/persentage

如

<style>
        .box{
            width: 100px;
            height: 100px;
            background: red;
            border-radius: 10px;
        }
    </style>

或是

<style>
        .box {
            width: 100px;
            height: 100px;
            background: blueviolet;
            border-radius: 60px 60px 60px 60px/30px 30px 30px 30px;
        }
    </style>

其中

1.使用四个属性值，分别表示左上角、右上角、右下角、左下角的圆角大小

2.使用三个属性值，第一个值表示左上角，第二个值表示右上角和左下角，第三个值表示右下角。

3.使用两个属性值，第一个值表示左上角和右下角，第二个值表示右上角和左下角。

4. 斜杠二组值：第一组值表示水平半径，第二组值表示垂直半径，每组值也可以同时设置1到4个值，规则与上面相同。