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);
        }

四种设置颜色的方式

值	描述
color_name	规定颜色值为颜色名称的颜色（如：yellow黄色）
hex_number	规定颜色值为16进制颜色值（比如：#ff0000）
rgb_number	规定颜色值为 rgb 代码的颜色（比如：255,0,0）
rgba_number	规定颜色值为 rgba 代码的颜色（比如：255,0,0,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%);