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. centos7 在线或离线安装python3

    1.前言 本文会使用到yum和wget,如果两者都不能用,参考安装教程 https://www.cnblogs.com/dennisdong/p/17037248.html 2.查看是否安装wget和 ...

  2. P9_组件-swiper和swiper-item的基本用法

    swiper 和 swiper-item 组件的基本使用 实现如图的轮播图效果: swiper 组件的常用属性 list.wxml <swiper class="swiper-cont ...

  3. cannot load "mso.dll" vs2008 web开发问题

    已成功解决办法: ①将VS 2008安装包WCUWebDesignerCoreWebDesignerCore.exe提取并重新安装: ②将C:Program Files/Common Files/Mi ...

  4. PX4源码地址和wiki

    [源码] https://github.com/987419640/Firmware [wiki] https://dev.px4.io/v1.9.0/zh/concept/architecture. ...

  5. Java期末测试

    会议预约管理信息系统(50分)     1.项目背景: 会议是企业进行决策.协商的重要组织形式,是企业日常办公处理事务的重要手段,是办公流程中不可缺少的重要环节,作为企业,如何有效的进行会议组织,管理 ...

  6. SpringBoot 整合Seccurity、权限管理

    Spring Boot 整合Spring Seccurity 1.创建maven工程 <?xml version="1.0" encoding="UTF-8&quo ...

  7. 04#Web 实战:Gitee 贡献图

    前言 这次要做的 Web 前端实战是一个 Gitee 个人主页下的贡献图(在线 Demo),偶尔做一两个,熟悉熟悉 JS 以及 jQ.整体来说这个案例并不难,主要是控制第一个节点以及最后一个节点处于星 ...

  8. Postgresql索引浅析

    一.摘要 1.索引是提高数据库性能的常用途径.比起没有索引,使用索引可以让数据库服务器更快找到并获取特定行.但是索引同时也会增加数据库系统的日常管理负担,因此我们应该聪明地使用索引. 2.索引其实就是 ...

  9. redis(13)持久化操作-AOF

    AOF(Append Only File) 以日志的形式来记录每个写操作(增量保存),将 Redis 执行过的所有写指令记录下来 (读操作不记录), 只许追加文件但不可以改写文件,redis 启动之初 ...

  10. layui级联操作

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link re ...