CSS之background属性使用（渐变、背景图的选择修改、图片边框）

线性渐变：

div{
            width: 300px;
            height: 300px;
            background:linear-gradient(to left,red,blue);  //图1

        }
background:linear-gradient(to top,red,blue); //图2

 

径向渐变：

.h1{
width: 300px;
height: 300px;
margin-top: 10px;
background:radial-gradient(yellow,blue);  //图1 
}
background: radial-gradient(at 50px 50px,red,blue);  //图2
background: radial-gradient(at right bottom,green,red);  //图3
background: radial-gradient(circle closest-side at 50px 50px,green,red);//图4
background: radial-gradient(red,red 50%,blue,blue 50%); //图5

    

重复渐变：

 .h2{
            width: 300px;
            height: 300px;
            margin-top: 10px;
            background: radial-gradient(#fff 0%,#fff 10%,
            #000 10%,#000 20%,
            #fff 20%,#fff 30%,
            #000 30%,#000 40%,
            #fff 40%,#fff 50%,
            #000 50%,#000 60%,
            #fff 60%,#fff 70%,
            #000 70%,#000 100%);   //图1
        }
径向重复渐变：
background:repeating-radial-gradient(circle at center center,
            #fff 0%,#fff 10%,
            #000 10%,#000 20%);   //图2
线性重复渐变：
 background:repeating-linear-gradient(to bottom,
            #fff 0%,#fff 10%,
            #000 10%,#000 20%
          );   //图3

把to bottom改为45deg  就是图4

   

背景图片：

属性和事件解释：

例子：

把一张大于浏览器的长宽的一张图片，让它居中，不留白、不溢出、随着浏览器的缩小而缩小

代码：

结果图片：

例子2：

就是在众多个图标进行选择区域大小，方向等等来达到自己要的小图标：

编写前效果图：

编写后结果：

边框图片案例（消息框）：

原来消息框是185*200的大小，但是在你输入很多的文本时，就会溢出，所以现在做的是让消息框可以拉伸而且不会失真

 原来的消息框

<style>
        *{
            padding: 0px;
            marigin:0px;
        }
        div{
            width: 200px;
            height: auto;   /*当你设定了高的时候，你的文本超过了高度，就会溢出；
            如果设置为auto的话就会自适应高度*/
            border:10px solid red ;   /*这里的10px跟下面的border-image-width一样*/
            margin: 100px auto;
            /*添加边框图片*/
            border-image-source:url("../image/消息框 (1).png");
            /*设置受保护的区域大小    10:边框大小  fill：内部填充*/
            border-image-slice: 10 fill;
            /*设置边框图片的宽度
            1.明确圆角的大小
            2.明确受保护的区域的大小*/
            border-image-width: 10px;
            /*设置背景平铺效果  默认是stretch：拉伸
            希望有纹理就用：round/repeat/*/
            border-image-repeat: stretch;
        }
    </style>

结果图：