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. 一次生产环境CPU占用高的排查

    1. 项目背景 甲方是保密级别非常高的政府部门.所以我们全程拿不到任何测试数据,只能是自己模拟数据进行测试. 项目部署的时候,公司派了一人到甲方现场,在甲方客户全程监督下,进行部署,调试,导入数据等工 ...

  2. 【读书笔记】JS函数式编程指南

    第一章 海鸥群可以合并和繁育 conjoin breed var result = flock_a.conjoin(flock_c).breed(flock_b).conjoin(flo ck_a.b ...

  3. KMP 算法 再次学习

    c++ 版后面再补 package cn.kbug.dynamic; import java.util.Arrays; /** * KMP 算法本质上是对 搜索的字符串做优化,然后在匹配的时候,能做到 ...

  4. 安装CUDA

    https://developer.nvidia.com/cuda-toolkit-archive 使用deb安装的话,有时会报错: dpkg: 处理软件包 nvidia-driver-450 (-- ...

  5. 如何使用 ArrayPool

    如果不停的 new 数组,可能会造成 GC 的压力,因此在 aspnetcore 中推荐使用 ArrayPool 来重用数组,本文将介绍如何使用 ArrayPool. 使用 ArrayPool Arr ...

  6. 真·生产力「GitHub 热点速览」

    这些工具真的能极大提高生产力,节约你的时间来自(摸)我(鱼)增(划)值(水).先别提 style2paints,你给它随意画个草图,就能给你一个能交付给甲方爸爸的成品插画.如果提升 30%-40% 传 ...

  7. python pip 升级失败解决方法

    今天花了一上午学习python,然后现在在研究做爬虫,结果发现python提示pip需要更高的版本,然后就研究了半天,解决方法如下: 一.检查版本: pip show pip 二.更新版本: pyth ...

  8. .Net DI(Dependency Injection)依赖注入机制

    1.简介 DI:Dependency Injection,即依赖注入,他是IOC的具体实现. 在DI中,底层服务对象不再负责依赖关系的创建,而是交由顶端调用进行管理注入 好处:降低组件之间的耦合度,使 ...

  9. js手动触发页面元素点击事件,自定义点击事件模拟点击

    // initEvent事件已经弃用1. 创建MouseEvents事件const clickEvent = document.createEvent('MouseEvents')2. 初始化点击事件 ...

  10. Python爬虫-爬取手机应用市场中APP下载量

    一.首先是爬取360手机助手应用市场信息,用来爬取360应用市场,App软件信息,现阶段代码只能爬取下载量,如需爬取别的信息,请自行添加代码. 使用方法: 1.在D盘根目录新建.tet文件,命名为Ap ...