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 ...
随机推荐
- go切片和指针切片
转载请注明出处: 在Go语言中,切片(Slice)和指针的切片(即切片中每个元素都是指向某种数据类型的指针)是两个不同的概念,它们各自具有特定的用途和优势. 切片(Slice) 切片是对数组的一个连续 ...
- linux 性能自我学习 ———— cpu 切换带来的性能损耗 [二]
前言 我们知道现在操作系统,都是多进程和多线程,那么会有一个操作系统帮助我们去切换进程和线程,这个是要消耗cpu资源的,那么就来了解一下cpu资源消耗情况. 正文 一般是下面几个场景切换: 进程上下文 ...
- lattice的ip不显示，如何解决
最近ip服务器可能会遇到问题,建议客户把更新检查关掉.我们有对应的IP下载链接. diamond在 https://www.latticesemi.com/ispupdate/ipexpr ...
- Gowin 1nr-9k mipi测试
本次实验是利用gowin 1nr-9k的开发板测试MIPI屏. 测试的屏是2.0寸的,接口如下: 接上IO就是RST和MIPI的时钟和数据接口,另外就是电源和地. Gowin的案例中,首先是软件要升级 ...
- ABP -Vnext框架一步一步入门落地教程——使用ABP -Vnext创建一个WEBAPI接口（二）
开发主题:何谓开发应用服务端 在官方开发教程这一段的内容叫做开发应用服务端,作为现在前后端分离的开发模式来说,一个应用就分为前端页面框架和后端API,页面框架调用WEBAPI实现业务就完事了.所以咱们 ...
- 快速获取使用dblink的视图的全部字段
快速获取使用dblink的视图的全部字段 默认情况下,使用dblink连接的视图在PL/SQL是没法通过代码助手获取全部的字段的 如果要获取全部字段的话,可以使用一个奇怪的方法 对要获取的使用dbli ...
- 我在阿里巴巴做 Serverless 云研发平台
简介: Serverless 云研发平台经过这半年多的蜕变,已经从简单的解决工程链路的平台演进成一个面向研发.上线.运维的全生命周期研发平台,后续要解决的命题会集中在用户低门槛上. 作者 | 林昱(苏 ...
- 监控最佳实践--redis及业务接口
简介: 监控最佳实践--redis及业务接口 1. 背景 1.1 问题 2020-12-04,客户侧redis集群版监控DB0 CPU突增至100%,导致数据库无法正常服务,经排查客户侧业务上存在2M ...
- 阿里云容器服务全面升级为 ACK Anywhere，让云的边界拓展至企业需要的每个场景
简介: 2021 年 9 月 26 日上海阿里云计算峰会上,阿里巴巴研究员.阿里云云原生应用平台负责人丁宇宣布,阿里云容器服务全面升级为 ACK Anywhere,让企业在任何需要云的地方,都能获得 ...
- WPF 警惕使用 Dispatcher.InvokeShutdown 方法退出应用 将不触发 Application.Exit 事件
这是一个比较让人困惑的一个点,我一直都以为 Dispatcher.InvokeShutdown 和 Application.Current.Shutdown 是完全等价的.但是后面发现了其实这两者还是 ...