发布时间：2015-10-22, 14:50:39 分类：HTML | 编辑 off 网址 | 辅助
图集1/1
正文 0字数 341,935阅读
从上到下 #grad { background: -webkit-linear-gradient(red, blue); background: -o-linear-gradient(red, blue); background: -moz-linear-gradient(red, blue); background: linear-gradient(red, blue); } 从左到右 #grad { background: -webkit-linear-gradient(left, red , blue); background: -o-linear-gradient(right, red, blue); background: -moz-linear-gradient(right, red, blue); background: linear-gradient(to right, red , blue); } 从左上到右下 #grad { background: -webkit-linear-gradient(left top, red , blue); background: -o-linear-gradient(bottom right, red, blue); background: -moz-linear-gradient(bottom right, red, blue); background: linear-gradient(to bottom right, red , blue); } 使用角度 #grad { background: -webkit-linear-gradient(180deg, red, blue); background: -o-linear-gradient(180deg, red, blue); background: -moz-linear-gradient(180deg, red, blue); background: linear-gradient(180deg, red, blue); } 多种颜色节点 #grad { background: -webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet); background: -o-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet); background: -moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet); background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); } 使用透明度 #grad { background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); background: -o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); } 径向渐变 #grad { background: -webkit-radial-gradient(red, green, blue); background: -o-radial-gradient(red, green, blue); background: -moz-radial-gradient(red, green, blue); background: radial-gradient(red, green, blue); } 形状为圆形的径向渐变 #grad { background: -webkit-radial-gradient(circle, red, yellow, green); background: -o-radial-gradient(circle, red, yellow, green); background: -moz-radial-gradient(circle, red, yellow, green); background: radial-gradient(circle, red, yellow, green); } 颜色不均匀的径向渐变 #grad { background: -webkit-radial-gradient(red 5%, green 15%, blue 60%); background: -o-radial-gradient(red 5%, green 15%, blue 60%); background: -moz-radial-gradient(red 5%, green 15%, blue 60%); background: radial-gradient(red 5%, green 15%, blue 60%); }
确定要清除编辑框内容吗?
该删除操作将不可恢复。
删除 取消
激活Windows
转到"设置"以激活Windows。
图集1/1
有过 1 条评论 »
从上到下 #grad { background: -webkit-linear-gradient(red, blue); background: -o-linear-gradient(red, blue); background: -moz-linear-gradient(red, blue); background: linear-gradient(red, blue); } 从左到右 #grad { background: -webkit-linear-gradient(left, red , blue); background: -o-linear-gradient(right, red, blue); background: -moz-linear-gradient(right, red, blue); background: linear-gradient(to right, red , blue); } 从左上到右下 #grad { background: -webkit-linear-gradient(left top, red , blue); background: -o-linear-gradient(bottom right, red, blue); background: -moz-linear-gradient(bottom right, red, blue); background: linear-gradient(to bottom right, red , blue); } 使用角度 #grad { background: -webkit-linear-gradient(180deg, red, blue); background: -o-linear-gradient(180deg, red, blue); background: -moz-linear-gradient(180deg, red, blue); background: linear-gradient(180deg, red, blue); } 多种颜色节点 #grad { background: -webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet); background: -o-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet); background: -moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet); background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); } 使用透明度 #grad { background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); background: -o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); } 径向渐变 #grad { background: -webkit-radial-gradient(red, green, blue); background: -o-radial-gradient(red, green, blue); background: -moz-radial-gradient(red, green, blue); background: radial-gradient(red, green, blue); } 形状为圆形的径向渐变 #grad { background: -webkit-radial-gradient(circle, red, yellow, green); background: -o-radial-gradient(circle, red, yellow, green); background: -moz-radial-gradient(circle, red, yellow, green); background: radial-gradient(circle, red, yellow, green); } 颜色不均匀的径向渐变 #grad { background: -webkit-radial-gradient(red 5%, green 15%, blue 60%); background: -o-radial-gradient(red 5%, green 15%, blue 60%); background: -moz-radial-gradient(red 5%, green 15%, blue 60%); background: radial-gradient(red 5%, green 15%, blue 60%); }