关键词:
一、作为图片存在的CSS3 gradient渐变
我觉得CSS3 Backgrounds比较厉害的一个地方就是支持多背景,也就是背景图片个数可以无限累加,正好CSS3的gradient渐变性质是background-image
,于是,我们可以实现任意数量渐变背景图的叠加效果。甚至,理论上,任意彩色jpg
图片都是可以使用CSS3渐变背景实现的。
这种特性和box-shadow
类似,参见“CSS3 box-shadow盒阴影图形生成技术”,text-shadow
也有无限累加性,通常我们可以实现任意粗细和色彩的描边效果。
当然我们实际开发的时候,是不会使用CSS3渐变来模拟一张图片的,更多是用来生成一些简单实用的图形。
本文就将通过实现虚线,三角以及加号减号等案例,展示下CSS3 linear-gradient线性渐变要图形生成技巧。
二、CSS3 linear-gradient线性渐变生成比例可控虚线及工具
我们平常要实现一个虚线效果,多半是使用border-style:dashed
声明实现,然而虚线边框有一个问题,那就是虚线的实虚比例是固定的,例如,Chrome和Firefox浏览器下,颜色区的宽高比是3:1,颜色区和透明区的宽度比例是1:1:
IE浏览器下颜色区的宽高比是2:1,颜色区和透明区的宽度比例也是2:1,如下:
如果有设计需求,希望我们的虚线颜色区的宽高比是5:1,此时,border-style:dashed
就鞭长莫及了。
此时,借助CSS3 linear-gradient
线性渐变我们可以轻松实现上面的效果,假设HTML代码如下:
<div class="dashed"></div>
则对应的CSS代码如下:
.dashed { height: 1px; background: linear-gradient(to right, #000000, #000000 5px, transparent 5px, transparent); background-size: 10px 100%; }
效果截图如下:
当我们使用CSS3渐变来构建图形的时候,最画龙点睛的属性,其实并不是渐变本身,而是background-size
属性,让我们的图形约束在特定区域大小。
关于线性渐变生成虚线,我特意制作了一个CSS代码生成工具,您可以狠狠的点击这里:基于CSS3线性渐变实现的虚线CSS生成工具demo
我们可以选择你希望的虚线的比例,步幅以及颜色,然后对应的CSS代码就可以生成了,例如:
有兴趣的话可以手动试一试。
二、CSS3 linear-gradient线性渐变生成带线框的三角
做到三角图形的生成,最经典的应该是使用CSS border
属性了,可参见“CSS border三角、圆角图形生成技术简介”一文,如果是纯色三角,使用CSS3 clip-path
也是一个不错的方法,关于clip-path文章参见这里。
但是有时候我们的三角是带线框的,类似下图这种效果:
如果不考虑兼容性,比较好的做法是border
属性生成两侧线框,然后CSS3 transform
旋转,但也有局限,那就是如果和三角对接的区域它不是纯色而是渐变背景,则就有问题了,因为此时的三角实际上是个旋转45度的正方形图形块。
此时使用渐变图形生成方法就没有任何压力了,因为可以得到一个真正的三角(135度斜向渐变到对角线位置),示意图如下:
相关CSS代码如下(这里线框也是渐变实现的):
.tri { width: 6px; height: 6px; background: linear-gradient(to top, #ddd, #ddd) no-repeat, linear-gradient(to right, #ddd, #ddd) no-repeat, linear-gradient(135deg, #fff, #fff 6px, hsla(0,0%,100%,0) 6px) no-repeat; background-size: 6px 1px, 1px 6px, 6px 6px; transform: rotate(-45deg); }
眼见为实,您可以狠狠的点击这里:基于CSS3线性渐变三角图形生成demo
更新记录(10-29):transparent 6px
→ hsla(0,0%,100%,0) 6px
,新升级Firefox下transparent边缘会有灰色背景渲染bug,使用rgba或hsla白色透明表示可修复。
三、CSS3 linear-gradient线性渐变生成加号和减号
要实现一个减号效果非常简单,例如要实现一个10px*2px的减号图形,则CSS:
.minus { background-image: linear-gradient(to top, #666, #666); background-size: 10px 2px; }
原理如下,先使用渐变生成一个铺满整个元素背景的纯色(#666)渐变图片,然后使用background-size
属性控制成我们想要的大小,效果就实现了。
加号效果也是类似,只是要多一层linear-gradient
的累加。
最终可以实现类似下图效果:
和传统::before
, ::afetr
伪元素配合background-color
或border
相比,使用渐变背景生成有个非常重要的好处,那就是居中定位非常方便,直接在background
属性后面加个center
即可,而传统实现通常需要绝对定位,然后再巴拉巴拉一通代码来居中,很啰嗦的。
眼见为实,您可以狠狠的点击这里:基于CSS3线性渐变加号和减号图形demo
css3linear-gradient实现购物车地址选择信封效果
上代码:1<!DOCTYPEhtml>2<html>34<head>5<metacharset="UTF-8">6<title></title>7<linkrel="stylesheet"href="css/normalize.css"/>8<linkrel="stylesheet"href="css/fon 查看详情
swiftui基础控件-gradient
...AngularGradient,EllipticalGradient这4种渐变效果LinearGradient称为线性渐变,在SwiftUI中,使用LinearGradient非常简单:实现线性渐变需要提供3个参数:RadialGradient称为径向渐变,在SwiftUI中,使用RadialGradient非常简单:实现线性渐变需要提供... 查看详情
纯css使用线性渐变实现滚动进度条
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie 查看详情
利用线性渐变阴影旋转实现晴天效果
1<!DOCTYPEhtml>2<htmllang="en">3<head>4<metacharset="utf-8">5<metaname="viewport"content="width=device-width,initial-scale=1,maximum-scale=1.0,minimum-scale=1.0,user-scalabl 查看详情
使用css3线性渐变实现图片闪光划过效果
<pclass="overimg"><a><imgsrc="http://www.nowamagic.net/librarys/images/201402/2014_02_15_01.jpg"></a><iclass="light"></i></p>.overimg{position:relative;displa 查看详情
颜色线性渐变-cagradientlayer
我们先来看一下效果图吧:其实,就是一个颜色的线性渐变,使用CAGradientLayer很容易就能实现。由于代码很简单,就不做过多讲解了,直接看代码吧。1importUIKit23classViewController:UIViewController{45overridefuncviewDidLoad(){6super.viewDidLoad()7se... 查看详情
css3线性渐变
css3渐变分为线性渐变(linear-gradient)和径向渐变(radial-gradient)。下面简单介绍下linear-gradient的应用。以下都是在webkit内核浏览器下进行测试,firefox和opera只需更改下前缀即可,IE下则有特定的滤镜来实现。-webkit-linear-gradient([<point&... 查看详情
为 div 创建线性透明渐变
】为div创建线性透明渐变【英文标题】:Creatingalineartransparentgradienttoadiv【发布时间】:2011-05-0200:18:55【问题描述】:我想为div创建一个线性透明渐变。有没有办法用jquery做到这一点?或者我应该使用像raphaeljs这样的其他库吗?... 查看详情
css3实现渐变背景
...css3的linear-gradient()函数用于创建一个表示两种或多种颜色线性渐变的图片。创建一个线性渐变,需要指定两种颜色,还可以实现不同方向(指定为一个角度)的渐变效果,如果不指定方向,默认从上到下渐变。/*从上到下,蓝色... 查看详情
第22章css渐变效果
第22章CSS3渐变效果学习要点:1.线性渐变2.径向渐变本章主要探讨HTML5中CSS3背景渐变功能,主要有两种渐变方式:线性渐变和径向(放射性)渐变。一.线性渐变CSS3提供了linear-gradient属性实现背景颜色的渐变功能。在以前,这种... 查看详情
使用div+css实现背景颜色渐变,怎么实现呢?
利用css3可实现背景颜色渐变:一、线性渐变: 1、线性渐变在Mozilla下的应用 语法: -moz-linear-gradient([<point>||<angle>,]?<stop>,<stop>[,<stop>]*) 2、线性渐变在Webkit下的应用 语法:&nb... 查看详情
div背景颜色怎样渐变css实现div层背景颜色渐变代码
...示平稳的过渡。CSS3定义了两种类型的渐变(gradients):线性渐变(LinearGradients)-向下/向上/向左/向右/对角方向与径向渐变(RadialGradients)-由它们的中心定义线性渐变: 3.1、从上到下的线性渐变:#grad background:-webkit-linea... 查看详情
css高级篇——渐变(gradient)(代码片段)
配合background和background-image可以实现线性(linear)和辐射(radial)渐变。线性渐变linear-gradient可以实现线性渐变。background:linear-gradient(yellow,red);上例代码表示颜色从“yellow”渐变到“red”。还可以指定渐变方向ÿ... 查看详情
css高级篇——渐变(gradient)(代码片段)
配合background和background-image可以实现线性(linear)和辐射(radial)渐变。线性渐变linear-gradient可以实现线性渐变。background:linear-gradient(yellow,red);上例代码表示颜色从“yellow”渐变到“red”。还可以指定渐变方向ÿ... 查看详情
如何使用 Qt QPainter 绘制线性渐变弧?
】如何使用QtQPainter绘制线性渐变弧?【英文标题】:HowtodrawalineargradientarcwithQtQPainter?【发布时间】:2014-04-3018:03:44【问题描述】:我正在尝试开发一个自定义的QProgressBar,如下图所示:我创建了一个扩展QProgressBar的类并实现了pa... 查看详情
第七十九,css3背景渐变效果
CSS3背景渐变效果 学习要点:1.线性渐变2.径向渐变本章主要探讨HTML5中CSS3背景渐变功能,主要有两种渐变方式:线性渐变和径向(放射性)渐变。 一.线性渐变linear-gradient背景颜色的渐变功能CSS3提供了linear-gradient属性实... 查看详情
css3中的渐变效果
...性,通过渐变我们可以实现许多绚丽的效果。渐变可分为线性渐变和径向渐变。(1)线性渐变:沿着某条直线朝一个方向产生渐变效果语法:linear-gradient([<point>||angle]?<stop>,<stop>[,<stop>]*) 参数说明: ... 查看详情
css高级篇——渐变(gradient)(代码片段)
配合background和background-image可以实现线性(linear)和辐射(radial)渐变。线性渐变linear-gradient可以实现线性渐变。background:linear-gradient(yellow,red);上例代码表示颜色从“yellow”渐变到“red”。还可以指定渐变方向ÿ... 查看详情