个人css样式_2: 渐变色
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: 渐变色的更多相关文章
- bootstrap 全局 CSS 样式
http://v3.bootcss.com/css/#less-mixins-utility 深入了解 Bootstrap 底层结构的关键部分,包括我们让 web 开发变得更好.更快.更强壮的最佳实践 ...
- 【03】全局 CSS 样式
全局 CSS 样式 设置全局 CSS 样式:基本的 HTML 元素均可以通过 class 设置样式并得到增强效果:还有先进的栅格系统. 概览 深入了解 Bootstrap 底层结构的关键部分,包括我们 ...
- CSS基础 华为渐变色产品列表 综合实战
华为网页链接:https://www.huawei.com/cn/?ic_medium=direct&ic_source=surlent html代码部分: <div class=&qu ...
- CSS样式快速入门
CSS样式快速入门 前言 前端基础的博客主要分为HTML.CSS和JavaScript,本类博客主要用于记录博主的学习过程和分享学习经验,由于博主学识浅薄,经验不足,难免会出现错误,欢迎大家提出问题. ...
- css样式让input垂直居中
css样式让input垂直居中 css代码: .div1{ border: 1px solid #CCC; width:1120px; height:40px; margin:auto; displa ...
- 深度理解CSS样式表,内有彩蛋....
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js设置css样式.
在js设置css样式做法 var obj = document.getElementById('div'); obj.style.width = '100px'; obj.style.height = ...
- CSS样式表
CSS样式及属性 样式标的基本概念 样式表的分类 1.内联样式表 和html联合显示,控制精确,但可重用性差,冗余多. 例:<p style="font-size:14px;" ...
- 脚本工具(获取某个文件夹下的所有图片属性批量生成css样式)
问题描述: 由于有一次工作原因,就是将某个文件夹下的所有图片,通过CSS描述他们的属性,用的时候就可以直接引用.但是我觉得那个文件夹下的图片太多,而且CSS文件的格式又有一定的规律,所有想通过脚本来生 ...
- jQuery所支持的css样式
jQuery所支持的css样式 backgroundPosition borderWidth borderBottomWidth borderLeftWidth borderRightWidth bo ...
随机推荐
- 一次生产环境CPU占用高的排查
1. 项目背景 甲方是保密级别非常高的政府部门.所以我们全程拿不到任何测试数据,只能是自己模拟数据进行测试. 项目部署的时候,公司派了一人到甲方现场,在甲方客户全程监督下,进行部署,调试,导入数据等工 ...
- 【读书笔记】JS函数式编程指南
第一章 海鸥群可以合并和繁育 conjoin breed var result = flock_a.conjoin(flock_c).breed(flock_b).conjoin(flo ck_a.b ...
- KMP 算法 再次学习
c++ 版后面再补 package cn.kbug.dynamic; import java.util.Arrays; /** * KMP 算法本质上是对 搜索的字符串做优化,然后在匹配的时候,能做到 ...
- 安装CUDA
https://developer.nvidia.com/cuda-toolkit-archive 使用deb安装的话,有时会报错: dpkg: 处理软件包 nvidia-driver-450 (-- ...
- 如何使用 ArrayPool
如果不停的 new 数组,可能会造成 GC 的压力,因此在 aspnetcore 中推荐使用 ArrayPool 来重用数组,本文将介绍如何使用 ArrayPool. 使用 ArrayPool Arr ...
- 真·生产力「GitHub 热点速览」
这些工具真的能极大提高生产力,节约你的时间来自(摸)我(鱼)增(划)值(水).先别提 style2paints,你给它随意画个草图,就能给你一个能交付给甲方爸爸的成品插画.如果提升 30%-40% 传 ...
- python pip 升级失败解决方法
今天花了一上午学习python,然后现在在研究做爬虫,结果发现python提示pip需要更高的版本,然后就研究了半天,解决方法如下: 一.检查版本: pip show pip 二.更新版本: pyth ...
- .Net DI(Dependency Injection)依赖注入机制
1.简介 DI:Dependency Injection,即依赖注入,他是IOC的具体实现. 在DI中,底层服务对象不再负责依赖关系的创建,而是交由顶端调用进行管理注入 好处:降低组件之间的耦合度,使 ...
- js手动触发页面元素点击事件,自定义点击事件模拟点击
// initEvent事件已经弃用1. 创建MouseEvents事件const clickEvent = document.createEvent('MouseEvents')2. 初始化点击事件 ...
- Python爬虫-爬取手机应用市场中APP下载量
一.首先是爬取360手机助手应用市场信息,用来爬取360应用市场,App软件信息,现阶段代码只能爬取下载量,如需爬取别的信息,请自行添加代码. 使用方法: 1.在D盘根目录新建.tet文件,命名为Ap ...