web前端啥也不是的日常更新 7.4

最新推荐文章于 2024-08-21 10:33:55 发布

呵呵＆

最新推荐文章于 2024-08-21 10:33:55 发布

阅读量81

点赞数 3

文章标签：大数据前端学习 html css

本文链接：https://blog.csdn.net/m0_72174649/article/details/125606664

版权

直接开始，不整那些玄乎的:

渐变：通过渐变可以设置一些复杂的背景颜色，可以从实现一个颜色向其他颜色过渡的效果
	渐变是图片，通过 background-image设置
	可选值
	1：linear-gradient(方位,颜色1,颜色2) ['ɡreidiənt]
	线性渐变，颜色沿着一条直线发生变化
	参数1:表示方位，（可选值，不写默认是to bottom）
	(1)to left，to right, to bottom, to top
	(2)xxxdeg 表示角度，度数，会更灵活
	(3)turn 表示圈 .5turn
	参数2:颜色1
	参数3:颜色2
	注意：
	可以写多个颜色，默认情况下，颜色是均分占比的
	也可以手动的指定渐变的分布情况
	background-image:linear-gradient(red 50px,yellow) ;
	颜色后直接跟占比
	2:repeating-linear-gradient()
	可以平铺的线性渐变
	background-image: repeating-linear-gradient(yellow 0px, red 50px);
	参数跟linear-gradient是一样的

1:radial-gradient() ['reidiəl] ['ɡreidiənt]
	经向渐变（放射性的效果）
	默认情况下，圆心是根据元素的形状来计算的
	正方形圆形
	长方形椭圆型
	参数1:圆心的形状
	（1）circle圆形，ellipse椭圆，
	（2）设置的大小 at 位置==>像素1 像素2 at 0px 0px
	background-image: radial-gradient(100px 100px at 100px 0px,red,yellow);
	参数2:颜色1
	参数3:颜色2
	······ 放射渐变： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .box1 { width: 400px; height: 200px; /* background-image: radial-gradient(red,yellow); / background-image: radial-gradient(100px 100px at 100px 0px,red,yellow); } </style> </head> <body> <div class="box1"></div> </body> </html> 渐变色： !DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .box1 { width: 200px; height: 200px; / background-color: red; / / background-image: linear-gradient(red 20px,yellow); */ background-image: repeating-linear-gradient(red 10px,yellow 20px); } </style> </head> <body> <div class="box1"></div> </body> </html>