【css】渐变

渐变是设置一种颜色或者多种颜色之间的过度变化。

两种渐变类型:

  • 线性渐变(向下/向上/向左/向右/对角线)

  • 径向渐变(由其中心定义)

1、线性渐变

语法:background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
其中direction是方向,值可以有bottom、right、top、left 。如果该参数参数值前面添加了to,则是渐变沿着相应的方向移动。如果省略了to,则为两个参数组合的方向,比如bottom right:右下角方向。
其中从上到下是默认的方向,可以不用添加direction参数。
1.1 默认方向
代码:

<head>
<style>
#grad1 {height: 200px;background-color: blue; /* 针对不支持渐变的浏览器 */background-image: linear-gradient(blue, yellow);
}
</style>
</head>
<body><div id="grad1"></div></body>

渲染效果:
在这里插入图片描述
1.2、从左到右

代码:

<head>
<style>
#grad1 {height: 200px;background-color: blue; /* 针对不支持渐变的浏览器 */background-image: linear-gradient(to right,blue, yellow);
}
</style>
</head>
<body><div id="grad1"></div></body>

渲染效果:
在这里插入图片描述
1.3 右下角
代码:

<style>
#grad1 {height: 200px;background-color: blue; /* 针对不支持渐变的浏览器 */background-image: linear-gradient(to bottom right,blue, yellow);
}
</style>
</head>
<body><div id="grad1"></div></body>

渲染效果:
在这里插入图片描述

2、径向渐变
径是指圆形的直径的径,以圆心为出发点,沿着径向渐变,和箭靶的效果差不多。
语法:

/* 在容器中心的渐变,从红色开始,变成蓝色,最后变成绿色 */
radial-gradient(circle at center, red 0, blue, green 100%)

边缘形状可以是圆形(circle)或椭圆形(ellipse)

形式语法

<radial-gradient()> = radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )  <size> = <extent-keyword>              |<length [0,∞]>                |<length-percentage [0,∞]>{2}  <position> = [ left | center | right ] || [ top | center | bottom ]  |[ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]?  |[ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]  <color-stop-list> = <linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#  <extent-keyword> = closest-corner   |closest-side     |farthest-corner  |farthest-side    <length-percentage> = <length>      |<percentage>  <linear-color-stop> = <color>               &&<length-percentage>?  <linear-color-hint> = <length-percentage>  

代码:

<style>
#grad1 {height: 200px;width:200px;background-color: blue; /* 针对不支持渐变的浏览器 */background-image: radial-gradient(circle at center,#33691e, yellow);
}
</style>
</head>
<body><div id="grad1"></div></body>

渲染效果:
在这里插入图片描述
关于径向渐变的详细介绍可以参考MDN Web Docs社区

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/36442.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

一图搞懂二层交换机、三层交换机和路由器的区别

二层交换机、三层交换机、路由器的区别 二层交换机、三层交换机、路由器对比二层交换机三层交换机路由器工作在第几层数据链路层&#xff08;第二层&#xff09;网络层&#xff08;第三层&#xff09;网络层&#xff08;第三层&#xff09;功能学习和转发帧根据IP地址转发数据…

数据链路层是什么?

数据链路层承接上层的数据&#xff0c;然后使用下层提供的信道&#xff0c;按照一定的规则&#xff0c;进行数据传输。 物理层提供了传输媒体与连接&#xff08;信道&#xff09;&#xff08;数据链路层使用的信道通常是物理层提供的信道&#xff09;&#xff0c;即提供了比特…

webpack自动注册全局组件

例如&#xff0c;在form文件夹下有许多流程类表单&#xff0c;一个一个注册引入非常浪费时间&#xff0c;可使用webpack的require.context方法来自动导入 import { firstToUpper } from /utils/methodsconst taskTable {install: vue > {const req require.context(../fo…

springboot结合element-ui实现增删改查,附前端完整代码

实现功能 前端完整代码 后端接口 登录&#xff0c;注册&#xff0c;查询所有用户&#xff0c;根据用户名模糊查询&#xff0c;添加用户&#xff0c;更新用户&#xff0c;删除用户 前端 注册&#xff0c;登录&#xff0c;退出&#xff0c;用户增删改查&#xff0c;导航栏&#…

Android Sutdio 导入libs文件夹下的jar包没反应

有点离谱&#xff0c;笨笨的脑子才犯的错误 首先发现问题&#xff1a;转移项目的时候 直接复制粘贴libs文件夹下的jar包到新项目&#xff0c;在build.gradle文件下 使用语句并应用也没反应&#xff08;jar包没有出现箭头且代码报错&#xff0c;找不到&#xff09; implementa…

什么样的 PLC 可以算是高端 PLC?

针对问题本身&#xff0c;有的回答里都提到了。可靠性&#xff0c;扫描时间&#xff0c;带离散量点数&#xff0c;带模拟量输出点数&#xff0c;扩展性&#xff0c;这些都可以看作PLC系统级别划分的依据。比如说&#xff0c;有相应安全完整性等级认证的LOGIC SOLVER为核心的PLC…

SpringBoot复习:(37)自定义ErrorController

