CSS3 & gradient & color & background
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
- Linear Gradients (goes down/up/left/right/diagonally)
- 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
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的更多相关文章
- CSS3 Gradient 渐变
转载自:http://www.w3cplus.com/content/css3-gradient CSS3发布很久了,现在在国外的一些页面上常能看到他的身影,这让我羡慕已久,只可惜在国内为了兼容IE, ...
- CSS3 Gradient
CSS3CSS3发布很久了,现在在国外的一些页面上常能看到他的身影,这让我羡慕已久,只可惜在国内为了兼容IE,让这一项技术受到很大的限制,很多Web前端人员都望而止步.虽然如此但还是有很多朋友在钻研C ...
- css3 Gradient背景
css3的gradient分为两种:线性渐变(linear)和径向渐变(radial). 一.线性渐变linear-gradient 1.介绍 linear-gradient([设置方向],[设置开始 ...
- 深入理解CSS3 gradient斜向线性渐变——张鑫旭
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=3639 一.问题没有想 ...
- CSS3 Gradient渐变效果
最近看到一遍关于渐变的文章,感觉很好,只是收藏感觉太可惜了,就转载了,好好学习! CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变). ...
- CSS border gradient color All In One
CSS border gradient color All In One CSS Gradient Borders border-image-source & border-image-sli ...
- CSS3 Gradient线性渐变
废话小说,看代码 <!DOCTYPE html > <html > <head> <meta charset="utf-8"> &l ...
- -_-#【CSS3】CSS3 gradient transition with background-position
CSS3 gradient transition with background-position <!DOCTYPE html> <html> <head> &l ...
- CSS3的背景background
CSS3中的Background属性 background: background-image || background-position/background-size || background ...
随机推荐
- 理解和运用 ClassLoader 该篇文章就够了
定义 根据<深入理解Java虚拟机>提到"通过一个类的全限定名(packageName.ClassName)来获取描述此类的二进制字节(class文件字节)这个动作的代码模块就叫 ...
- Python程序中首行#!/usr/bin/env python的作用
1.通常我们在pycharm中写程序的时候会在首行写上#!/usr/bin/env python 如: #!/usr/bin/env python3#-*-coding: UTF-8 -*-#Auth ...
- CF976B
这是一道考验思维找规律的题,很有可做性. 正文 题意 一个 n * m 的矩阵,从左上角(1 , 1) 开始,先向下走直到最下方,再向右走到最右,再向上走一个,再走到最左......一直走到(1 , ...
- 题解 P3833 【[SHOI2012]魔法树】
题目 直通车 很显然这是个树刨的板子,树上链查询和子树查询 注意: 1.这个点的树根为 0 而不是 1 所以注意读图时点标号 +1 就解决了 2.注意数据范围\(2^{32}\) 然后板子就能过了 n ...
- Kafka Fetch Session剖析
1.概述 最近有同学留言在使用Kafka的过程中遇到一些问题,比如在拉取的Topic中的数据时会抛出一些异常,今天笔者就为大家来分享一下Kafka的Fetch流程. 2.内容 2.1 背景 首先,我们 ...
- Urlrewrite
Urlrewrite 地址重写,用户得到的全部都是经过处理后的URL地址 过滤用户的所有请求,符合规则的便对其进行重定向 rule结点中from默认使用的正则表达式来匹配,若用户访问服务器时的URL ...
- python 中excel表格的操作【转载】
传说中python操作ms office功能最强大的是win32com,但只能要ms上使用. 不过对于比较简单的需求显得有些小题大作.那么来看下简单的,分别是xlrd和xlwt模块, 不过暂时只支持e ...
- Excel 多种粘贴方式
一.粘贴为数值. 这个功能是选择性粘贴中最常用的功能.因为excel主要功能之一就是用来做数据分析,把其他格式粘贴为数据格式才能进行数据运算,把带有公式的计算结果粘贴为数值格式可以使复制后的内容不会变 ...
- 《》——8幅图图解Java机制
String对象不可改变的特性 String s = "abcd"; s = s.concat"ef"; equals()与hashCode()方法协作约定 H ...
- UVA-12304 2D Geometry 110 in 1! (有关圆的基本操作)
UVA-12304 2D Geometry 110 in 1! 该问题包含以下几个子问题 CircumscribedCircle x1 y1 x2 y2 x3 y3 : 三角形外接圆 Inscribe ...