背景色,除了纯色以外,还能够使用多种颜色组合成为渐变背景色,使页面丰富。 渐变背景分为两种: 1、线性渐变; 2、环形渐变; 线性渐变 线性渐变分为:横向、纵向、对角渐变三种渐变 语法: <linear-gradient> = linear-gradient([ [ <angle>| to <asi ...
分类:
Web程序 时间:
2017-09-05 22:00:56
阅读次数:
230
canvas的尺寸在内部设置,CSS里设置会被缩放; lineWidth=10;描边宽度,以中间向两侧绘制; 绘制线段: moveTo,lineTo,strokeStyle,stroke(),beginPath() 示例: strokeStyle的三种赋值方式: (1)颜色值 (2)渐变 线性渐变: ...
分类:
其他好文 时间:
2017-08-31 09:42:47
阅读次数:
174
.gradient { background: rgba(236,101,33,1); background: -moz-linear-gradient(90deg,rgba(236,101,33,1) 0,rgba(212,132,91,1) 100%); background: -webkit-... ...
分类:
其他好文 时间:
2017-08-02 16:26:49
阅读次数:
166
1、线性渐变 (1)使用方向(point) (2)使用角度(angle) 角度方向为什么呢? (3)有多种颜色存在 (4)透明和渐变 使用透明度来到达图片渐变的效果,实际上是在背景图片上添加一个线性渐变,让白色由浅至深,则图片看起来会由清晰至模糊 rgba中的透明度与opacity中的value是一 ...
分类:
Web程序 时间:
2017-07-15 19:04:22
阅读次数:
308
1. CSS3实现圆角(border-radius),阴影(box-shadow), 2. 对文字加特效(text-shadow、),线性渐变(gradient),旋转(transform) 3.transform:rotate(9deg) scale(0.85,0.90) translate(0p ...
分类:
Web程序 时间:
2017-07-15 15:58:29
阅读次数:
154
感谢 LeaVerou 大神,让我们可以提前使用上这么美妙的属性。 conic-gradient 是个什么?说到 conic-gradient ,就不得不提的它的另外两个兄弟: linear-gradient : 线性渐变 radial-gradient : 径向渐变 说这两个应该还是有很多人了解并 ...
分类:
其他好文 时间:
2017-06-26 12:51:24
阅读次数:
523
5.背景线性渐变:background-gradient (1)linear:线性渐变, 谷歌浏览器:(webkit) background:-webkit-gradient(linear ,0 0,0 80% , from(#fff), to(#000));(水平渐变) background:-w ...
分类:
Web程序 时间:
2017-06-25 13:16:40
阅读次数:
180
css3定义了两种类型的渐变,即线性渐变和径向渐变。这里我要说的是线性渐变。 为了创建一个线性渐变,你必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时,你也可以设置一个起点和一个方向(或一个角度)。 语法:background: linear-gradient(direction, ...
分类:
Web程序 时间:
2017-06-12 18:54:10
阅读次数:
227
将角切掉也是一种流行的设计风格 传统解决方案可能是使用三角形或者其他形状的图片来盖住边角从而模拟切角效果 有了CSS3,我们完全可以使用新技术来实现 第一种方案: CSS渐变 需求一: 一个矩形需要切掉一个45°角 使用线性渐变来实现 background: #58a linear-gradient ...
分类:
Web程序 时间:
2017-05-29 21:43:35
阅读次数:
169
css3的gradient分为两种:线性渐变(linear)和径向渐变(radial)。 一、线性渐变linear-gradient 1、介绍 linear-gradient([设置方向],[设置开始颜色],[设置多种过度颜色],[设置结束颜色]) 参数: 第一个参数:指定渐变方向,可以用“角度”的 ...
分类:
Web程序 时间:
2017-05-26 23:26:06
阅读次数:
265