css3 渐变

曹丕
• 阅读 1095

css3
ps: css越来越真正的像一门语言了,css已经有变量了,刚刚看到文档中。一个实验性质的功能。

渐变

渐变分为两种渐变,一种是线性渐变,一种是径向渐变

线性渐变

线性渐变为向上,向下,向左,向右两种渐变方式。

linear-gradient()函数

此为css的一个函数。线性渐变由一个轴即梯度线构成。其上的每个点具有两种或多种颜色。其轴上的每个点具有独立的颜色。为了构建出平滑的渐变,该函数还会构建一系列的着色线。每一条着色线的颜色还会取决于与之垂直相交的渐变线上的色点。
css3 渐变

// 渐变轴45度,重蓝色到红色
linear-gradient(45deg, blue, red);

css3 渐变

// 从右下到左上,蓝色渐变到红色
linear-gradient(to left top, blue, red);

css3 渐变

// 从下到上,从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 
linear-gradient(0deg, blue, green 40%, red);
ps 透明度为rgba的最后一个参数

径向渐变

径向渐变由其中心点,边缘形状,轮廓,及其位置,和色值结束点组成。
径向渐变由椭圆不断的组成
css3 渐变

第一个参数

第一个参数一般都可省,

closest-side

css3 渐变

closest-corner

css3 渐变

closest-side

css3 渐变

farthest-corner

css3 渐变

circle at 百分比

css3 渐变

分开写

css3 渐变

百分号

css3 渐变

点赞
收藏
评论区
推荐文章
九路 九路
5年前
一篇文章带你了解CSS 渐变知识
CSS3渐变使您能够是你的背景颜色在两个或多个颜色之间平滑过渡。早些时候,你必须使用图像实现这些效果。然而,通过使用CSS3渐变可以减少下载时间和带宽的使用.此外,缩放的元素在缩放时看起来更好,因为渐变是由浏览器生成的。一、浏览器支持表中的数字指定完全支持该属性的第一个浏览器版本。(来源于百度)数字后面的w
九路 九路
5年前
图形处理:给 Canvas 文本填充线性渐变
在Canvas中对文本填充水平或垂直的线性渐变可以轻易实现,而带角度的渐变就复杂很多;就好像下面这样,假设文本矩形宽为W,高为H,左上角坐标为X,Y。渐变示例.jpg(https://imghelloworld.osscnbeijing.aliyuncs.com/imgs/48edf7ce289dab3e1972d973aa
Wesley13 Wesley13
4年前
android中LinearGradient线性渐变
PaintpnewPaint();LinearGradientlgnewLinearGradien(0,0,100,100,Color.RED,Color.BLUE,Shader.TileMode.MIRROR);  参数一为渐变起初点坐标x位置,参数二为y轴位置,参数三和四分辨对应渐变终点,最后参数为平铺方式,这里设置为镜像Gr
Wesley13 Wesley13
4年前
CSS
css垂直渐变 example3    {    /\fallback\/    backgroundcolor:063053;    /\chrome2,safari4;multiplecolorstops\/    backgroundimage:we
Wesley13 Wesley13
4年前
CSS背景渐变
在css(https://www.oschina.net/action/GoToLink?urlhttp%3A%2F%2Fwww.51code.com%2F)中,有时我们需要实现如下图所示的,背景渐变(https://www.oschina.net/action/GoToLink?urlhttp%3A%2F%2Fwww.51code.com%2F
Wesley13 Wesley13
4年前
CSS背景颜色渐变
兼容多浏览器就要为每一个浏览器写对应的 CSS,太低版本的浏览器只能使用图片做背景。下面是当前五大浏览器对 gradient 的支持<style type"text/css" media"screen"gradient {width: 200px;height: 200px;/\ 如果浏览器不支持渐变,使用图像作为背景 \
Stella981 Stella981
4年前
Android学习笔记
   <shape            <!实心           <solidandroid:color"ff9d77"/           <!渐变           <gradient               android:startcolor"ff8c
Wesley13 Wesley13
4年前
CSS实现背景色渐变
一、使用CSS3属性/ for firefox /backgroundimage: mozlineargradient(top,fefefe,ebebeb);/ for webkit core /backgroundimage: webkitgradient(linear,0 0,0 100
Stella981 Stella981
4年前
CSS:linear
css语法background:lineargradient(direction,colorstop1,colorstop2,...);direction:用角度值指定渐变的方向(或角度);colorstop1,colorstop2,...:用于指定渐变的起止颜色_ps_:至少需要两种颜色1b
Wesley13 Wesley13
4年前
H5酷炫效果
<!doctypehtml<htmllang"zhCN"<head<metacharset"UTF8"<title线性渐变动画</title<stylebody{width:100%;
Easter79 Easter79
4年前
SwiftUI从入门到实战第2章第14节:AngularGradient
相关课程:http://hdjc8.com/hdjc/swiftUI/(https://www.oschina.net/action/GoToLink?urlhttp%3A%2F%2Fhdjc8.com%2Fhdjc%2FswiftUI%2F)使用AngularGradient绘制角度颜色渐变的背景。本节课演示角度渐变的使用。角度渐变是指从起点到终
曹丕
曹丕
Lv1
那堪旅馆经残腊,只把空书寄故乡。
文章
4
粉丝
0
获赞
0