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 ...
随机推荐
- 2、androidStudio调用Unity方法
1.导入Unity的Classes.jar文件 (1).首先找到这个包在哪 Unity版本为5.0之前时,classes.jar的路径: unity的安装路径\Editor\Data\Playback ...
- HarmonyOS 3.1版本发布，全面进入声明式开发
原文:https://mp.weixin.qq.com/s/kyyYCjrl6E8MBxKpBSKNWg,点击链接查看更多技术内容. 开发者的脚步永不停歇,2022年我们发布了HarmonyOS ...
- 抓包整理————tcp 协议[八]
前言 简单介绍一下tcp 协议. 正文 tcp历史: advanced research projects agency network: 1973年: tcp/ip 协议 tcpv4 协议分层后的网 ...
- MVC 下拉选项实现的几种方式
主要介绍4种方式 硬编码方式: ViewBag.hard_value = new List<SelectListItem>() { new SelectListItem(){Value=& ...
- InnoDB常用锁总结（行锁、间隙锁、临键锁、表锁）
相关文章 数据库系列:MySQL慢查询分析和性能优化 数据库系列:MySQL索引优化总结(综合版) 数据库系列:高并发下的数据字段变更 数据库系列:覆盖索引和规避回表 数据库系列:数据库高可用及无损扩 ...
- Lattice Crosslink开发简介
选择lattice的Crosslink器件,大多是因为它功耗比较低.价格便宜,开发也比较简单,相对来说更容易上手.大部分用在手机屏,摄像头模组和平板方面. Crosslink的开发工具是Diamond ...
- C++ 类方法解析：内外定义、参数、访问控制与静态方法详解
C++ 类方法 类方法,也称为成员函数,是属于类的函数.它们用于操作或查询类数据,并封装在类定义中.类方法可以分为两种类型: 类内定义方法: 直接在类定义内部声明和定义方法. 类外定义方法: 在类定义 ...
- 【Oracle】预定义说明的部分 ORACLE 异常错误(EXCEPTION)
预定义说明的部分 ORACLE 异常错误(EXCEPTION) 参考链接:https://www.cnblogs.com/thescentedpath/p/errordeal.html EXCEPTI ...
- python:在cmd中输入pip install pandas 显示‘pip’不是内部或外部命令，也不是可运行的程序 或批处理文件解决办法
1.首先找到自己文件夹中python的安装位置,一定要在Scripts文件夹下,可以看到pip文件,复制这时候的路径 2.使用快捷键 "win +R"打开cmd窗口,首先进入自己 ...
- Serverless JOB | 传统任务新变革
简介: SAE Job 重点解决了用户的效率和成本问题,在兼具传统任务使用体验和功能的同时按需使用,按量计费,做到低门槛任务上云,节省闲置资源成本. Job 作为一种运完即停的负载类型,在企业级开发中 ...