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. 简要介绍WASAPI播放音频的方法

    正文 填一下之前挖的坑,这回就说说怎么用WASAPI播放声音吧. 本文完整代码可以在以下链接找到 https://gitcode.net/PeaZomboss/learnaudios 目录是demo/ ...

  2. CF750H New Year and Snowy Grid

    \(\text{Solution}\) 这个问题是不好判断的 考虑简单点的,\((1,1)\) 到 \((h,w)\) 是否连通 那么只要在最外围一圈 #(显然一些位置不能加),判断 \((h+1,n ...

  3. JZOJ 1078. 【GDOI2006】The Kth Element

    \(\text{Problem}\) 给定一个整数序列 \(a[1..N]\),定义 \(sum[i][j]=a[i]+a[i+1]+...+a[j]\),将所有的 \(sum[i][j]\) 从小到 ...

  4. day05-mybatis配置文件和SQL映射文件

    Mybatis配置文件&SQL映射文件 1.配置文件-mybatis-config.xml 1.1基本说明 mybatis的核心配置文件(mybatis-config.xml),它的作用如配置 ...

  5. Vue学习笔记之Hello Vue

    1. 引言 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上 ...

  6. 在Unity中对森林植被进行优化

    https://www.163.com/dy/article/DP6665QP0526E124.html

  7. mac sourceTree 每次操作提示需要密码

    1.在终端(terminal)打开你的工程目录2.输入git config credential.helper store 3.拉取代码git pull

  8. [C#]问号?和双问号??

    [C#]问号?和双问号?? 如何使用 问号?表示该变量可以为空 int?; 等价于:int? = null; 双问号??表示如果为双问号左边的变量为null,则取右边的值,否则取左边变量的值 c=a? ...

  9. HTML元素关系与CSS初步了解

    元素之间的关系 1.父子关系 父子关系就是在一个双标签内嵌套其他元素,那么嵌套在其中的元素就相当于"子",其外层元素相当于"父". <body>   ...

  10. NSIS 制作漂亮的安装界面(仿QQ音乐,网易云音乐)

    废话少说,先上图: 注:下面的录制的安装过程使用的安装包,均为制作的安装包,而非官方源包. QQ音乐的安装过程: ​