CSS3 & gradient & color & background

css background

https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients

Gradient Background

  1. Linear Gradients (goes down/up/left/right/diagonally)
  2. Radial Gradients (defined by their center)

Linear Gradients


background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

Diagonal 对角线


background-image: linear-gradient(angle, color-stop1, color-stop2);

rainbow

.rainbow {
height: 55px;
background-color: red;
/* For browsers that do not support gradients */
background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
/* Standard syntax (must be last) */
}

Radial Gradients


background-image: radial-gradient(shape size at position, start-color, ..., last-color);

size keywords

  • closest-side
  • farthest-side
  • closest-corner
  • farthest-corner

https://www.w3schools.com/css/css3_gradients.asp


css gradient generator

https://mycolor.space/gradient

https://cssgradient.io/


gradient text & gradient background

-webkit-text-fill-color & -webkit-gradient

https://wesbos.com/sanitize-html-es6-template-strings/


.post .entry-title {
font-size: 50px;
font-weight: 500;
margin: 20px 0;
border-top: 2px solid #ecd018;
border-bottom: 2px solid #ecd018;
line-height: 1.4;
padding: 20px 0;
background-image: -webkit-gradient(linear,0% 0%,25% 100%,from(#ff2c2c),to(#7a5e91));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

demo

https://www.cnblogs.com/xgqfrms/p/10898414.html



xgqfrms 2012-2020

www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!


CSS3 & gradient & color & background的更多相关文章

  1. CSS3 Gradient 渐变

    转载自:http://www.w3cplus.com/content/css3-gradient CSS3发布很久了,现在在国外的一些页面上常能看到他的身影,这让我羡慕已久,只可惜在国内为了兼容IE, ...

  2. CSS3 Gradient

    CSS3CSS3发布很久了,现在在国外的一些页面上常能看到他的身影,这让我羡慕已久,只可惜在国内为了兼容IE,让这一项技术受到很大的限制,很多Web前端人员都望而止步.虽然如此但还是有很多朋友在钻研C ...

  3. css3 Gradient背景

    css3的gradient分为两种:线性渐变(linear)和径向渐变(radial). 一.线性渐变linear-gradient 1.介绍 linear-gradient([设置方向],[设置开始 ...

  4. 深入理解CSS3 gradient斜向线性渐变——张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=3639 一.问题没有想 ...

  5. CSS3 Gradient渐变效果

    最近看到一遍关于渐变的文章,感觉很好,只是收藏感觉太可惜了,就转载了,好好学习! CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变). ...

  6. CSS border gradient color All In One

    CSS border gradient color All In One CSS Gradient Borders border-image-source & border-image-sli ...

  7. CSS3 Gradient线性渐变

    废话小说,看代码 <!DOCTYPE html > <html > <head> <meta charset="utf-8"> &l ...

  8. -_-#【CSS3】CSS3 gradient transition with background-position

    CSS3 gradient transition with background-position <!DOCTYPE html> <html> <head> &l ...

  9. CSS3的背景background

    CSS3中的Background属性 background: background-image || background-position/background-size || background ...

随机推荐

  1. 那些我们不知道的 Python 免费学习资料

    作者:小R编辑:AI 兔兔 Python 语言因为其易学,以及强大的功能,是很多刚开始学习编程的入门语言的选择之一. Python 语言被列入中小学教材后引起了越来越多人的关注. 希望孩子学习编程的家 ...

  2. WPF学习里程(二) XAML基础

    1.什么是XAML? 官方语言: XAML是eXtensible Application Markup Language的英文缩写,相应的中文名称为可扩展应用程序标记语言,它是微软公司为构建应用程序用 ...

  3. DDD领域驱动设计:领域事件

    1 前置阅读 在阅读本文章之前,你可以先阅读: DDD领域驱动设计是什么 DDD领域驱动设计:实体.值对象.聚合根 DDD领域驱动设计:仓储 MediatR一个优秀的.NET中介者框架 2 什么是领域 ...

  4. js基础(使用Canvas画图)

    HTML5的元素提供了一组JavaScript API,让我们可以动态地创建图形和图像. 图形是在一个特定的上下文中创建的,而上下文对象目前有两种.第一种是2D上下文,可以执行原始的绘图操作, 比如: ...

  5. java身份证号校验

    package com.pt.modules.contract.utils; import java.text.ParseException; import java.text.SimpleDateF ...

  6. 6. Linux输入输出重定向

    1.输入重定向是指把文件导入到命令中,而输出重定向则是指把原本要输出到屏幕的数据信息写入到指定文件中. 输入重定向中用到的符号及其作用 输出重定向中用到的符号及其作用 1)通过输出重定向将原本要输出到 ...

  7. Linux和Xshell安装

    Linux安装 开启虚拟机 选择语言 软件选择 点击软件→软件选择→基础设施服务器 安装位置 网络连接 开始安装 设置root密码 建议设置成root,因为密码忘了改起来很麻烦 登录 查看IP Xsh ...

  8. 通过模拟数据,使用js在前端实现模糊查询下拉框功能实例教程

    所谓模糊查询就是通过关键字在数据中匹配到包含关键字的数据,而得出的查询结果.本实例教程讲解在前端文本框输入关键字,显示匹配的数据列表功能. 首先得准备一个文本框和显示数据列表的div元素,html代码 ...

  9. Jenkins(6)测试报告邮件发送

    前言 前面已经实现在jenkins上展示html的测试报告,接下来只差最后一步,把报告发给你的领导,展示你的劳动成果了. 安装 Email Extension Plugin 插件 jenkins首页- ...

  10. std::thread线程库详解(4)

    目录 目录 前言 条件变量 一些需要注意的地方 总结 前言 本文主要介绍了多线程中的条件变量,条件变量在多线程同步中用的也比较多.我第一次接触到条件变量的时候是在完成一个多线程队列的时候.条件变量用在 ...