css 太极图案例带来的收获

基础知识

渐变:gradient 在两个或者多个颜色之间显示平稳过度。由浏览器生成。

线性渐变:line-gradient(过渡方向,初始颜色,结束颜色)。注意过渡方向默认从上到下。

1、支持多颜色渐变,多个值,就是从多个颜色之间过渡变化。

2、可以切换过渡的方向。to top,to left,to top left等等。

3、支持度数过渡(edg)。这个渐变可以从任意角度

径向渐变:radial-gradient(中心点,形状,大小,起始颜色,结束颜色)由一个点向四周的颜色渐变。

1、百分比过渡。

2、中心点的百分比,代表x轴、y轴的大小。代表中心点的位置。

3、size大小的值。closest-side:最近边;farthest-side:最远边;closest-corner:最近角;farthest-corner:最远角。

重复渐变:重复渐变在线性和径向渐变的基础上,加上repeating。在末尾加上百分比,代表在x%范围内执行一圈。

在回顾太极图案时,发现这些方法,在了解了原理之后,就非常简单了。

相关推荐

  1. css 太极图案例带来收获

    2024-04-15 05:16:07       134 阅读
  2. CSSCSS元素垂直居中案例

    2024-04-15 05:16:07       34 阅读
  3. CSS中浮动float带来高度塌陷问题及4种解决方案

    2024-04-15 05:16:07       54 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-04-15 05:16:07       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-04-15 05:16:07       100 阅读
  3. 在Django里面运行非项目文件

    2024-04-15 05:16:07       82 阅读
  4. Python语言-面向对象

    2024-04-15 05:16:07       91 阅读

热门阅读

  1. 物联网智能仓储系统毕业设计报告

    2024-04-15 05:16:07       34 阅读
  2. 方法引用(详)

    2024-04-15 05:16:07       32 阅读
  3. 【华为OD机试C++】图片整理

    2024-04-15 05:16:07       44 阅读
  4. 4-安装并配置Grafana并导入特定的仪表板模板

    2024-04-15 05:16:07       44 阅读
  5. 未来的前端框架技术发展趋势

    2024-04-15 05:16:07       45 阅读
  6. 获取主页数据并显示流程笔记

    2024-04-15 05:16:07       142 阅读
  7. 基于单片机的智能照明控制系统设计与实现

    2024-04-15 05:16:07       33 阅读
  8. 如何在CentOS中开放指定端口

    2024-04-15 05:16:07       44 阅读
  9. Unity Android Release-Notes

    2024-04-15 05:16:07       107 阅读
  10. 课时94:脚本自动化_脚本信号_信号基础

    2024-04-15 05:16:07       39 阅读
  11. C#`DataGridView`控件显示多余的空行

    2024-04-15 05:16:07       37 阅读