CSS中盒子样式的几种设置

css背景颜色设置：可以将盒子背景设置一定的颜色。如：
<style>
        .box {
            width: 300px;
            height: 300px;
            background-color: red;
        }
</style>

背景图片设置：需要使用 background-image 属性来设置，而图片的路径需要写在 “url()”的括号内，如果背景图片并没有所设容器大，将会把背景图平铺后再显示，如需设置其平铺效果，则有以下四种：
1.no-repeat：不平铺
2.repeat-x：x轴方向平铺
3.repeat-y：y轴方向平铺
4.repeat：为默认方式，铺满容器
使用 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来设置样式
                                                       border-left/top/right/bottom-width来设置宽度
它的语法格式为:
border:线的宽度 线的样式 线的颜色

盒子模型：

盒子的内边距设置：容器中的内容和容器的边线之间的距离就是内边距，内边距的制定时使用 padding 属性来设置的。
1.左边使用 padding-left
2.上边使用 padding-top
3.右边使用 padding-right
4.下边使用 padding-bottom
根据设置值的不同，所表示的边也不同，如：
a.如果设置四个值，则表示:上，左，下，右
b.如果设置三个值，则表示:上，左右，下
c.如果设置二个值，则表示:上下，左右
d.如果设置一个值，则表示:上右下左的值都是一样的

盒子的外边距设置：容器与另一个容器之间的距离就叫外边距，外边距使用 margin 属性来指定。它的使用和语法格式与 padding 相同。
1.margin-left
2.margin-top
3.margin-right
4.margin-bottom
根据设置值的不同，所表示的边也不同，如：
a.如果设置四个值，则表示:上，左，下，右
b.如果设置三个值，则表示:上，左右，下
c.如果设置二个值，则表示:上下，左右
d.如果设置一个值，则表示:上右下左的值都是一样的

浮动：默认情况下，li中的内容是竖着显示的，如果想要横着显示，那么需要浮动
浮动是使用 float 属性来定义，它有两个值:
1.left:左浮动
2.right:右浮动

阴影：定义阴影效果的使用 box-shadow 属性，它的语法格式为:
box-shadow: h-shadow v-shadow blur spread color position;
1.h-shadow:必需，水平阴影的位置。允许负值。
2.v-shadow:必需，垂直阴影的位置。允许负值。
3.blur:可选，模糊距离。
4.spread:可选，阴影的尺寸。
5.color:可选，阴影的颜色。
6.position:可选，将外部阴影（outset）改为内部阴影。默认为inset
如：
 <style>
        .box {
            width: 100px;
            height: 100px;
            background: deeppink;
            box-shadow: 50px 50px 2px gray;
        }
    </style>

圆角：定义圆角使用 border-radius 属性来定义，它的语法为:
border-radius:length/persentage;
如：
  <style>
        .box {
            width: 100px;
            height: 100px;
            border-radius: 50%;
          }
    </style>