9 效果如图 10 附上代码.div1{width:400px; height:200px; background:#fff;background: -webkit-linear-gradient(left, #0CF , blue); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(right, #0CF, blue); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(right...
background: -webkit-gradient(linear,top,from(#ace),to(#f96)); /* Safari 5.1+, Chrome 10+ */ background: -webkit-linear-gradient(top, #ace, #f96); /* Opera 11.10+ */ background: -o-linear-gradient(top, #ace, #f96); 2、始于left(水平方向)和center(垂直方向)也是就Left → Rig...
参数:-webkit-gradient 是 webkit 引擎对渐变的实现参数,一共有五个。第一个参数表示渐变类型(type),可以是 linear(线性渐变)或者 radial(径向渐变)。第二个参数和第三个参数,都是一对值,分别表示渐变起点和终点。这对值可以用坐标形式表示,也可以用关键值表示,比如 left top(左上角)和 left bottom(左下角)...
.divOne{width:100px;height:100px;background:linear-gradient(to right, red, blue); } 3.线性渐变-对角 .divOne{width:100px;height:100px;background:linear-gradient(to bottom right, red, blue); } 指定角度语法: 如果你想要在渐变方向上做更多的控制,你可以定义一个角度,而不用使用预定义的方向。
2、始于left(水平方向)和center(垂直方向)也是就Left → Right: /* Firefox 3.6+ */ background: -moz-linear-gradient(left, #ace, #f96); /* Safari 5.1+, Chrome 10+ */ background: -webkit-linear-gradient(left, #ace, #f96); /* Opera 11.10+ */ background: -o-linear-gradient(left,...
linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* } //标准写法 1. 参数: <angle>是角度,单位为deg point: 第一个参数表示线性渐变的方向,可用关键字top、left、bottom、right,to top是从上到下、to left是从左到右,如果定义成to left top,那就是从左上角到右下角(to可...
to top(从下边开始) to top left(从右下角开始) to top right(从左下角开始) to bottom left(从右上角开始) to bottom right(从右下角开始 background:linear-gradient(to bottom,hotpink,darkblue);background:linear-gradient(toright,hotpink,darkblue);background:linear-gradient(toleft,hotpink,darkbl...
background-image: linear-gradient(to right, red , yellow); 1. 2. //从左上角到右下角的线性渐变: background-image: linear-gradient(to bottom right, red , yellow); 1. 2. //线性渐变指定一个角度: background-image: linear-gradient(0deg, red, yellow); ...
linear-gradient(to right, #ddd, #ddd) no-repeat, linear-gradient(135deg, #fff, #fff 6px, hsla(0,0%,100%,0) 6px) no-repeat; background-size: 6px 1px, 1px 6px, 6px 6px; transform: rotate(-45deg); left:-4px; top:13px; ...
left: 设置左边为渐变起点的横坐标值。 right:设置右边为渐变起点的横坐标值。 top: 设置顶部为渐变起点的纵坐标值。 bottom: 设置底部为渐变起点的纵坐标值。 div.angle1 { background: linear-gradient(to right, #fb3 50%, #58a 0); background-size: 30px 100%; } ...