CSS-backround样式（一），普通背景颜色的设置和渐变色背景的设置。

一、backround 定义

backround 是设置背景的 css 样式。

二、backround 样式的属性

在 css 中 backround 可以简写也可以分别写，简写属性如下：

（一）backround-color背景颜色

        属性设置元素的背景颜色。属性为元素设置一种纯色。这种颜色会填充元素的内容、内边距和边框区域，扩展到元素边框的外边界（但不包括外边距）。如果边框有透明部分（如虚线边框），会透过这些透明部分显示出背景色。

1.backround-color的值

        transparent是他的默认值，意思是透明的。在实际开发中你可以不写这个值，如果你 不想让用户设置浏览器的颜色而影响到你 的话你可以将其写上。如下：

background: transparent;

2. 颜色设置的方式

        背景颜色的设置有四种方式，其中第四种是 CSS3 中新增的。

div {
            background-color: pink;
            background-color: rgb(255, 192, 203);
            background-color: #ffc0cb;
            background-color: rgba(255, 192, 203, 1);
        }

                      注：a——alpha 是定义透明度 0（完全透明）~ 1（完全不透明）。

3. 渐变背景颜色

        渐变色背景可以有三种方式，线性、径向、锥形。

(1). 线性渐变

        在 默认情况 下你可以直接设置两种或两种颜色以上的颜色。代码如下：

.horizontal {
            width: 100px;
            height: 100px;
            background:linear-gradient(pink,blue,red);
            }

        改变渐变默认的渐变背景颜色。默认情况下，线性渐变的方向是从上到下，你可以指定一个值来改变渐变的方向。比如：

background:linear-gradient(to right,pink,blue,red);

设置对角渐变

        如果你喜欢把角度精确的控制你也可以设置一个和角度。比如：

 background:linear-gradient(35deg,pink,blue,red);

        在使用角度的时候，0deg 代表渐变方向为从下到上，90deg 代表渐变方向为从左到右，诸如此类正角度都属于顺时针方向。而负角度意味着逆时针方向。

设置色标位置

        其实这些颜色的占比不是固定的你也可以设置它的宽度，设置方式也是有两种的，设置像素（如：10px）也可以设置为占比（如：30%）, 剩下的自己计算填充。代码如下:

background:linear-gradient(0deg,pink 10px,blue 30%,red);

创建硬线

        设置硬线是将方向设置为 to bottom left (从左上到右下)，然后将颜色占比各设置为 50%。代码如下：

background:linear-gradient(to bottom left,pink 50%,blue 50%);