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. Linux 安装 WIFI驱动 rtl8188gu

    https://www.wyr.me/post/623 https://www.leonlu.cc/hobby/note006-rtl8188gu-linux/ 亲测:debian11,manjaro ...

  2. 学习Java Day4

    今天重点学习了读取输入,然后在eclipse上试了很多次,存在一些还没能解决的问题,发现eclipse的使用十分不熟练, 明天重点学习一下如何使用eclipse.

  3. JavaScript的闭包和作用域

    作用域相关 作用域的概念: 作用域是在运行时代码中的某些特定部分中变量,函数和对象的可访问性.换句话说,作用域决定了代码区块中变量和其他资源的可见性: 作用域的类型: 全局作用域: 最外层函数和在最外 ...

  4. pip和pipenv简记

    一. pip篇 1. 配置文件换源 windows:C:\Users\Administrator\pip\pip.ini mac:~/pip/pip.conf [global] index-url = ...

  5. [NOIP2018 提高组] 保卫王国

    题解 两只 \(\log\) 的动态 \(dp\) ! 相比标算倍增 动态 \(dp\) 既实用又好理解 \(Code\) #include<cstdio> #include<ios ...

  6. 题解 P2602 [ZJOI2010] 数字计数

    虽然说是数位 dp 入门题但是还是不是很会(悲 看了题解才做出来,中途因为各种 SB 问题调了很长时间(悲 聪明的你一定能看出来这是数位 dp,因此令 \(i\) 为当前填的位数,\(limit\) ...

  7. label 与input其中input的 id与name

    <div> <label for="myfile">新头像 {% load static %} <img src="{% static 'i ...

  8. C#窗体控件,文字随电脑分辨率自动调整大小

    一.在类中添加方法,代码如下: #region 窗体控件.字体随分辨率调整,自动调整大小 public static void SetTag(Control cons) { foreach (Cont ...

  9. ConvFormer: Closing the Gap Between CNN and Vision Transformers概述

    0.前言 相关资料: arxiv github 论文解读 论文基本信息: 发表时间:arxiv2022(2022.9.16) 1.针对的问题 CNN虽然效率更高,能够建模局部关系,易于训练,收敛速度快 ...

  10. BOOK01:《过目不忘的读书法》

    BOOK01:<过目不忘的读书法> 01 区分"信息"和"知识" 一年之后过时的是"信息",十年也不过时的是"知识&q ...