备案控制台
探索云世界
开发者社区 云计算 文章 正文

CSS3第五课 平角在渐变的基础上

2023-02-19 90
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： CSS3第五课 平角在渐变的基础上 


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style type="text/css">
    *{
      background-image: linear-gradient(-135deg,
      #661a08,#664608,#426608,#44c312,#12c36a,
      #35e5ce,#3ea1ee,#3e6fee,#6b3eee,#c06eea,
      #e36eea,#ea6ebd,#ed2b54);
      text-decoration: dashed;
      text-align: center;
      font-size: 2.5rem;
    }
      body {
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        /* background-color:; */
        background-color: #000000;
      }
      div {
        width: 300px;
        height: 200px;
        background-color: black;
        border: red solid 2px;
        margin: 10px;
        text-decoration: dashed;
        text-align: center;
        font-size: 2.5rem;
      }
      div:nth-child(1) {
        background-image: linear-gradient(45deg, red 10%, pink 10%);
        /* 切角的效果 */
        background-image: linear-gradient(45deg, transparent 8%, pink 10%);
      }
      div:nth-child(2) {
        background-image: linear-gradient(45deg, red 10%, pink 10%);
        /* 切角的效果 */
        background-image: linear-gradient(-45deg, transparent 8%, pink 10%);
      }
      div:nth-child(3) {
        /* 切角的效果 */
        background-image: linear-gradient(45deg, #00FF99 8%, pink 0%), linear-gradient(-45deg, red 8%, pink 0%);
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }
      div:nth-child(4) {
        /* 切角的效果 */
        background-image: linear-gradient(45deg, #00FF99 10%, pink 0%);
        background-image: linear-gradient(45deg, transparent 8%, pink 0%);
      }
      div:nth-child(5) {
        /* 切角的效果 */
        background: linear-gradient(45deg, red 10%, pink 0) left,
          linear-gradient(-45deg, red 8%, green 0) right;
        background-size: 50% 100%;
        background-repeat: no-repeat;
      }
      div:nth-child(6) {
        /* 切角的效果 */
        background: linear-gradient(45deg, red 10%, pink 0) right,
          linear-gradient(-45deg, red 8%, green 0) left;
        background-size: 50% 100%;
        background-repeat: no-repeat;
      }
      /* 切角 */
      div:nth-child(7) {
        /* 切角的效果 */
        background: linear-gradient(45deg, transparent 10%, pink 0) right,
          linear-gradient(-45deg, transparent 8%, green 0) left;
        background-size: 50% 100%;
        background-repeat: no-repeat;
      }
      div:nth-child(8) {
        /* 切角的效果 */
        background: linear-gradient(45deg, transparent 10%, pink 0) left,
          linear-gradient(-45deg, transparent 8%, green 0) right;
        background-size: 50% 100%;
        background-repeat: no-repeat;
      }
      div:nth-child(9) {
        /* 切角的效果 */
        background: linear-gradient(45deg, transparent 10%, yellow 0) left bottom,
          linear-gradient(-45deg, transparent 10%, red 0) right bottom,
          linear-gradient(-135deg, transparent 10%, pink) right top,
          linear-gradient(135deg, transparent 10%, green 0) left top;
        background-repeat: no-repeat;
      }
      div:nth-child(10) {
        /* 切角的效果 */
        background:
          linear-gradient(45deg, transparent 10%, yellow 0) left bottom,
          linear-gradient(-45deg, transparent 10%, red 0) right bottom,
          linear-gradient(-135deg, transparent 10%, pink) right top,
          linear-gradient(135deg, transparent 10%, green 0) left top;
        background-size: 50% 50%;
        background-repeat: no-repeat;
      }
      div:nth-child(11) {
        /* 切角的效果 */
        background:
          linear-gradient(45deg, transparent 10%, green 0) left bottom,
          linear-gradient(-45deg, transparent 10%, pink 0) right bottom,
          linear-gradient(-135deg, transparent 10%, blue 0) right top,
          linear-gradient(135deg, transparent 10%, purple 0) left top;
        background-size: 50% 50%;
        background-repeat: no-repeat;
      }
      div:nth-child(12) {
        background-image: linear-gradient(red,blue,yellow);
        background-image: linear-gradient(45deg, red 10%, pink 10%);
        /* 切角的效果 */
        background-image: linear-gradient(25deg,yellow,red,green,blue,black);
        background-image: linear-gradient(45deg, transparent 8%, pink 10%);
      }
      div:nth-child(13) {
        background-image: linear-gradient(45deg, red 10%, pink 10%);
        /* 切角的效果 */
        background-image: linear-gradient(-45deg, transparent 8%, pink 10%);
      }
      div:nth-child(14) {
        /* 切角的效果 */
        background-image: linear-gradient(45deg, #00FF99 8%, pink 0%), linear-gradient(-45deg, red 8%, pink 0%);
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }
      div:nth-child(15) {
        /* 切角的效果 */
        background-image: linear-gradient(45deg, #00FF99 10%, pink 0%);
        background-image: linear-gradient(45deg, transparent 8%, pink 0%);
      }
      div:nth-child(16) {
        /* 切角的效果 */
        background: linear-gradient(45deg, red 10%, pink 0) left,
          linear-gradient(-45deg, red 8%, green 0) right;
        background-size: 50% 100%;
        background-repeat: no-repeat;
      }
      div:nth-child(17) {
        /* 切角的效果 */
        background: linear-gradient(45deg, red 10%, pink 0) right,
          linear-gradient(-45deg, red 8%, green 0) left;
        background-size: 50% 100%;
        background-repeat: no-repeat;
      }
      /* 切角 */
      div:nth-child(18) {
        /* 切角的效果 */
        background: linear-gradient(45deg, transparent 10%, pink 0) right,
          linear-gradient(-45deg, transparent 8%, green 0) left;
        background-size: 50% 100%;
        background-repeat: no-repeat;
      }
      div:nth-child(19) {
        /* 切角的效果 */
        background: linear-gradient(45deg, transparent 10%, pink 0) left,
          linear-gradient(-45deg, transparent 8%, green 0) right;
        background-size: 50% 100%;
        background-repeat: no-repeat;
      }
      div:nth-child(20) {
        /* 切角的效果 */
        background: linear-gradient(45deg, transparent 10%, yellow 0) left bottom,
          linear-gradient(-45deg, transparent 10%, red 0) right bottom,
          linear-gradient(-135deg, transparent 10%, pink) right top,
          linear-gradient(135deg, transparent 10%, green 0) left top;
        background-repeat: no-repeat;
      }
      div:nth-child(21) {
        /* 切角的效果 */
        background:
          linear-gradient(45deg, transparent 10%, yellow 0) left bottom,
          linear-gradient(-45deg, transparent 10%, red 0) right bottom,
          linear-gradient(-135deg, transparent 10%, pink) right top,
          linear-gradient(135deg, transparent 10%, green 0) left top;
        background-size: 50% 50%;
        background-repeat: no-repeat;
      }
      div:nth-child(22) {
        /* 切角的效果 */
        background:
          linear-gradient(45deg, transparent 10%, green 0) left bottom,
          linear-gradient(-45deg, transparent 10%, pink 0) right bottom,
          linear-gradient(-135deg, transparent 10%, blue 0) right top,
          linear-gradient(135deg, transparent 10%, purple 0) left top;
        background-size: 50% 50%;
        background-repeat: no-repeat;
      }
      div:nth-child(24) {
        /* 切角的效果 */
        background:
          linear-gradient(45deg, transparent 10%, green 0) left bottom,
          linear-gradient(-45deg, transparent 10%, pink 0) right bottom,
          linear-gradient(-135deg, transparent 10%, blue 0) right top,
          linear-gradient(135deg, transparent 10%, purple 0) left top;
        background-size: 50% 50%;
        background-repeat: no-repeat;
      }
    </style>
    <title></title>
  </head>
  <body>
    <!-- div*24+tab -->
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </body>
</html>
t75yjb52rsccc
目录
相关文章
微芒不朽
|
12天前
|
前端开发
【CSS进阶】使用CSS gradient制作绚丽渐变纹理背景效果（中）
【CSS进阶】使用CSS gradient制作绚丽渐变纹理背景效果
微芒不朽
84 1
微芒不朽
|
12天前
|
前端开发
【CSS进阶】使用CSS gradient制作绚丽渐变纹理背景效果（下）
【CSS进阶】使用CSS gradient制作绚丽渐变纹理背景效果
微芒不朽
55 0
微芒不朽
|
12天前
|
前端开发 容器
【CSS进阶】使用CSS gradient制作绚丽渐变纹理背景效果（上）
【CSS进阶】使用CSS gradient制作绚丽渐变纹理背景效果
微芒不朽
38 1
祈澈菇凉
|
5月前
|
移动开发 前端开发
移动开发之css3实现背景几种渐变效果
移动开发之css3实现背景几种渐变效果
祈澈菇凉
45 0
半虹
|
前端开发
CSS实战笔记(三) 滤镜效果
CSS实战笔记(三) 滤镜效果
半虹
96 0
半虹
|
前端开发
CSS实战笔记(二) 几何图形
CSS实战笔记(二) 几何图形
半虹
75 0
派小星_
|
前端开发
CSS背景——学习总结
同一个标签可以同时设置背景图片及背景颜色，如果同时设置，那背景图片会把背景颜色覆盖
派小星_
124 0
CSS背景——学习总结
凯小默
|
前端开发
重学前端 41 # CSS的颜色
重学前端 41 # CSS的颜色
凯小默
81 0
重学前端 41 # CSS的颜色
微芒不朽
|
前端开发
【CSS进阶】使用CSS gradient制作绚丽渐变纹理背景效果(中)
一直对渐变背景这块比较感兴趣，但是因为每天加班实在太忙了，任务也比较多。所以就只能下班的时间研究渐变背景这方面的知识，一来满足了自己的好奇心，二来可以更加了解这方面的知识。
微芒不朽
479 0
【CSS进阶】使用CSS gradient制作绚丽渐变纹理背景效果(中)
微芒不朽
|
前端开发 程序员
【CSS进阶】使用CSS gradient制作绚丽渐变纹理背景效果(下)
一直对渐变背景这块比较感兴趣，但是因为每天加班实在太忙了，任务也比较多。所以就只能下班的时间研究渐变背景这方面的知识，一来满足了自己的好奇心，二来可以更加了解这方面的知识。
微芒不朽
504 0
【CSS进阶】使用CSS gradient制作绚丽渐变纹理背景效果(下)

热门文章

最新文章

  • 1
    Linux查看进程的内存占用情况
  • 2
    大咖云集，技术宅开趴倒计时 —— 2017 Kubernetes Meetup | 成都站
  • 3
    ubuntu安装KVM虚拟机管理virt-manager
  • 4
    OpenCV4之C++入门详解 （上）
  • 5
    vue2中computed中无法获取到this
  • 6
    Visual Basic快速入门
  • 7
    HDU 4968 Improving the GPA
  • 8
    这56家公司共同发力智慧城市
  • 9
    书写高质量JavaScript代码的要义（The Essentials of Writing High Quality JavaScript）翻译
  • 10
    linux驱动开发--字符设备：信号量
  • 1
    【软件工程】融通未来的工艺：深度解析统一过程在软件开发中的角色
    16
  • 2
    IBM SPSS Modeler分类决策树C5.0模型分析空气污染物数据
    14
  • 3
    【软件工程】走进瀑布模型：传统软件开发的经典之路
    14
  • 4
    数据分享|R语言用lme4多层次（混合效应）广义线性模型（GLM），逻辑回归分析教育留级调查数据（下）
    12
  • 5
    【软件工程】走近演化过程模型：软件开发的不断进化之路
    88
  • 6
    【Mybatis】深入学习MyBatis：概述、主要特性以及配置与映射
    17
  • 7
    【MySQL】数据库规范化的三大法则 — 一探范式设计原则
    16
  • 8
    r语言中对LASSO回归，Ridge岭回归和弹性网络Elastic Net模型实现（下）
    16
  • 9
    【MySQL】数据库中为什么使用B+树不用B树
    11
  • 10
    【MySQL】SQL优化
    11

    • 相关课程

    更多
  • 前端开发CSS基础
  • CSS 快速掌握

    • 相关电子书

    更多
  • 骨骼动画实践
  • 低代码开发师（初级）实战教程
  • 阿里巴巴DevOps 最佳实践手册

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • CSS基础教程
    • 下一篇
    部署LAMP环境（Alibaba Cloud Linux 3）