CSS——渐变色
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 210px;
height: 50px;
float: left;
margin: 10px;
}
.one {
background: linear-gradient(to right bottom, red, blue 70px);
}
.two {
background: linear-gradient(190deg, #000, #FFF);
}
.three {
background: linear-gradient(red, green, blue);
}
.four {
background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 210px;
height: 100px;
float: left;
margin: 10px;
border: 1px solid black;
}
.one {
background: radial-gradient(circle at 50%, red, yellow, lime);
}
.two {
background: radial-gradient(ellipse 100px 30px at 30%, red, yellow, lime);
}
.three {
background: radial-gradient(circle 100px at 50%, red 10%, yellow 50%, lime 100px);
}
.four {
background: radial-gradient(circle closest-corner at 50px 30px, red, yellow, lime);
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 210px;
height: 100px;
float: left;
margin: 10px;
border: 1px solid black;
}
.one {
background: conic-gradient(at 50%, red, orange, yellow, green, blue, indigo, violet, red);
}
.two {
background: conic-gradient(red 0deg 30deg, orange 30deg 50deg, yellow 50deg 200deg, green 200deg 300deg, blue 300deg 360deg);
}
.three {
background: conic-gradient(from 90deg, red 0% 55%, yellow 55% 90%, lime 90% 100%);
}
.four {
background: conic-gradient(#fff 0.25turn, #000 0.25turn 0.5turn, #fff 0.5turn 0.75turn, #000 0.75turn);
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 210px;
height: 100px;
float: left;
margin: 10px;
border: 1px solid black;
}
.one {
background: repeating-linear-gradient(190deg, #000 0px 10px, #FFF 10px 20px);
}
.two {
background: repeating-radial-gradient(circle 100px at 50%, red 0% 10%, yellow 10% 30%, lime 30% 40%);
}
.three {
background: repeating-conic-gradient(#69f 0 36deg, #fd44ff 36deg 72deg);
}
.four {
background: conic-gradient(#fff 0.25turn, #000 0.25turn 0.5turn, #fff 0.5turn 0.75turn, #000 0.75turn) top left / 25% 25% repeat;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
</body>
</html>
CSS——渐变色的更多相关文章
- 兼容主流浏览器的css渐变色
网页中的渐变色区域,渐变色背景,一般都是通过ps图片方法来实现,但是图片放得多了会影响网页的打开速度,本文介绍的就是用纯 CSS 实现 IE .Firefox.Chrome 和 和Safari都支持的 ...
- CSS渐变色边框，解决border设置渐变后，border-radius无效的问题
需求:用css设置渐变边框通过border-image来实现渐变色边框 <div class="content"></div> .content { wid ...
- css渐变色DIV
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...
- css渐变色
<!DOCTYPE html><html><head> <meta http-equiv="content-type" content=& ...
- CSS 渐变色
CSS linear-gradient() 函数 http://www.runoob.com/cssref/func-linear-gradient.html CSS radial-gradient( ...
- css渐变色兼容性写法
background: -webkit-linear-gradient(left, #0f0f0f, #0c0c0c, #272727); /* Safari 5.1 - 6.0 */ backgro ...
- 利用target的特性，可以实现纯css的tab效果切换
基础知识: :target起作用的是href连接到的位置 如 <a href="#tab1">tab1</a> <div id="tab1& ...
- AI & HR
AI & HR 数字化人才画像 人力资本数字化管理 通过"AI+数据+专家"的手段,将"数字化人才画像"作为服务起点与信息入口,扩展提供全场景的数字化人 ...
- Matplotlib数据可视化（3）：文本与轴
在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...
- css文字和背景色渐变色
定义一个div: <div class="shop-title" >上海迪士尼度假区官方旗舰店</div> 使用css: .shop-title{ widt ...
随机推荐
- k8s之configmap应用
一.创建configmap 1.基于命令创建configmap root@k8s-master01:~# kubectl create configmap demoapp-cfg --from-lit ...
- C#开发的PhotoNet看图软件 - 开源研究系列文章 - 个人小作品
这几天忙于编程.上次发布了壁纸管理器的插件版( https://www.cnblogs.com/lzhdim/p/18074135 ),然后整理和添加了一下相关的壁纸图片文件,虽然在管理器中也能浏览壁 ...
- 第 1 章 Python 爬虫概念与 Web 基础
第 1 章 Python 爬虫概念与 Web 基础 1.1 爬虫概念 1.1.1 什么是爬虫 爬虫,即网络爬虫,又称网络蜘蛛(Web Spider),是一种按照一定规则,用来自动浏览或抓取万维网数据的 ...
- 转载 | 基于阿里云Serverless函数计算开发的疫情数据统计推送机器人
简介: 本文选自函数计算征集令优秀征文! 一.Serverless函数计算 什么是Serverless? 在<Serverless Architectures>中对 Serverless ...
- 为了让你在“口袋奇兵”聊遍全球，Serverless 做了什么？
简介: 江娱互动是一家新兴的游戏企业,自 2018 年成立伊始,江娱互动就面向广阔的全球游戏市场,通过创造有趣的游戏体验,在竞争激烈的游戏市场占得一席之地.仅仅 2 年的时间,江娱互动就凭借 Topw ...
- IT人的年夜饭，也太香了吧
简介: 平时的IT人,奋战在修复bug前线,起早与贪黑齐飞,调休共假期待定.到了新春佳节,对于IT人来说,没有什么是比一顿年夜饭更让人熨贴肺腑的了.为了让废寝忘食编程序.闻机起早保运维的IT人过一个 ...
- [Auth] 浅谈 jwt token 的妙处
无状态(易扩展). 有过期时间限制,相对安全(可以有多个有效的 token). 更轻量(适合少量信息),类似传统 query string 签名方式. 标准统一(跨语言). Refer:JWT Aut ...
- WPF 将控件放入到 UserControl 里获取 HwndSource 为空的情况
本文记录将 WPF 控件放入到 UserControl 里,如果此 UserControl 没有被设置 Visibility 为可见过,那么放在此 UserControl 内的控件将获取不到 Hwnd ...
- git将本地项目关联远程仓库并上传到新分支
混合项目开发,项目交接的时候没做好,新入职接手老项目的时候一脸懵逼,进入开发阶段时,越搞越不对,越搞越不对,总感觉 本地跑的项目和己方测试环境以及客户的测试环境和目标环境不一致,结果发现着手的两套代码 ...
- 使用Vue3在浏览器端进行zip文件压缩
在前端开发中,我们时常需要处理文件上传和下载的功能.有时,用户可能希望将多个文件打包成一个zip文件以便于下载.今天,我将分享一个使用Vue3和JSZip库在浏览器端实现zip文件压缩的示例. 首先, ...