当前位置: 首页 > news >正文

CSS3渐变

一、线性渐变

通过background-image: linear-gradient(...)设置线性渐变

语法: linear-gradient(direction,color1,color2, . . )

direction:渐变方向,默认从上到下,可选值:

简单选取:

  ① to right(从左到右)② to left(从右到左)

  ③ to top(从下到上) ④ to bottom(从上到下)

组合选取: to right bottom(左上角->右下角)等

角度选取:45deg(向45度方向渐变)等

案例:

① 设置一个从上到下的粉色向红色的渐变背景

background-image: linear-gradient(pink, rgba(255, 0, 0, 0.842));

② 设置一个从左上角到右下角的粉色到紫色的渐变背景

background-image: linear-gradient(to right bottom,pink, rgba(111, 0, 255, 0.842));

二、径向渐变

通过background-image: radial-gradient(...)设置径向渐变

语法: radial-gradient(shape, color1 , color2, . . . )

shape:代表从内向外渐变的形状,默认值为ellipse

可选值有:circle(圆形)、ellipse (椭圆)

案例:

设置一个圆形的径向渐变

background-image: radial-gradient(circle,white, rgb(223, 18, 162));

http://www.lryc.cn/news/454090.html

相关文章:

  • Emissive CEO Fabien Barati谈《消失的法老》背后的故事:XR大空间体验的创新与未来
  • mysql设置表的某一个字段每天定时清零
  • 实例分割、语义分割和 SAM(Segment Anything Model)
  • 深度学习项目----用LSTM模型预测股价(包含LSTM网络简介,代码数据均可下载)
  • 《精通开关电源设计》笔记一
  • QLoRA代码实战
  • pyqt QGraphicsView 以鼠标为中心进行缩放
  • FPGA-Vivado-IP核-逻辑分析仪(ILA)
  • 基于webComponents的纯原生前端框架
  • OpenCV-背景建模
  • 一个简单的摄像头应用程序6
  • Pikachu-目录遍历
  • 用Python实现基于Flask的简单Web应用:从零开始构建个人博客
  • IDEA的lombok插件不生效了?!!
  • CSP-S 2022 T1假期计划
  • 为什么要学习大模型?AI在把传统软件当早餐吃掉?
  • 全流程Python编程、机器学习与深度学习实践技术应用
  • pWnos1.0 靶机渗透 (Perl CGI 的反弹 shell 利用)
  • jquery on() 函数绑定无效
  • 数字化转型与企业创新的双向驱动
  • [uni-app]小兔鲜-07订单+支付
  • Oracle数据库中表压缩的实现方式和特点
  • 【C语言】基础篇
  • Meta MovieGen AI:颠覆性的文本生成视频技术详解
  • 个人文章合集 - 前端相关
  • R语言的下载、安装及环境配置(RstudioVSCode)
  • 解决使用重载后的CustomWidget无法正常显示但原生的QWidget却能正常显示的问题
  • 微服务Sleuth解析部署使用全流程
  • 最具有世界影响力的人颜廷利:全球著名哲学家思想家起名大师
  • Ubuntu22.04 Docker 国内安装最靠谱教程