几种比较和谐的文字背景颜色搭配

发布时间：2015-10-22, 14:50:39 分类：HTML | 编辑 off 网址 | 辅助

图集1/1

正文 0字数 341,743阅读

（支付宝）给作者钱财以资鼓励（微信）→

标签: 和谐1 文字12 背景5 颜色9 搭配1

有过 1 条评论 »

广西南宁市 2017-11-20, 14:48:47

css3背景渐变色代码

从上到下
#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%);
}

Run code

Cut to clipboard

reply | quote | #¹

Records:1 1/1 «‹1 ›»

留下評論

你好，残忍屏蔽广告

确定要清除编辑框内容吗?

该删除操作将不可恢复。

删除取消

激活Windows

转到"设置"以激活Windows。

lizhenqiu blog

几种比较和谐的文字背景颜色搭配

相关日志

有过 1 条评论 »

留下評論