• CSS的两种渐变

    线性渐变和径向渐变

    几个常见的例子效果
    在这里插入图片描述

    DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<style>
			.a{
				font-size: 20px;
				width: 100%;
				height: 50px;
				margin: 10px;
				background-image: linear-gradient(red,yellow,blue);
			}
			.b{
				font-size: 20px;
				width: 100%;
				height: 50px;
				margin: 10px;
				/* 向左边渐变 */
				background-image: linear-gradient(to left,red,yellow,blue);
			}
			.c{
				font-size: 20px;
				width: 100%;
				height: 50px;
				margin: 10px;
				/* 向右上边渐变 */
				background-image: linear-gradient(to right top,red,yellow,blue);
			}
			.d{
				font-size: 20px;
				width: 100%;
				height: 50px;
				margin: 10px;
				/* 向30度角方向渐变 */
				background-image: linear-gradient(30deg,red,yellow,blue);
			}
			.e{
				font-size: 20px;
				width: 100%;
				height: 50px;
				margin: 10px;
				/* 到20%时为yellow，20%~40%时为red，之后就是循环前面部分 */
				background-image: repeating-linear-gradient(to left, yellow 20%,red 40%);
			}
			.f{
				font-size: 20px;
				width: auto;
				height: 80px;
				margin: 10px;
				/* ellipse可以不写，默认就是这个类型，算是椭圆，但如果是正方形就显示的是圆形渐变 */
				background-image: radial-gradient(ellipse,yellow,blue);
			}
			.g{
				font-size: 20px;
				width: auto;
				height: 80px;
				margin: 10px;   
				background-image: radial-gradient(circle,yellow,blue);
			}
			.h{
				font-size: 20px;
				width: auto;
				height: 80px;
				margin: 10px;   
				/* 圆心以20% 20%这个位置开始发散 */
				background-image: radial-gradient(circle at 20% 20%,yellow,blue);
			}
		style>
	head>
	<body>
		<div class="a">adiv>
		<div class="b">bdiv>
		<div class="c">cdiv>
		<div class="d">ddiv>
		<div class="e">ediv>
		<div class="f">fdiv>
		<div class="g">gdiv>
		<div class="h">hdiv>
	body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
  • 相关阅读:
    JMeter笔记8 | JMeter关联
    GO语言-包的使用
    若依分离版——使用Knife4j 自动生成接口文档
    .NET（C#、VB）APP开发——Smobiler平台控件介绍：BarcodeReader组件
    代理IP与Socks5代理：跨界电商智能爬虫与出海之道
    YOLO V5源码详解
    android中MVC MVP MVVM三种架构对比
    第11章_数据库的设计规范
    Pyqt组合控件与QSpacerItem指南
    PEFT LoraConfig参数详解
  • 原文地址：https://blog.csdn.net/Ningmengyouzhi/article/details/128005805