首发于Html+Css

谈一谈CSS3的渐变属性(线性渐变)

我们有时候会看到一些网站上会有渐变类的图片,这些都是需要专门做图出来的,现在 css3提供了一种渐变绘制方式,这些是浏览器去绘制的,显示效果也比较好

渐变有俩种:

线性渐变(linear-gradient)- 向下 / 向上 / 向左 / 向右 / 对角方向
径向渐变(radial-gradient)- 由它们的中心定义

线性渐变

创建一个线性渐变,必须至少定义两种颜色节点

background : linear-gradient(direction,color-start,color-stop ...)
direction渐变方向
color-start起点渐变色
color-stop终点渐变色

/* 渐变色不是只有俩种可以多种 */

渐变方向

渐变必须兼容其他浏览器内核

background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(red, blue); /* 标准的语法 */

这里为了方便演示,背景色就默认黑色

初始样式

<style type="text/css">
	div {
		margin: 40px auto;
		width: 100px;
		height: 100px;
		padding: 20px;
		background-color: #000000;
	}
</style>
<body>
	<div></div>
</body>

从下向上 to top

background: linear-gradient(to top,#ffff00,#5500ff);
background: linear-gradient(0deg,#ffff00,#5500ff);

从上向下 to bottom

background: linear-gradient(to bottom,#ffff00,#5500ff);
background: linear-gradient(180deg,#ffff00,#5500ff);

从左向右 to right

background: linear-gradient(to right,#ffff00,#5500ff);
background: linear-gradient(90deg,#ffff00,#5500ff);

从右向左 to left

background: linear-gradient(to left,#ffff00,#5500ff);
background: linear-gradient(270deg,#ffff00,#5500ff);

右下角到左上角

background: linear-gradient(to top left,#ffff00,#5500ff);
background: linear-gradient(135deg,#ffff00,#5500ff);

左下角到右上角

background: linear-gradient(to top right,#ffff00,#5500ff);
background: linear-gradient(45deg,#ffff00,#5500ff);

编辑于 2020-08-31 11:49