线性渐变:
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>
结果图: