渐变小知识

78 阅读 0 评论 52 点赞

我是靠谱客的博主粗暴航空，最近开发中收集的这篇文章主要介绍渐变小知识，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

直接上代码好吧

渐变的类型：线性渐变、径向渐变、对称渐变

<style>
/*正常的彩色渐变的样式*/
        .box {
            width: 300px;
            height: 200px;
            background-color: pink;
            /* 透明 - 半透明 */
            background-image: linear-gradient(
                transparent,
                rgba(0,0,0, 0.6)
            );
        }
  /*对角线渐变的样式*/
        .box1 {
            width: 200px;
            height: 200px;
            /* 透明 - 半透明 */
            background-image: linear-gradient(
                /*选择渐变的方向，先写左右再写上下，渐变分界线与写的方向相反*/
                to right bottom,
                transparent,
                rgba(0,0,0, 0.6),
                #ff7
            );
        }
/*将平面圆用颜色渐变做出球体的样式*/
        .box2 {
            width: 200px;
            height: 200px;
         /*将正方形的盒子使用圆角变成圆形*/
            border-radius: 50%;
            /* 透明 - 半透明 */
            background-image: radial-gradient(
            /*circle 选择辐射中心*/
                circle at 100px 50px,#fff, #ff7, #000
            );
        }
    </style>
</head>

<body>

    <div class="box"></div>
    <div class="box1"></div>
    <div class="box2"></div>

</body>

彩色渐变带简称：色带

<title>渐变的色彩定义</title>
		<style type="text/css">
			.raincolor{
				width: 600px;
				height: 300px;
				margin: 50px auto;
				/*  background: linear-gradient(#ff0000 , #ff00ff 15% , rgba(0,0,255,.5) 49% , #00ff00 75% , #ffff00); 
					background: linear-gradient(#ff0000 , #ff00ff 15px , transparent 49% , #00ff00 75% , #ffff00); */
				background: linear-gradient(#ff0000 , #ff00ff 15px , blue 49% , #00ff00 49% , #ffff00);				
				}
				/*				 
				  1、玩渐变至少要指定2种色彩：1是起始色，2是终结色；
				  2、渐变的整个区间默认是一个0% 到100% 的区间，起始的0%和终结的100%为默认区间值，可以省略；
				  3、可以使用rgba模式或者是hsla模式来设定带透明的色彩；transparent关键字直接代表100%全透明 > 还可以使用css3的另外一个色彩关键字变量：currentcolor;
				  4、当具有多个色值的时候，用【,】分隔；当色值和区间值都设定的时候，用【空格】分隔；				  
				 */
			.box{
				width: 600px;
				height: 300px;
				margin: 50px auto;
				background: linear-gradient(red 0%,green 50%);
			}
		</style>
	</head>
	<body>

		<div class="raincolor"></div>
		<div class="box"></div>
		
	</body>

立体感的球：

<style>
			div{
				width: 120px;
				height: 150px; 	/*通过定义容器的尺寸来控制形状*/
				border: 1px currentcolor solid;
               /*边框圆角*/
				border-radius: 50%;
               /*定义辐射中心点的位置*/
				background: radial-gradient(at 40px 40px ,white,currentcolor,white);
				margin: 0 30px;			
			}
			.ball{
				color: lightgrey;
			}
</style>
	</head>
	<body>

		<div class="ball"></div>

	</body>