【CSS3】渐变背景
2024-05-13 23:29:09
文章目录
- 一、线性渐变
- 1. 渐变方向
- 2. 节点分布
- 3. 重复线性渐变
- 二、径向渐变
- 1. 可选属性值【shape size at position】
- 2. 节点分布
- 3. 重复径向渐变
一、线性渐变
1. 渐变方向
| 值 | 描述 |
|---|---|
| to top | 从下 向上 渐变 |
| to bottom | 从上 向下 渐变 |
| to left | 从右 向左 渐变 |
| to right | 从左 向右 渐变 |
| to top left（顺序可换） | 从右下 向左上对角 渐变（不等于 - 45°） |
| to top right（顺序可换） | 从左下 向右上对角 渐变（不等于 45°） |
| to bottom left（顺序可换） | 从右上 向左下对角 渐变（不等于 - 135°） |
| to bottom right（顺序可换） | 从左上 向右下对角 渐变（不等于 135°） |
| 0° | 从下 向上 渐变 |
| 90° | 从左 向右 渐变 |
| 180° | 从上 向下 渐变 |
| -90° 或 270° | 从右 向左 渐变 |
| 45° | 从左下向右上渐变（区别 to top right） |
| -45° 或 315° | 从右下向左上渐变（区别 to top left） |
| 135° | 从左上向右下渐变（区别 to bottom right） |
| -135° 或 225° | 从右上向左下渐变（区别 to bottom left） |
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><style type="text/css">.wrap {float: left;text-align: center;border: 1px solid #c3c3c3;margin-right: 10px;}.box {width: 248px;height: 148px;}.lg-tb {background-image: linear-gradient(red, yellow, blue);}.lg-tt {background-image: linear-gradient(to top, red, yellow, blue);}.lg-tr {background-image: linear-gradient(to right, red, yellow, blue);}.lg-tl {background-image: linear-gradient(to left, red, yellow, blue);}.lg-tbr {background-image: linear-gradient(to bottom right, red, yellow, blue);}.lg-45 {background-image: linear-gradient(45deg, red, yellow, blue);}.lg-n45 {background-image: linear-gradient(-45deg, red, yellow, blue);}.lg-135 {background-image: linear-gradient(135deg, red, yellow, blue);}.lg-n135 {background-image: linear-gradient(-135deg, red, yellow, blue);}.lg-0 {background-image: linear-gradient(0deg, red, yellow, blue);}</style>
</head>
<body><div style="overflow: hidden;"><h2>指向</h2><div class="wrap"><h4>从上到下（默认）</h4><div class="box lg-tb"></div></div><div class="wrap"><h4>从下到上（to top）</h4><div class="box lg-tt"></div></div><div class="wrap"><h4>从左到右（to right）</h4><div class="box lg-tr"></div></div><div class="wrap"><h4>从右到左（to left）</h4><div class="box lg-tl"></div></div><div class="wrap"><h4>左上到右下（to bottom right）</h4><div class="box lg-tbr"></div></div></div><div style="overflow: hidden;"><h2>角度</h2><div class="wrap"><h4>45°</h4><div class="box lg-45"></div></div><div class="wrap"><h4>-45°</h4><div class="box lg-n45"></div></div><div class="wrap"><h4>135°</h4><div class="box lg-135"></div></div><div class="wrap"><h4>-135°</h4><div class="box lg-n135"></div></div><div class="wrap"><h4>0°</h4><div class="box lg-0"></div></div></div>
</body>
</html>
2. 节点分布
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><style type="text/css">.wrap {float: left;text-align: center;border: 1px solid #c3c3c3;margin-right: 10px;}.box {width: 248px;height: 148px;}.lg {background-image: linear-gradient(red, yellow, blue, green, purple);}.lg-ratio {background-image: linear-gradient(red 5%, yellow 15%, blue 40%, green 65%, purple 90%);}</style>
</head>
<body><div style="overflow: hidden;"><div class="wrap"><h3>均匀（默认）</h3><div class="box lg"></div></div><div class="wrap"><h3>不均匀</h3><div class="box lg-ratio"></div></div></div>
</body>
</html>
3. 重复线性渐变
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><style type="text/css">.wrap {float: left;text-align: center;border: 1px solid #c3c3c3;margin-right: 10px;}.box {width: 248px;height: 148px;}.lg-tb {background-image: repeating-linear-gradient(red, yellow 10%, blue 20%);}.lg-tt {background-image: repeating-linear-gradient(to top, red, yellow 10%, blue 20%);}.lg-tr {background-image: repeating-linear-gradient(to right, red, yellow 10%, blue 20%);}.lg-tl {background-image: repeating-linear-gradient(to left, red, yellow 10%, blue 20%);}.lg-tbr {background-image: repeating-linear-gradient(to bottom right, red, yellow 10%, blue 20%);}.lg-45 {background-image: repeating-linear-gradient(45deg, red, yellow 10%, blue 20%);}.lg-n45 {background-image: repeating-linear-gradient(-45deg, red, yellow 10%, blue 20%);}.lg-135 {background-image: repeating-linear-gradient(135deg, red, yellow 10%, blue 20%);}.lg-n135 {background-image: repeating-linear-gradient(-135deg, red, yellow 10%, blue 20%);}.lg-0 {background-image: repeating-linear-gradient(0deg, red, yellow 10%, blue 20%);}</style>
</head>
<body><div style="overflow: hidden;"><h2>方向</h2><div class="wrap"><h4>从上到下（默认）</h4><div class="box lg-tb"></div></div><div class="wrap"><h4>从下到上（to top）</h4><div class="box lg-tt"></div></div><div class="wrap"><h4>从左到右（to right）</h4><div class="box lg-tr"></div></div><div class="wrap"><h4>从右到左（to left）</h4><div class="box lg-tl"></div></div><div class="wrap"><h4>左上到右下（to bottom right）</h4><div class="box lg-tbr"></div></div></div><div style="overflow: hidden;"><h2>角度</h2><div class="wrap"><h4>45°</h4><div class="box lg-45"></div></div><div class="wrap"><h4>-45°</h4><div class="box lg-n45"></div></div><div class="wrap"><h4>135°</h4><div class="box lg-135"></div></div><div class="wrap"><h4>-135°</h4><div class="box lg-n135"></div></div><div class="wrap"><h4>0°</h4><div class="box lg-0"></div></div></div>
</body>
</html>
二、径向渐变
1. 可选属性值【shape size at position】
background-image: repeating-radial-gradient(shape size at position, color1, color2, ...);
| 值 | 描述 |
|---|---|
| shape 圆的形状 | |
| ellipse | 椭圆（默认） |
| circle | 正圆 |
| size 半径大小 | |
| farthest-corner | 圆心到 最远角 的距离作为半径（默认） |
| farthest-side | 圆心到 最远边 的距离作为半径 |
| closest-corner | 圆形到 最近角 的距离作为半径 |
| closest-side | 圆心到 最近边 的距离作为半径 |
| position 圆心的位置 | |
| center | 盒子中间为圆心（默认） |
| top | 盒子上边为圆心 |
| bottom | 盒子下边为圆心 |
| left | 盒子左边为圆心 |
| right | 盒子右边为圆心 |
| top left（顺序可换） | 盒子左上角为圆心 |
| top right（顺序可换） | 盒子右上角为圆心 |
| bottom left（顺序可换） | 盒子左下角为圆心 |
| bottom right（顺序可换） | 盒子右下角为圆心 |
| x y |
【可负值】基于父元素的水平与垂直坐标（px、cm等尺寸单位） 如："0 0" 表示左上角，设置单值 [默认 x]，另一个值 [即 y] 默认为 "center" |
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><style type="text/css">.wrap {float: left;text-align: center;border: 1px solid #c3c3c3;margin: 0 10px 10px 0;}.box {width: 308px;height: 148px;}.a {background: rgba(220, 10, 160, 0.4);}.b {background: rgba(20, 30, 230, 0.4);}.c {background: rgba(255, 0, 140, 0.4);}.n-f {float: none;background: rgba(0, 230, 230, 0.4);}.e {background: rgba(20, 100, 0, 0.4);}.rg-aa {background-image: radial-gradient(ellipse farthest-corner at center, red, yellow, blue);}.rg-ab {background-image: radial-gradient(ellipse farthest-corner at top, red, yellow, blue);}.rg-ac {background-image: radial-gradient(ellipse farthest-corner at right, red, yellow, blue);}.rg-ba {background-image: radial-gradient(ellipse farthest-side at center, red, yellow, blue);}.rg-bb {background-image: radial-gradient(ellipse closest-corner at center, red, yellow, blue);}.rg-bc {background-image: radial-gradient(ellipse closest-side at center, red, yellow, blue);}.rg-ca {background-image: radial-gradient(circle farthest-corner at center, red, yellow, blue);}.rg-cb {background-image: radial-gradient(circle farthest-corner at top, red, yellow, blue);}.rg-cc {background-image: radial-gradient(circle farthest-corner at right, red, yellow, blue);}.rg-da {background-image: radial-gradient(circle farthest-side at center, red, yellow, blue);}.rg-db {background-image: radial-gradient(circle closest-corner at center, red, yellow, blue);}.rg-dc {background-image: radial-gradient(circle closest-side at center, red, yellow, blue);}.rg-tl {background-image: radial-gradient(ellipse farthest-corner at top left, red, yellow, blue);}.rg-0 {background-image: radial-gradient(ellipse farthest-corner at 0px, red, yellow, blue);}.rg-310-150 {background-image: radial-gradient(ellipse farthest-corner at 310px 150px, red, yellow, blue);}.rg-n310-n150 {background-image: radial-gradient(ellipse farthest-corner at -310px -150px, red, yellow, blue);}</style>
</head>
<body><div style="float: left;"><div style="overflow: hidden;"><div class="wrap a"><p>ellipse farthest-corner at center（默认）</p><div class="box rg-aa"></div></div><div class="wrap a"><p>ellipse farthest-corner at top</p><div class="box rg-ab"></div></div><div class="wrap a"><p>ellipse farthest-corner at right</p><div class="box rg-ac"></div></div></div><div style="overflow: hidden;"><div class="wrap b"><p>ellipse farthest-side at center</p><div class="box rg-ba"></div></div><div class="wrap b"><p>ellipse closest-corner at center</p><div class="box rg-bb"></div></div><div class="wrap b"><p>ellipse closest-side at center</p><div class="box rg-bc"></div></div></div><div style="overflow: hidden;"><div class="wrap c"><p>circle farthest-corner at center</p><div class="box rg-ca"></div></div><div class="wrap c"><p>circle farthest-corner at top</p><div class="box rg-cb"></div></div><div class="wrap c"><p>circle farthest-corner at right</p><div class="box rg-cc"></div></div></div></div><div style="float: left;"><div class="wrap n-f"><p>circle farthest-side at center</p><div class="box rg-da"></div></div><div class="wrap n-f"><p>circle closest-corner at center</p><div class="box rg-db"></div></div><div class="wrap n-f"><p>circle closest-side at center</p><div class="box rg-dc"></div></div></div><div><div class="wrap e"><p>以左上角为圆心</p><div class="box rg-tl"></div></div><div class="wrap e"><p>单值 0，即 x 轴（y 轴自动为 "center"）</p><div class="box rg-0"></div></div><div class="wrap e"><p>310px 150px（等于宽高时，为右下角）</p><div class="box rg-310-150"></div></div><div class="wrap e"><p>-310px -150px（负值时，向左/上偏移）</p><div class="box rg-n310-n150"></div></div></div>
</body>
</html>
2. 节点分布
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><style type="text/css">.wrap {float: left;text-align: center;border: 1px solid #c3c3c3;margin: 0 10px 10px 0;}.box {width: 308px;height: 148px;}.rg-a {background-image: radial-gradient(ellipse farthest-corner at center, red, yellow, blue);}.rg-b {background-image: radial-gradient(ellipse farthest-corner at center, red 20%, yellow 30%, blue 65%);}</style>
</head>
<body><div style="overflow: hidden;"><div class="wrap"><p>均匀</p><div class="box rg-a"></div></div><div class="wrap"><p>不均匀</p><div class="box rg-b"></div></div></div>
</body>
</html>
3. 重复径向渐变
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><style type="text/css">.wrap {float: left;text-align: center;border: 1px solid #c3c3c3;margin: 0 10px 10px 0;}.box {width: 308px;height: 148px;}.a {background: rgba(220, 10, 160, 0.4);}.b {background: rgba(20, 30, 230, 0.4);}.c {background: rgba(255, 0, 140, 0.4);}.n-f {float: none;background: rgba(0, 230, 230, 0.4);}.rg-aa {background-image: repeating-radial-gradient(ellipse farthest-corner at center, red 5%, yellow 10%, blue 15%);}.rg-ab {background-image: repeating-radial-gradient(ellipse farthest-corner at top, red 5%, yellow 10%, blue 15%);}.rg-ac {background-image: repeating-radial-gradient(ellipse farthest-corner at right, red 5%, yellow 10%, blue 15%);}.rg-ba {background-image: repeating-radial-gradient(ellipse farthest-side at center, red 5%, yellow 10%, blue 15%);}.rg-bb {background-image: repeating-radial-gradient(ellipse closest-corner at center, red 5%, yellow 10%, blue 15%);}.rg-bc {background-image: repeating-radial-gradient(ellipse closest-side at center, red 5%, yellow 10%, blue 15%);}.rg-ca {background-image: repeating-radial-gradient(circle farthest-corner at center, red 5%, yellow 10%, blue 15%);}.rg-cb {background-image: repeating-radial-gradient(circle farthest-corner at top, red 5%, yellow 10%, blue 15%);}.rg-cc {background-image: repeating-radial-gradient(circle farthest-corner at right, red 5%, yellow 10%, blue 15%);}.rg-da {background-image: repeating-radial-gradient(circle farthest-side at center, red 5%, yellow 10%, blue 15%);}.rg-db {background-image: repeating-radial-gradient(circle closest-corner at center, red 5%, yellow 10%, blue 15%);}.rg-dc {background-image: repeating-radial-gradient(circle closest-side at center, red 5%, yellow 10%, blue 15%);}</style>
</head>
<body><div style="float: left;"><div style="overflow: hidden;"><div class="wrap a"><p>ellipse farthest-corner at center（默认）</p><div class="box rg-aa"></div></div><div class="wrap a"><p>ellipse farthest-corner at top</p><div class="box rg-ab"></div></div><div class="wrap a"><p>ellipse farthest-corner at right</p><div class="box rg-ac"></div></div></div><div style="overflow: hidden;"><div class="wrap b"><p>ellipse farthest-side at center</p><div class="box rg-ba"></div></div><div class="wrap b"><p>ellipse closest-corner at center</p><div class="box rg-bb"></div></div><div class="wrap b"><p>ellipse closest-side at center</p><div class="box rg-bc"></div></div></div><div style="overflow: hidden;"><div class="wrap c"><p>circle farthest-corner at center</p><div class="box rg-ca"></div></div><div class="wrap c"><p>circle farthest-corner at top</p><div class="box rg-cb"></div></div><div class="wrap c"><p>circle farthest-corner at right</p><div class="box rg-cc"></div></div></div></div><div style="float: left;"><div class="wrap n-f"><p>circle farthest-side at center</p><div class="box rg-da"></div></div><div class="wrap n-f"><p>circle closest-corner at center</p><div class="box rg-db"></div></div><div class="wrap n-f"><p>circle closest-side at center</p><div class="box rg-dc"></div></div></div>
</body>
</html>
【CSS3】渐变背景相关推荐
- css3 渐变背景 圆形,CSS 教程（5）-Css3-1,边框,背景,渐变,
1.CSS3 边框 用 CSS3,你可以创建圆角边框,添加阴影框,并作为边界的形象而不使用设计程序,如 Photoshop 在 CSS3 中 border-radius 属性被用于创建圆角 div { ...
- css3渐变背景+背景图片
网站需要一个渐变背景上面有一副图片,在图片以外的区域显示背景色 <!DOCTYPE html> <html><head><meta charset=" ...
- Css3: gradient背景渐变
Css3: gradient背景渐变 原文链接:http://kk073000.blog.163.com/blog/static/34826942012123111322691/ css3实现了背景渐 ...
- CSS3 渐变新特性和HTML5 Canvas画布背景渐变实现方法详解
CSS3 渐变新特性和HTML5 Canvas画布背景渐变实现方法详解 大家好,又见面了,感觉我上一篇博客对部分同学都挺有帮助的,于是我决定继续写下去,会继续的解析知识点让大家更容易理解,希望能给大家 ...
- css动画唯美背景,小码哥-利用CSS3渐变实现唯美背景图
原标题:小码哥-利用CSS3渐变实现唯美背景图 CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡. 以前,你必须使用图像来实现这些效果.但是,通过使用 CSS3 渐 ...
- CSS3实现渐变背景动画特效
效果图: 具体实现代码如下: <!DOCTYPE html> <html lang="en"> <head><meta charset=& ...
- html给背景架渐变,JS和CSS实现渐变背景特效的代码
这篇文章主要介绍了JS和CSS实现的漂亮渐变背景特效代码,包含6个渐变效果,涉及JavaScript针对页面元素属性动态操作的相关技巧,需要的朋友可以参考下 本文实例讲述了JS+CSS实现的漂亮渐变背 ...
- CSS3 渐变: 线性渐变 linear-gradient 和 径向渐变 radial-gradient
渐变背景也是CSS3 的新特性,通过它可以在不使用图像的情况下,创建从一种颜色到另一种颜色的过渡.使用渐变的好处是,可以减少对图像的依赖,进而降低浏览网页时的带宽消耗,提高网站的访问速度. 渐变,就是 ...
- CSS3渐变——线性渐变
渐变背景一直以来在Web页面中都是一种常见的视觉元素.但一直以来,Web设计师都是通过图形软件设计这些渐变效果,然后以图片形式或者背景图片的形式运用到页面中.Web页面上实现的效果,仅从页面的视觉效果 ...
- CSS实现兼容性的渐变背景(gradient)效果（转）
by zhangxinxu from http://www.zhangxinxu.com 本文地址: http://www.zhangxinxu.com/wordpress/?p=743 一.有点俗态 ...
最新文章
- 微信notify mysql_微信支付的notify.php中如何获取订单号（php版）
- 防止论坛批量小广告指南
- DL之MaskR-CNN：Mask R-CNN算法的简介(论文介绍)、架构详解、案例应用等配图集合之详细攻略
- java改写模式_Java基于状态模式实现的文档编辑模式切换功能实例
- 分页探究--Filter+JSTL
- [渝粤教育] 中国地质大学 电力系统保护原理 复习题 (2)
- 2017年前端最受欢迎调查报告：ES 6,React和Sublime Text依然霸主
- UCMA(OCS) 开发系列之一
- 少吃点真的能改变“命运”？
- python类：class创建、数据方法属性及访问控制（下划线）
- 转浅谈缓存击穿、缓存并发和缓存失效
- 【首度披露】乐视电商云的整体架构与技术实现
- java项目目录_Java项目目录解释
- 北京航天大学考研计算机科学与技术分数线,北京航空航天大学计算机科学与技术考研...
- 【论文学习】Large-scale Video Classification with Convolutional Neural Networks
- 阿里语音识别看这一篇就够了
- 【.Net】asp.net 把图片从CMYK印刷模式转换为RGB原色模式
- IBM服务器管理口IMM使用指南
- 分析在线直播答题应用基础架构
- Facebook批量养号分享