AI 助理
备案控制台
开发者社区 云计算 文章 正文

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

2023-02-19 109
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 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
目录
相关文章
hnrk7epeorhrk
|
6月前
|
前端开发
技术经验分享：CSS画三角形(三种方法)
技术经验分享：CSS画三角形(三种方法)
hnrk7epeorhrk
29 0
微芒不朽
|
7月前
|
前端开发
【CSS进阶】使用CSS gradient制作绚丽渐变纹理背景效果（中）
【CSS进阶】使用CSS gradient制作绚丽渐变纹理背景效果
微芒不朽
180 1
微芒不朽
|
7月前
|
前端开发
【CSS进阶】使用CSS gradient制作绚丽渐变纹理背景效果（下）
【CSS进阶】使用CSS gradient制作绚丽渐变纹理背景效果
微芒不朽
188 1
微芒不朽
|
7月前
|
前端开发 容器
【CSS进阶】使用CSS gradient制作绚丽渐变纹理背景效果（上）
【CSS进阶】使用CSS gradient制作绚丽渐变纹理背景效果
微芒不朽
169 1
土木林森
|
7月前
|
前端开发 UED
【专栏：CSS基础篇】CSS背景与边框：设计网页外观
【4月更文挑战第30天】CSS中的背景和边框是网页设计的关键元素，能增强视觉层次和用户体验。背景可通过`background-color`设置颜色，`background-image`添加图像，`background-position`和`background-size`调整位置和大小。边框用`border-style`定义样式，`border-width`设定宽度，`border-radius`创建圆角。理解并巧妙运用这些属性，结合媒体查询实现响应式设计，将使网页更具吸引力和功能性。不断学习和创新是提升设计能力的关键。
土木林森
103 0
微芒不朽
|
7月前
|
前端开发
【CSS进阶】巧用伪元素before和after制作绚丽效果（下）
【CSS进阶】巧用伪元素before和after制作绚丽效果（下）
微芒不朽
78 0
祈澈菇凉
|
移动开发 前端开发
移动开发之css3实现背景几种渐变效果
移动开发之css3实现背景几种渐变效果
祈澈菇凉
82 0
半虹
|
前端开发
CSS实战笔记(三) 滤镜效果
CSS实战笔记(三) 滤镜效果
半虹
124 0
半虹
|
前端开发
CSS实战笔记(二) 几何图形
CSS实战笔记(二) 几何图形
半虹
98 0
凯小默
|
前端开发
重学前端 41 # CSS的颜色
重学前端 41 # CSS的颜色
凯小默
110 0
重学前端 41 # CSS的颜色

热门文章

最新文章

  • 1
    Hadoop迁移MaxCompute神器之DataX-On-Hadoop使用指南
  • 2
    Nginx的启动、停止与重启
  • 3
    Hive之数据倾斜的原因和解决方法
  • 4
    开发人员各级岗位胜任力模型
  • 5
    Node.js 中流操作实践
  • 6
    传奇龙版地图查看器
  • 7
    调整DC的网络对网络是否会有影响?
  • 8
    How to maintain Oracle10g Recyclebin?
  • 9
    你知道自己感染了恶意软件吗？
  • 10
    Groovy 快速入门
  • 1
    Python学习的自我理解和想法（9）
    90
  • 2
    Kimi 上线视觉思考模型，K1 系列强化学习模型正式开放，无需借助外部 OCR 处理图像与文本进行思考并回答
    103
  • 3
    CosyVoice 2.0：阿里开源升级版语音生成大模型，支持多语言和跨语言语音合成，提升发音和音色等的准确性
    84
  • 4
    Megrez-3B-Omni：无问芯穹开源最强端侧全模态模型，支持理解图像、音频和文本三种模态数据
    52
  • 5
    FreeScale：无需微调即可提升模型的图像生成能力，生成 8K 分辨率的高质量图像
    39
  • 6
    Freestyler：微软联合西工大和香港大学推出说唱音乐生成模型，支持控制生成的音色、风格和节奏等
    38
  • 7
    《C 语言与统计假设检验：洞察人工智能模型性能差异》
    83
  • 8
    《C 语言赋能：物联网环境下人工智能应用的能耗优化之道》
    24
  • 9
    《C 语言助力神经网络剪枝：优化模型的卓越之道》
    25
  • 10
    《C 语言复数运算：赋能人工智能信号处理新境界》
    20

    • 相关课程

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

    • 相关电子书

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

    • 相关实验场景

    更多
  • 图表样式智能美化工具
  • 前端开发基础3：CSS3常见显示属性
  • CSS基础教程
    • 下一篇
    fs.oss.accessKeyId和fs.oss.accessKeySecret。