在CSS3中常用的几种颜色渐变模式
作者&投稿：蔽蓓 （若有异议请与网页底部的电邮联系）
现在html5 css3已经越来越流行，用CSS3实现p渐变已经不是什么难事了，这篇文章给大家整理了现在常用的三种颜色渐变模式，包括线性渐变、径向渐变和重复的线性渐变，文中通过示例代码介绍的很详细，有需要的朋友们可以参考借鉴，下面来一起看看吧。
一、线性渐变：linear-gradient
语法：
<linear-gradient> = linear-gradient([ [ <angle> | to <side-or-corner] ,]? <color-start>[, <color-end>]+)
<side-or-corner> = [left | right] || [top | bottom]
<color-start|end> = <color>[ <length>|<percentage>]?下述值用来表示渐变的方向，可以使用角度或者关键字来设置：
<angle>：用角度值指定渐变的方向（或角度）。
to left：设置渐变为从右到左。相当于: 270deg
to right：设置渐变从左到右。相当于: 90deg
to top：设置渐变从下到上。相当于: 0deg
to bottom：设置渐变从上到下。相当于: 180deg。这是默认值，等同于留空不写。
<color-start|end> 用于指定渐变的起止颜色：
<color>：指定颜色。
<length>：用长度值指定起止色位置。不允许负值
<percentage>：用百分比指定起止色位置。
示例：
p {
width: 200px;
height: 100px;
margin: 10px 5px;
border: 1px solid #ddd000;
}
#LinearStartToEnd {
float:left;
background: linear-gradient(#ff0000, #00ff00);
}
#LinearPercentage {
float:left;
background: linear-gradient(#0000ff, #ff0000 52%, #00ff00);
}
#LinearAnglePercentage {
float:left;
background: linear-gradient(90deg, #ff0000 20%, #00ff00 50%, #000000 80%);
}
#LinearAngle {
float:left;
background: linear-gradient(30deg, #ffff00 30%, #ff0000, #00ff00);
}
#LinearTopRight {
float:left;
background: linear-gradient(to right top, #00ff00, #ff0000 50%, #0000ff);
}二、径向渐变：radial-gradient
语法：
<position> = [ <length>① | <percentage>① | left | center① | right ]? [ <length>② | <percentage>② | top | center② | bottom ]?
<shape> = circle | ellipse
<size> = <extent-keyword>|[<circle-size>||<ellipse-size>]
<extent-keyword> = closest-side | closest-corner | farthest-side | farthest-corner
<circle-size> = <length>
<ellipse-size> = [ <length>| <percentage> ]{2}
<shape-size> = <length>| <percentage>
<radial-gradient> = radial-gradient([ [ <shape>|| <size> ] [ at <position> ]? , | at <position> , ]?<color-start>[[ , <color-end>]]+) <position> 确定圆心的位置。如果提供2个参数，第一个表示横坐标，第二个表示纵坐标；如果只提供一个，第二值默认为50%，即center
<length>①：用长度值指定径向渐变圆心的横坐标值。可以为负值。
<percentage>①：用百分比指定径向渐变圆心的横坐标值。可以为负值。
<length>②：用长度值指定径向渐变圆心的纵坐标值。可以为负值。
<percentage>②：用百分比指定径向渐变圆心的纵坐标值。可以为负值。
center①：设置中间为径向渐变圆心的横坐标值。
center②：设置中间为径向渐变圆心的纵坐标值。
left：设置左边为径向渐变圆心的横坐标值。
right：设置右边为径向渐变圆心的横坐标值。
top：设置顶部为径向渐变圆心的纵坐标值。
bottom：设置底部为径向渐变圆心的纵坐标值。
<shape> 确定圆的类型
circle：指定圆形的径向渐变
ellipse：指定椭圆形的径向渐变。
<extent-keyword> circle | ellipse 都接受该值作为 size。
closest-side：指定径向渐变的半径长度为从圆心到离圆心最近的边。
closest-corner：指定径向渐变的半径长度为从圆心到离圆心最近的角。
farthest-side：指定径向渐变的半径长度为从圆心到离圆心最远的边。
farthest-corner：指定径向渐变的半径长度为从圆心到离圆心最远的角。
<circle-size> circle 接受该值作为 size。
<length>：用长度值指定正圆径向渐变的半径长度。不允许负值。
<ellipse-size> ellipse 接受该值作为 size。
<length>：用长度值指定椭圆径向渐变的横向或纵向半径长度。不允许负值。
<percentage>：用百分比指定椭圆径向渐变的横向或纵向半径长度。不允许负值。
示例：
#RadialCenterCircle {
float:left;
background: radial-gradient(circle at center, #ff0000, #ffff00, #00ffff);
}
#RadialClosestSide {
float:left;
background: radial-gradient(circle closest-side, #ff0000, #00ff00, #ffff00);
}
#RadialFarthestSide {
float:left;
background: radial-gradient(farthest-side, #ff0000 20%, #ffff00 60%, #00ff00 80%);
}
#RadialRightTop {
float:left;
background: radial-gradient(at right top, #ff0000, #ffff00, #00ff00);
}
#RadialRadiusCenter {
float:left;
background: radial-gradient(farthest-side at top right, #ff0000, #ffff00, #01fefe);
}
#RadialGroup {
float:left;
background:
radial-gradient(farthest-side at top right, #ff0000, #ffff00, #009f00, transparent),
radial-gradient(60px at top left, #ff0000, #ffff00, #00ff0e);
}三、重复的线性渐变：repeating-linear-gradient
语法和参数类似线性渐变，这里不在赘述。详情请参考CSS手册。
示例：
#RepeatingLinearPercentage{
float:left;
background: repeating-linear-gradient(#ff0000, #00ff00 10%, #000000 15%);
}
#RepeatingLinearRight {
float:left;
background: repeating-linear-gradient(to right, #ff0000, #00ff00 10%, #000000 15%);
}
#RepeatingLinearAngle {
float:left;
background: repeating-linear-gradient(45deg, #ff0000, #00ff00 10%, #0000ff 15%);
}
#RepeatingLinearBottomLeft {
float:left;
background: repeating-linear-gradient(to bottom left, #00ffff, #ff0000 10%, #00ff00 15%);
}四、重复的径向渐变：repeating-radial-gradient
语法和参数类似径向渐变，这里不在赘述。详情请参考CSS手册。
示例：
#RepeatingRadialCircle {
float:left;
background: repeating-radial-gradient(circle, #ff0000 0, #00ff00 10%, #0000ff 15%);
}
#RepeatingRadialTopLeft {
float:left;
background: repeating-radial-gradient(at top left, #ff0000, #00ff00 10%, #0de0f0 15%, #ffff00 20%, #000000 25%);
}
#RepeatingRadialClosestCorner {
float:left;
background: repeating-radial-gradient(circle closest-corner at 20px 50px, #00ff00, #ff0000 10%, #00ffff 20%, #ffff00 30%, #ff00ff 40%);
}完整的例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ImageCSS3</title>
<style>
p {
width: 200px;
height: 100px;
margin: 10px 5px;
border: 1px solid #ddd000;
}
#LinearStartToEnd {
float:left;
background: linear-gradient(#ff0000, #00ff00);
}
#LinearPercentage {
float:left;
background: linear-gradient(#0000ff, #ff0000 52%, #00ff00);
}
#LinearAnglePercentage {
float:left;
background: linear-gradient(90deg, #ff0000 20%, #00ff00 50%, #000000 80%);
}
#LinearAngle {
float:left;
background: linear-gradient(30deg, #ffff00 30%, #ff0000, #00ff00);
}
#LinearTopRight {
float:left;
background: linear-gradient(to right top, #00ff00, #ff0000 50%, #0000ff);
}
#RadialCenterCircle {
float:left;
background: radial-gradient(circle at center, #ff0000, #ffff00, #00ffff);
}
#RadialClosestSide {
float:left;
background: radial-gradient(circle closest-side, #ff0000, #00ff00, #ffff00);
}
#RadialFarthestSide {
float:left;
background: radial-gradient(farthest-side, #ff0000 20%, #ffff00 60%, #00ff00 80%);
}
#RadialRightTop {
float:left;
background: radial-gradient(at right top, #ff0000, #ffff00, #00ff00);
}
#RadialRadiusCenter {
float:left;
background: radial-gradient(farthest-side at top right, #ff0000, #ffff00, #01fefe);
}
#RadialGroup {
float:left;
background:
radial-gradient(farthest-side at top right, #ff0000, #ffff00, #009f00, transparent),
radial-gradient(60px at top left, #ff0000, #ffff00, #00ff0e);
}
#RepeatingLinearPercentage{
float:left;
background: repeating-linear-gradient(#ff0000, #00ff00 10%, #000000 15%);
}
#RepeatingLinearRight {
float:left;
background: repeating-linear-gradient(to right, #ff0000, #00ff00 10%, #000000 15%);
}
#RepeatingLinearAngle {
float:left;
background: repeating-linear-gradient(45deg, #ff0000, #00ff00 10%, #0000ff 15%);
}
#RepeatingLinearBottomLeft {
float:left;
background: repeating-linear-gradient(to bottom left, #00ffff, #ff0000 10%, #00ff00 15%);
}
#RepeatingRadialCircle {
float:left;
background: repeating-radial-gradient(circle, #ff0000 0, #00ff00 10%, #0000ff 15%);
}
#RepeatingRadialTopLeft {
float:left;
background: repeating-radial-gradient(at top left, #ff0000, #00ff00 10%, #0de0f0 15%, #ffff00 20%, #000000 25%);
}
#RepeatingRadialClosestCorner {
float:left;
background: repeating-radial-gradient(circle closest-corner at 20px 50px, #00ff00, #ff0000 10%, #00ffff 20%, #ffff00 30%, #ff00ff 40%);
}
</style>
</head>
<body>
<!-- 指定线性渐变起止色 -->
<p id="LinearStartToEnd"></p>
<!-- 指定线性渐变起止色位置 -->
<p id="LinearPercentage"></p>
<!-- 指定线性渐变颜色渐变方向和起止色位置 -->
<p id="LinearAnglePercentage"></p>
<!-- 指定线性渐变颜色渐变方向 -->
<p id="LinearAngle"></p>
<!-- 设置渐变从右上到左下 -->
<p id="LinearTopRight"></p>
<!-- 浮动p换行，此处指定p宽高和边界，是为了覆盖前面定义的p统一CSS样式，
可以尝试去掉指定的p宽高和边界，看看效果 -->
<p style="width:0; height:0; border:none; clear:both"></p>
<!-- 以中心点为圆心的圆形径向渐变 -->
<p id="RadialCenterCircle"></p>
<!-- 径向渐变半径长度：圆心到离圆心最近边的长度 -->
<p id="RadialClosestSide"></p>
<!-- 径向渐变半径长度：圆心到离圆心最远边的长度 -->
<p id="RadialFarthestSide"></p>
<!-- 左边为径向渐变圆心的横坐标值,顶边为径向渐变圆心的纵坐标值 -->
<p id="RadialRightTop"></p>
<!-- 同时指定径向渐变的圆心和半径 -->
<p id="RadialRadiusCenter"></p>
<!-- 径向渐变组合 -->
<p id="RadialGroup"></p>
<p style="width:0; height:0; border:none; clear:both"></p>
<!-- 指定颜色起止色位置的重复线性渐变 -->
<p id="RepeatingLinearPercentage"></p>
<!-- 从左到右渐变的重复线性渐变 -->
<p id="RepeatingLinearRight&
如何使用HTML5+CSS3属性word-break设置文字换行
在开发系统的过程中，会发现有时界面上一行显示的内容过多，超出了范围占用其他地方，导致页面错乱。在CSS3新加的属性中，有几个属性可以用来控制行内文字换行或者显示省略号。其中，word-break属性可以设置文本内换行，对应常用的属性值有：（1）break-all：可以在文本内换行，任意断开 （2）break-word：...
css3新增的属性有哪些
css3新属性：一、RGBA和透明度 RGBA是RGB色彩模型的一个扩展。在本质上看也是为设置的元素增加了一个 alpha 通道，即除了红绿蓝三种颜色外还增加一个代表透明度的通道，其中 RGB 值分别表示红色、绿色、蓝色，而 alpha 取值则为 0 到 1 （小数位一位）。二、background属性 background-image：设置...
使用css主要有哪几种布局方式(常用的css布局)
css网页布局方式css布局的几种方式1、一列布局：一般都是固定的宽高，设置margin:0auto来水平居中，用于界面显著标题的展示等。2、两列布局：说起两列布局，最常见的就是使用float来实现。float浮动布局的缺点是浮动后会造成文本环绕等效果，以及需要及时清除浮动。3、三列布局：两侧定宽中间自适应,首先...
CSS3布局方式有哪些?
改变屏幕分辨率可以切换不同的静态布局（页面元素位置可能发生改变），但在每个静态布局中，页面元素不随窗口大小的调整发生变化。自适应布局页面里面元素的位置会变化，很好的解决了流式布局中的大屏空间利用率不高弊端。注：屏幕分辨率变化时，页面里面元素的位置会变化而大小不会变化。3.流失布局（百分比...
html常用选择器?
3.ID选择器用族皮孙#加页面上某个标兆链签的ID#navhtml5中的几种常见选择器 每天一更新,这些初级html知识你掌握了吗? css选择器的优先级:作用的元素一样,样式一样,就会有优先级问题。 *通配选择器0 *标签名选择器1 *类选择器10 *id选择器100 *后代选择器选择器1选择器2...(会有相加的过程) *群组选...
常用重要CSS样式的属性
将所有字体属性合写为一行,其中font-family是复合属性中必不可少的属性。 可以不设置其中的某个值,如果省略值地话,就使用属性的默认值。 ②文本属性: (2)CSS3文本阴影属性: 属性:text-shadow 作用:产生阴影和模糊主体 语法: 作用:定义列表的编号样式 属性:list-style-type 作用:用于设置列表项的图像属性 语法...
HTML中常见伪类和伪元素的区别
提到伪类，在人们的印象中最常用的不过是:hover、:active、:link、:visited，还有css3里的常用伪类选择器:last-child、:first-child、nth-child(n)等等!w3c上对伪类和为元素的定义分别为:伪类：伪类用于向某些选择器添加特殊的效果。伪元素：伪元素用于将特殊的效果添加到某些选择器 css3为了明确伪类和...
一文彻底搞懂flex布局-css3新布局-替代传统布局思想
CSS3新增布局之一：flex布局flex背景flex布局背后的主要思想是让容器能够改变其项目的宽度\/高度（和顺序）以最好地填充可用空间（主要是为了适应各种显示设备和屏幕尺寸）。弹性容器扩展项目以填充可用的可用空间或缩小它们以防止溢出。最重要的是，与常规布局（基于垂直的块和基于水平的内联）相反，弹性盒布局...
css结构伪类选择器?
3、css3选择器如下：通配符选择器（*）通配符选择器是用来选择所有元素，也可以选择某个元素下的所有元素。元素选择器（E）元素选择器，是css选择器中最常见而且最基本的选择器。4、css选择器有，标签名选择器，类选择器，ID选择器，后代选择器，群组选择器。新建文件创建标记选择器。效果。创建类别选择...
CSS3的transform属性的用法?
定义和用法 transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。语法 transform: none|transform-functions;旋转 div 元素：div{transform:rotate(7deg);-ms-transform:rotate(7deg); \/* IE 9 *\/-moz-transform:rotate(7deg); \/* Firefox *\/-webkit-...
纵奔心可： 在CSS3中,定义了两种类型 (1)线性渐变:向下/向上/向左/向右/对角方向,使用linear-gradient() (2)径向渐变:由它们的中心定义,使用radial-gradient()
赤峰市13278756018： 怎样用css实现网页背景颜色渐变 - ？
纵奔心可： CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡.CSS3 定义了两种类型的渐变(gradients):线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向与径向渐变(Radial Gradients)- 由它们的中心定义线...
赤峰市13278756018： 怎么用css设置DIV背景色渐变显示 - ？
纵奔心可： 在Mozilla 下 background: -moz-linear-gradient( top,#ccc,#000); 参数说明 1,起点位置top 是从上到下,left是从左到右,left top是左上到右下 2,开始颜色, 3,结束颜色 在Webkit下 -webkit-linear-gradient(top,#ccc,#000); 参数与mozilla一致 在 Opera 下 background: -o-linear-gradient(top,#ccc, #000); 数与mozilla一致 更多的参数应用可以去度娘查询,有很详细参数使用示例.
赤峰市13278756018： CSS3中如何实现渐变效果 - ？
纵奔心可： 要得上面的线性渐变32313133353236313431303231363533e58685e5aeb931333332636333效果,我们这样去定义CSS3样式: background-image: -moz-linear-gradient(top, #8fa1ff, #3757fa); /* Firefox */ background-image: -webkit-gradient...
赤峰市13278756018： css背景颜色怎么实现渐变效果 - ？
纵奔心可： 线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向 实例 从上到下的线性渐变:#grad { background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */ background: -...
赤峰市13278756018： 如何通过CSS3实现背景图片色彩的梯度渐变 - ？
纵奔心可： background: linear-gradient(red,green,blue);如加入浏览器适应的话就这么写 background: -webkit-linear-gradient(red,green,blue); background: -o-linear-gradient(red,green,blue); background: -moz-linear-gradient(red,green,blue); background: linear-gradient(red,green,blue);
赤峰市13278756018： html5 alpha渐变 - ？
纵奔心可： 使用rgba颜色模式
赤峰市13278756018： 什么是CSS3?? - ？
纵奔心可： 总的来说CSS3主要拥有以下几个新的亮点:高级选择器,圆角,多背景,@font-face动画与渐变,渐变色,Box 阴影,RGBa - 加入透明色,文字阴影,图形化边界 . 其中比较重要的是,新的选择器,以往大量通过JS进行的工作都可以在...
赤峰市13278756018： css如何实现颜色的过渡效果 - ？
纵奔心可： 需要准备的材料分别有:电脑、浏览器、html编辑器.1、首先,打开html编辑器,新建html文件,例如:index.html.2、在index.html中的<style>标签中,输入css代码:button {width: 100px; height: 50px;border: 0;color: white;background: -webkit-radial-gradient(#72787f, #545c64);}3、浏览器运行index.html页面,此时用CSS实现了按钮中间白、四周黑,上方白、下方灰的效果.
赤峰市13278756018： CSS3里面的线性渐变:linear - gradient参数是什么样子的? - ？
纵奔心可： 有3个参数:1. 参数是表示渐变的方向a) to+方向关键字,比如:to right,从左向右渐变;to left bottom 从右上角往左下角渐变.b) 具体的角度值,比如设置为90deg,就相当于to right,方向向右2. 起点颜色3. 终点颜色可以多看看这类的视频,比如说http://video.sina.com.cn/playlist/5772542-1866650682-1.html#101776332
