线性渐变linear-gradient,放射性渐变radial-gradient,循环渐变

最新推荐文章于 2024-05-09 20:59:01 发布

输出是最好的学习

最新推荐文章于 2024-05-09 20:59:01 发布

阅读量1.2k

点赞数 1

分类专栏：前端文章标签：渐变 linear-gradient gradient radial-gradient

本文为博主原创文章，转载请注明出处。

本文链接：https://blog.csdn.net/m0_37568521/article/details/75093196

版权

习惯在编辑器中说明，具体介绍可以看注释 Document div{ width: 200px; height: 300px; border:1px solid red; float: left; margin:20px; } /*to就是到达的意思，这里不能够使用from*/ .div1{ /*从下到上,从白色到蓝色

摘要由CSDN通过智能技术生成

习惯在编辑器中说明，具体介绍可以看注释。对于为什么我添加了一个js脚本，可以看我下面这边文章 http://blog.csdn.net/m0_37568521/article/details/75070523

线性渐变linear-gradient

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="prefixfree.min.js"></script>
	<style>
		div{
			width: 200px;
			height: 300px;
			border:1px solid red;
			float: left;
			margin:20px;
		}
		/*to就是到达的意思，这里不能够使用from*/
		.div1{
			/*从下到上,从白色到蓝色线性渐变*/
			background: linear-gradient(to top,white,blue);
		}
		.div2{
			/*从右上到左下,从白色到蓝色线性渐变*/
			background: linear-gradient(to bottom left,white,blue);
		}
		.div3{
			/*从左下到右上,从白色过渡到橘色,然后再过渡到蓝色*/
			background: linear-gradient(to top right,white,orange,blue);
		}
		.div4{
			/*从左下到右上,从白色过渡到橘色,然后再过渡到蓝色。后面的0%,30%,70%分别为颜色的起点*/
			background: linear-grad

最低0.47元/天解锁文章

输出是最好的学习

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
线性渐变linear-gradient,放射性渐变radial-gradient,循环渐变

习惯在编辑器中说明，具体介绍可以看注释 Document div{ width: 200px; height: 300px; border:1px solid red; float: left; margin:20px; } /*to就是到达的意思，这里不能够使用from*/ .div1{ /*从下到上,从白色到蓝色
复制链接

扫一扫