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. 理解和运用 ClassLoader 该篇文章就够了

    定义 根据<深入理解Java虚拟机>提到"通过一个类的全限定名(packageName.ClassName)来获取描述此类的二进制字节(class文件字节)这个动作的代码模块就叫 ...

  2. Python程序中首行#!/usr/bin/env python的作用

    1.通常我们在pycharm中写程序的时候会在首行写上#!/usr/bin/env python 如: #!/usr/bin/env python3#-*-coding: UTF-8 -*-#Auth ...

  3. CF976B

    这是一道考验思维找规律的题,很有可做性. 正文 题意 一个 n * m 的矩阵,从左上角(1 , 1) 开始,先向下走直到最下方,再向右走到最右,再向上走一个,再走到最左......一直走到(1 , ...

  4. 题解 P3833 【[SHOI2012]魔法树】

    题目 直通车 很显然这是个树刨的板子,树上链查询和子树查询 注意: 1.这个点的树根为 0 而不是 1 所以注意读图时点标号 +1 就解决了 2.注意数据范围\(2^{32}\) 然后板子就能过了 n ...

  5. Kafka Fetch Session剖析

    1.概述 最近有同学留言在使用Kafka的过程中遇到一些问题,比如在拉取的Topic中的数据时会抛出一些异常,今天笔者就为大家来分享一下Kafka的Fetch流程. 2.内容 2.1 背景 首先,我们 ...

  6. Urlrewrite

    Urlrewrite  地址重写,用户得到的全部都是经过处理后的URL地址 过滤用户的所有请求,符合规则的便对其进行重定向 rule结点中from默认使用的正则表达式来匹配,若用户访问服务器时的URL ...

  7. python 中excel表格的操作【转载】

    传说中python操作ms office功能最强大的是win32com,但只能要ms上使用. 不过对于比较简单的需求显得有些小题大作.那么来看下简单的,分别是xlrd和xlwt模块, 不过暂时只支持e ...

  8. Excel 多种粘贴方式

    一.粘贴为数值. 这个功能是选择性粘贴中最常用的功能.因为excel主要功能之一就是用来做数据分析,把其他格式粘贴为数据格式才能进行数据运算,把带有公式的计算结果粘贴为数值格式可以使复制后的内容不会变 ...

  9. 《》——8幅图图解Java机制

    String对象不可改变的特性 String s = "abcd"; s = s.concat"ef"; equals()与hashCode()方法协作约定 H ...

  10. UVA-12304 2D Geometry 110 in 1! (有关圆的基本操作)

    UVA-12304 2D Geometry 110 in 1! 该问题包含以下几个子问题 CircumscribedCircle x1 y1 x2 y2 x3 y3 : 三角形外接圆 Inscribe ...