css3渐变属性

渐变

linear-gradient 函数用于创建一个表示两种或多种颜色线性渐变的图片
linear-gradient(45deg, blue, red) 渐变轴为45度，从蓝色渐变到红色
linear-gradient(to left top, blue, red) 从右下到左上、从蓝色渐变到红色
linear-gradient(0deg, blue, green 40%, red) 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束

默认从上到下
<style>
div {
     width: 200px;
     height: 200px;
     background: -webkit-linear-gradient(red, yellow); #兼容老版本谷歌
     background: -o-linear-gradient(red, yellow); #兼容老版本欧朋
     background: -ms-linear-gradient(red, yellow); #兼容老版本火狐
     background: linear-gradient(red, yellow);/* 标准的语法（必须放在最后） */
}
</style>
<body>
    <div></div>
</body>

颜色的方向变化
<style>
div {
     width: 200px;
     height: 200px;
     background: -webkit-linear-gradient(left,red,yellow);#兼容老版本谷歌
     background: -o-linear-gradient(left,red,yellow);#兼容老版本欧朋
     background: -ms-linear-gradient(left,red,yellow);#兼容老版本火狐
     /*左往友*/
     background: linear-gradient(left,red,yellow);
     /*下到上*/
     background: linear-gradient(0deg,red,yellow);
}
</style>
<body>
    <div></div>
</body>

repeating-linear-gradient

用于创建重复的线性渐变 "图像"

<style>
div {
     width: 200px;
     height: 200px;
     background: -webkit-repeating-linear-gradient(top,red 0%,yellow 30%);
     background: -o-repeating-linear-gradient(top,red 0%,yellow 30%);
     background: -ms-repeating-linear-gradient(top,red 0%,yellow 30%);
     background: repeating-linear-gradient(top,red 10%,yellow 30%);
}
</style>
<body>
    <div></div>
</body>

radial-gradient

径向渐变由中心点定义

<style>
div {
     width: 200px;
     height: 200px;
     width: 260px;
     background: -webkit-radial-gradient(red 20%,yellow 50%);
     background: -o-radial-gradient(red 20%,yellow 50%);
     background: -ms-radial-gradient(red 20%,yellow 50%);
     #从中间到四周
     background: radial-gradient(red 20%,yellow 50%);
     #从中间到四周，并且重复
     background: repeating-radial-gradient(red 20%,yellow 40%);
     #从左到右,半圆
     background: radial-gradient(left center,red 20%,yellow 50%);
     #从左到右,椭圆
     background: radial-gradient(50px 100px,circle,red 20%,yellow 50%);
}
</style>
<body>
    <div></div>
</body>

posted @ 2020-10-20 09:58  qqaazzhf  阅读(207)  评论(0)    收藏  举报