所有接口统一返回的数据格式 package cn.edu.tju.domain;public class MyResponse {private int code;private String message;private String exception;private String stack;public int getCode() {return code;}public void setCode(int code) {this.code code;}public S…

五个独特且有趣的ChatGPT指令

今天分享5个很实用的指令&#xff0c;这几个指令很多时候对我们输出内容的连贯性、文章风格、创意性等方面有着决定性的作用。 目录 第一个&#xff1a;Max tokens&#xff08;最大令牌&#xff09; 第二个&#xff1a;Top_p(控制采样) 第三个&#xff1a;Presence_penalty …

Android Studio System.out.println()中文乱码

第一步&#xff1a; 打开studio64.exe.vmoptions加入-Dfile.encodingUTF-8 第二步&#xff1a; File-Settings-Editor-File Encodings 把所有的编码格式改为UTF-8 尝试跑一下代码&#xff0c;如果还不行&#xff0c;重启IDE 再试试。

UI美工设计岗位的工作职责

UI美工设计岗位的工作职责1 职责&#xff1a; 1、负责软件界面的美术设计、创意工作和制作工作; 2、根据各种相关软件的用户群&#xff0c;提出构思新颖、有高度吸引力的创意设计; 3、对页面进行优化&#xff0c;使用户操作更趋于人性化; 4、维护现有的应用产品; 5、收集和…

NLP文本匹配任务Text Matching [无监督训练]:SimCSE、ESimCSE、DiffCSE 项目实践

NLP文本匹配任务Text Matching [无监督训练]&#xff1a;SimCSE、ESimCSE、DiffCSE 项目实践 文本匹配多用于计算两个文本之间的相似度&#xff0c;该示例会基于 ESimCSE 实现一个无监督的文本匹配模型的训练流程。文本匹配多用于计算两段「自然文本」之间的「相似度」。 例如…

一百五十三、Kettle——Linux上安装的kettle9.3启动后说缺少libwebkitgtk-1.0(真是坑爹啊,刚龟速下载又忍痛卸载)

一、问题 在kettle9.3可以在本地连接hive312后&#xff0c;在Linux中安装了kettle9.3&#xff0c;结果启动时报错WARNING: no libwebkitgtk-1.0 detected, some features will be unavailable 而且如果直接下载libwebkitgtk的话也没有用 [roothurys22 data-integration]# yu…

Python学习笔记第五十六(Pandas JSON)

Python学习笔记第五十六天 Pandas JSONread_json()to_string()字典转为 DataFrame 数据 内嵌的 JSON 数据json_normalize() 后记 Pandas JSON JSON&#xff08;JavaScript Object Notation&#xff0c;JavaScript 对象表示法&#xff09;&#xff0c;是存储和交换文本信息的语…

在线吉他调音

先看效果&#xff08;图片没有声&#xff0c;可以下载源码看看&#xff0c;比这更好~&#xff09;&#xff1a; 再看代码&#xff08;查看更多&#xff09;&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8&quo…

【第二阶段】kotlin的函数类型作为返回类型

fun main() {//调用,返回的是一个匿名类型&#xff0c;所以info就是一个匿名函数val infoshow("",0)//info接受的返回值为匿名类型&#xff0c;此时info就是一个匿名函数println(info("kotlin",20)) }//返回类型为一个匿名函数的返回类型fun show(name:Str…

01 - 工作区、暂存区、版本库、远程仓库 - 以一次连贯的提交操作为例

查看所有文章链接&#xff1a;&#xff08;更新中&#xff09;GIT常用场景- 目录 文章目录 1. 工作区、暂存区、版本库、远程仓库1.1 工作区1.2 工作区 > 暂存区&#xff1a;git add1.3 暂存区 > 版本库&#xff1a;git commit1.4 push到远程仓库 1. 工作区、暂存区、版本…

【生成式AI】ProlificDreamer论文阅读

ProlificDreamer 论文阅读 Project指路&#xff1a;https://ml.cs.tsinghua.edu.cn/prolificdreamer/ 论文简介&#xff1a;截止2023/8/10&#xff0c;text-to-3D的baseline SOTA&#xff0c;提出了VSD优化方法 前置芝士:text-to-3D任务简介 text-to-3D Problem text-to-3D…

解决校园网使用vmware桥接模式,虚拟机与物理机互相ping通,但是虚拟机ping不通百度的问题

遇到的问题 使用校园网时&#xff0c;桥接模式下&#xff0c;物理机可以ping通虚拟机&#xff0c;但是虚拟机ping不通主机 解决方法 在物理机中查看网络相关信息 ipconfig 修改虚拟机网卡信息 vim /etc/sysconfig/network-scripts/ifcfg-ens33 注意 /ifcfg-ens33需要根据…

C++ QT(一)

目录 初识QtQt 是什么Qt 能做什么Qt/C与QML 如何选择Qt 版本Windows 下安装QtLinux 下安装Qt安装Qt配置Qt Creator 输入中文配置Ubuntu 中文环境配置中文输入法 Qt Creator 简单使用Qt Creator 界面组成Qt Creator 设置 第一个Qt 程序新建一个项目项目文件介绍项目文件*.pro样式…

微信记录---推荐系统---23/8/14 小总结

推荐系统---23/8/14 小总结 1. ACM推荐系统专题研讨会2.图神经网络推荐系统3.表1 模型效果对标:MovieLens 1M4.爬虫技术5.TF-IDF算法6.图 2 海量学术大数据推荐系统技术架构7.图 4 CADAL 平台推荐系统框架设计8.企业推荐系统发展概述MLR(Mixed Logistic Regression)DIEN(Deep…