css的魅惑力

 css渐变色用途还是

比较广的。

----------------------------

效果图:

html代码(三个div):

<div class="div1" style="">
 
</div>
<div class="div2">
 
</div>
<div class="div3">
 
</div>

-------------------------
css代码:

.div2{
  width:120px;height:120px;
  border:1px solid orange;
  border-radius: 50%;
  background: radial-gradient(black, blue, green, yellow, red, white 70%)
}
.div3{
  width:120px;height:120px;
  border:1px solid violet;
  border-radius: 50%;
  background: linear-gradient(white 4%,red,blue,black,green,yellow,white 98%)
}
.div1{
  width:120px;height:120px;
  border:1px solid cyan;
  border-radius: 50%;
  background: linear-gradient(to right,black,green,yellow,white,red,blue,black)
}

个人css样式_2: 渐变色的更多相关文章

  1. bootstrap 全局 CSS 样式

    http://v3.bootcss.com/css/#less-mixins-utility 深入了解 Bootstrap 底层结构的关键部分,包括我们让 web 开发变得更好.更快.更强壮的最佳实践 ...

  2. 【03】全局 CSS 样式

    全局 CSS 样式 设置全局 CSS 样式:基本的 HTML 元素均可以通过 class 设置样式并得到增强效果:还有先进的栅格系统. 概览 深入了解 Bootstrap 底层结构的关键部分,包括我们 ...

  3. CSS基础 华为渐变色产品列表 综合实战

    华为网页链接:https://www.huawei.com/cn/?ic_medium=direct&ic_source=surlent html代码部分: <div class=&qu ...

  4. CSS样式快速入门

    CSS样式快速入门 前言 前端基础的博客主要分为HTML.CSS和JavaScript,本类博客主要用于记录博主的学习过程和分享学习经验,由于博主学识浅薄,经验不足,难免会出现错误,欢迎大家提出问题. ...

  5. css样式让input垂直居中

    css样式让input垂直居中 css代码: .div1{ border: 1px solid #CCC; width:1120px; height:40px; margin:auto; displa ...

  6. 深度理解CSS样式表,内有彩蛋....

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. js设置css样式.

    在js设置css样式做法 var obj = document.getElementById('div'); obj.style.width = '100px'; obj.style.height = ...

  8. CSS样式表

    CSS样式及属性 样式标的基本概念 样式表的分类 1.内联样式表 和html联合显示,控制精确,但可重用性差,冗余多. 例:<p style="font-size:14px;" ...

  9. 脚本工具(获取某个文件夹下的所有图片属性批量生成css样式)

    问题描述: 由于有一次工作原因,就是将某个文件夹下的所有图片,通过CSS描述他们的属性,用的时候就可以直接引用.但是我觉得那个文件夹下的图片太多,而且CSS文件的格式又有一定的规律,所有想通过脚本来生 ...

  10. jQuery所支持的css样式

    jQuery所支持的css样式 backgroundPosition borderWidth borderBottomWidth borderLeftWidth borderRightWidth bo ...

随机推荐

  1. JAVA虚拟机10---内存分配策略

    1.简介 对象的内存分配,从概念上讲,应该都是在堆上分配(而实际上也有可能经过即时编译后被拆散为标量类型并间接地在栈上分配).在经典分代的设计下,新生对象通常会分配在新生代中,少数情况下(例如对象大小 ...

  2. ros_navigation案列操作流程

    1. 启动仿真 source devel/setup.bash export TURTLEBOT3_MODEL=burger roslaunch turtlebot3_gazebo turtlebot ...

  3. Rainbond ubuntu20.04单主机(allinone)部署及简单应用构建

    1.Rainbond是什么? Rainbond 是一个云原生应用管理平台,使用简单,不需要懂容器.Kubernetes和底层复杂技术,支持管理多个Kubernetes集群,和管理企业应用全生命周期. ...

  4. 阅读openfoam框图

    看完of的帮助文档,会非常怀念fluent的帮助文档或是matlab的帮助文档 比如我要解决一个matlab问题,基本上看帮助文档一分钟就知道我要如何取用我想要的东西,of帮助文档不光做不到,还给你炫 ...

  5. 深度学习-LSTM

    目录 前言 神经网络的历史和背景 循环神经网络的出现及其作用 LSTM在处理序列数据中的应用 LSTM的基本原理 LSTM的结构和原理 遗忘门.输入门.输出门的作用 LSTM的训练方法 代码 LSTM ...

  6. Loadrunner性能测试简记

    性能测试 模拟多种正常值.峰值以及异常负载条件来对系统的各项性能指标进行的测试. 功能对比性能 功能测试是操作功能.需求规格(正向.逆向).性能测试是测业务场景.满足度(时间.空间).二者相辅相成,都 ...

  7. Hugging Face 每周速递: Space 支持创建模版应用、Hub 搜索功能增强、BioGPT-Large 还有更多

    每一周,我们的同事都会向社区的成员们发布一些关于 Hugging Face 相关的更新,包括我们的产品和平台更新.社区活动.学习资源和内容更新.开源库和模型更新等,我们将其称之为「Hugging Ne ...

  8. day11_多态&抽象类&接口

    1.多态 1.1 多态的概述(记忆) 什么是多态     同一对象,在不同时刻表现出来的不同形态. 多态的前提 有继承/实现关系 有方法重写 有父类对象的引用执行子类对象 1.2 多态中的成员访问特点 ...

  9. VUE环境运行搭建

    第一步:下载安装node.js 1.下载node.js,vue的运行是要依赖于node的npm的管理工具来实现,所以第一步我们需要安装 Node.js,访问官网 https://nodejs.org/ ...

  10. 2023.3.4Leecode982按位与为零的三元组

    题目的要求 给你一个整数数组 nums ,返回其中 按位与三元组 的数目. 按位与三元组 是由下标 (i, j, k) 组成的三元组,并满足下述全部条件: 0 <= i < nums.le ...