田园牧歌

您可能感兴趣的相关文章

• 2012年度最佳前端开发工具和框架
• Web前端开发人员和设计师必读文章
• 10套精美的免费网站后台管理系统模板
• 2012年度最佳 jQuery 插件隆重揭晓
• 60款很酷的 jQuery 幻灯片演示和下载

　　《CSS3 入门教程系列》前一篇文章详细介绍了 border-radius 的用法，今天这篇文章我们在一起来看看 CSS3 中实现圆角效果 text-shadow 属性的具体用法。在以前，阴影效果一般都是做成图片，现在有了 CSS3 可以直接使用 text-shadow 属性来实现阴影。这个属性可以有两个作用，产生阴影和模糊主体。这样在不需要图片的情况下就能给文字增加质感。

 

　　text-shadow 曾经在 CSS2 中就出现过，但在 CSS 2.1版本中又被抛弃了，现在 CSS3 版本又重新捡回来了。这说明 text-shadow 这个属性非常值得我们做前端的人员重视，而且  CSS3 这么多属性中，我个人觉得 text-shadow 运用得是最多的一个属性，作为我们前端人员我觉得有必要学习并掌握这个 text-shadow 属性。

基本语法：

取值范围:

　　<length>：长度值，可以是负值。用来指定阴影的延伸距离。其中X Offset是水平偏移值，Y Offset是垂直偏移值

　　<color>：指定阴影颜色，也可以是rgba透明色

　　<shadow>：阴影的模糊值，不可以是负值，用来指定模糊效果的作用距离。

　　如下图所示：

　　

简单说明：

　　可以给一个对象应用一组或多组阴影效果，方式如前面的语法显示一样，用逗号隔开。text-shadow: X-Offset Y-Offset Blur Color中X-Offset表示阴影的水平偏移距离，其值为正值时阴影向右偏移，如果其值为负值时，阴影向左偏移；Y-Offset是指阴影的垂直偏移距离，如果其值是正值时，阴影向下偏移反之其值是负值时阴影向顶部偏移；Blur是指阴影的模糊程度，其值不能是负值，如果值越大，阴影越模糊，反之阴影越清晰，如果不需要阴影模糊可以将Blur值设置为0；Color是指阴影的颜色，其可以使用rgba色。

　　浏览器的兼容性：

　　

　　我们来看个实例。首先给所有的DEMO一个公用的样式和类名：

　　接下来我们在每个Demo上加上自己特定的样式，分别如下所示：

　　

　　效果是不错，可是让我们头痛的是IE是不支持text-shadow效果，但为了在兼容这一问题，我们只好使用滤镜filter:shadow来处理（本人不提倡使用滤镜）。filter:shadow滤镜作用与dropshadow类似，也能使用对象产生阴影效果，不同的是shadow可产生渐近效果，使用阴影更平滑实现。

　　滤镜语法：

　　其中E是元素选择器，Color用于设定对象的阴影色；Direction用于设定投影的主向，取值为0即零度（表示向上方向），45为右上，90为右，135为右下，180为下方，225为左下方，270为左方，315为左上方；Strength就是强度，类似于text-shadow中的blur值。

　　我们先不管IE下的效果了，我个人认为text-shadow运用好了，也能像photoshop一样制作出非常好的效果，下面我这里罗列出一些比较好看的实例以供大家参考

　　注：下面所有的Demo需要加上这个公用的样式：

　　效果一：Glow and Extra Glow effect(也就是NEON effect)

　　

　　辉光效果，我们设置比较大的模糊半径来增加其辉光效果，你可以改变不同的模糊半径值来达到不同的效果，当然你也可以同时增加几个不同的半径值，创造多种不同的阴影效果。就如下面的NEON效果。

　　

　　效果二：Apple Style Effect

　　

　　效果三：Photoshop Emboss Effect

　　

　　效果二和效果三，我想用photoshop的朋友一定很熟悉，是不是很类似我们 photoshop中的投影和浮雕效果的呀。应用这两个效果大家一定要注意，其模糊值一定要设置为0，使文本不具有任何模糊效果，主要用来增加其质感，你也可以像photoshop中制作一样，改变不同的投光角度，从而制作出不同的效果，这里我就不举例子了，感兴趣的朋友可以自己尝试一下。

　　效果四：Blurytext Effect

　　

　　用text-shadow制作模糊的效果主要要注意一点就是，把文本的前景色设置为透明transparent,如果模糊值越大，其效果越糊糊；其二，我们不设置任何方向的偏移值。如果结合前面的photoshop emboss效果，可以让你等到不同的效果。提醒一下opera浏览器不支持这个效果。

　　我们结合前面的Photoshop Emboss效果，我们可以制作出一个带有模糊的浮雕效果：

　　

　　效果五：Inset text effect

　　

　　这种效果需要注意以：文字的前景色要比背景色暗，阴影颜色稍比背景色亮一点点，这一步很重要，如果阴影色太亮看起来会怪，如果太暗将没有效果显示。具体实现可能看看stylizedweb的制作。Inset效果是文本的影子效果，也是常见的一种效果，阴影是同一个小偏移量给人一种微妙的突出效果。

　　效果六：Stroke text effect

　　

　　描边效果跟我们在Photoshop相比，我承认效果差很多，出现断点，但有时还是可以试用达到一种特殊的描边效果，其主要运用两个阴影，第一个向左上投影，而第二向右下投影，还需注意，制作描边的阴影效果我们不使用模糊值。

　　效果七：3D text effect

　　

　　我们换过投影方向可以制作出另外一种3D文字效果：

　　

　　3D文字效果运用原理就是像Photoshop一样，我们在文字的下方或上方复制了多个图层，并把每一个层向左上或右下方向移动一个1px距离，从而制作出3D效果。同时我们层数越多，其越厚重。换成用text-shadow制作就是使用多个阴影，并把阴影色设置相同，给其使用rgba色效果更佳，如上面的实例。

　　效果八：Vintge/Retro text effect：

　　

　　Vintage retro这种风格的文字效果是由两个文本阴影合成的，这里需要注意的是：第一个阴影色和背景色相同；文本前景色和第二个阴影色相同

　　效果九：Anaglyphic text effect

　　

　　anaglyphic文字效果起到一种补色的效果，从而制作出一种三维效果图。其效果是用css重新使用的文字阴影和文本前景的rgba色组合而成。在文本的前景色和阴影上同时使用rgba色，使底层的文字是通过影子可见。

　　上面我主要列出了九个不同效果的实例，当然大家可以改变各种方式制作出一些特殊的效果，也再一次证实CSS3中的text-shadow实力是不浅的，希望大家能喜欢上这个属性，并能更好的使用这个属性。虽然现在IE不支持，但大家不要惧怕使用CSS3，因为我们做前端的迟早都会需要掌握这些新技术的。

您可能感兴趣的相关文章

• 20个非常绚丽的 CSS3 特性应用演示
• CSS3 Media Queries 实现响应式设计
• CSS3 入门教程系列：CSS3 圆角详解
• CSS3 入门教程系列：CSS3 RGBA详解
• 24款非常实用的 CSS3 工具终极收藏

 

本文链接：CSS3入门教程：CSS3阴影详解（整理自：W3CPLUS）

编译来源：梦想天空 ◆ 关注Web前端开发技术 ◆ 分享网页设计资源

/*global module:false*/
module.exports = function(grunt) {

// Project configuration.
grunt.initConfig({
pkg: ‘<json:GruntDemo.jquery.json>’,
meta: {
banner: ‘/*! <%= pkg.title || pkg.name %> – v<%= pkg.version %> – ‘ +
‘<%= grunt.template.today(“yyyy-mm-dd”) %>\n’ +
‘<%= pkg.homepage ? “* ” + pkg.homepage + “\n” : “” %>’ +
‘* Copyright (c) <%= grunt.template.today(“yyyy”) %> <%= pkg.author.name %>;’ +
‘ Licensed <%= _.pluck(pkg.licenses, “type”).join(“, “) %> */’
},
concat: {
dist: {
src: ['<banner:meta.banner>', '<file_strip_banner:src/<%= pkg.name %>.js>'],
dest: ‘dist/<%= pkg.name %>.js’
}
},
min: {
dist: {
src: ['<banner:meta.banner>', '<config:concat.dist.dest>'],
dest: ‘dist/<%= pkg.name %>.min.js’
}
},
qunit: {
files: ['test/**/*.html']
},
lint: {
files: ['grunt.js', 'src/**/*.js', 'test/**/*.js']
},
watch: {
files: ‘<config:lint.files>’,
tasks: ‘lint qunit’
},
jshint: {
options: {
curly: true,
eqeqeq: true,
immed: true,
latedef: true,
newcap: true,
noarg: true,
sub: true,
undef: true,
boss: true,
eqnull: true,
browser: true
},
globals: {
jQuery: true
}
},
uglify: {}
});

// Default task.
grunt.registerTask(‘default’, ‘lint qunit concat min’);

};

您可能感兴趣的相关文章

• 让人爱不释手的13套精美网页图标素材
• 分享25套非常漂亮的免费网页图标素材
• 网页素材大宝库：50套精美的图标素材
• 分享20个非常不错的 UI 图标素材资源
• 分享18套精美的苹果风格免费图标素材

　　《CSS3 入门教程系列》前一篇文章详细介绍了 CSS3 RGBA 特性的用法，今天这篇文章我们在一起来看看 CSS3 中用于实现圆角效果的 border-radius 属性的具体用法。

　　以前制作圆角效果，我们都需要使用多张圆角图片做为背景分别应用到每个角上，我应用最多的就是在需要圆角的元素标签中加四个空标签，然后在每个空标签中应用一个圆角的背景位置，然后在对这几个应用了圆角的标签进行定位到相应的位置，非常繁琐。

 

　　现在有了 CSS3 的 border-radius 特性之后，实现边框圆角效果就非常简单了，而且其还有多个优点：一是减少网站维护工作量；二是提高了网站的性能，少了对图片的 HTTP 的请求，网页载入速度将变快；三是增加视觉美观性。

　　既然 border-radius 有这么多好处，我们就从他的语法，属性和属性值等方面来看其如何应用，又是如何制作圆角，还有就是除了制作圆角他还能制作什么？有这么多，那我们就开始吧：

基本语法：

　　border-radius ： none | <length>{1,4} [/ <length>{1,4} ]?

取值范围：

　　<length>： 由浮点数字和单位标识符组成的长度值。不可为负值。

简单说明：

　　border-radius 是一种缩写方法。如果“/”前后的值都存在，那么“/”前面的值设置其水平半径，“/”后面值设置其垂直半径。如果没有“/”，则水平和垂直半径相等。另外其四个值是按照top-left、top-right、bottom-right、bottom-left的顺序来设置的其主要会有下面几种情形出现：

　　1、只有一个值，那么 top-left、top-right、bottom-right、bottom-left 四个值相等。

　　2、有两个值，那么 top-left 等于 bottom-right，并且取第一个值；top-right 等于 bottom-left，并且取第二个值

　　3、有三个值，其中第一个值是设置top-left;而第二个值是 top-right 和 bottom-left 并且他们会相等,第三个值是设置 bottom-right。

　　4、有四个值，其中第一个值是设置 top-left 而第二个值是 top-right 第三个值 bottom-right 第四个值是设置 bottom-left。

　　前面，我们主要看了 border-radius 的缩写格式，其实 border-radius 和 border 属性一样，还可以把各个角单独拆分出来，也就是以下四种写法，这里我规纳一点，他们都是先Y轴在X轴，具体看下面：

　　这里说一下，各角拆分出来取值方式：<length> <length> 中第一个值是圆角水平半径，第二个值是垂直半径,如果第二个值省略，那么其等于第一个值，这时这个角就是一个四分之一的圆角，如果任意一个值为0，那么这个角就不是圆角。

　　border-radius 只有在以下版本的浏览器：Firefox4.0+、Safari5.0+、Google Chrome 10.0+、Opera 10.5+、IE9+ 支持 border-radius 标准语法格式，对于老版的浏览器，border-radius 需要根据不同的浏览器内核添加不同的前缀，比说 Mozilla 内核需要加上“-moz”，而 Webkit 内核需要加上“-webkit”等，那么我为了能兼容各大内核的老版浏览器，我们看看 border-radius 在不同内核浏览器下的书写格式：

　　1、Mozilla(Firefox, Flock等浏览器)

　　等价于：

　　2、WebKit (Safari, Chrome等浏览器)

等价于：

　　3、Opera浏览器：

等价于：

　　4、Trident (IE)

　　IE9 以下版本不支持 border-radius，而且 IE9 没有私有格式，都是用 border-radius，其写法和 Opera 是一样的，这里就不在重复。

　　为了不管是新版还是老版的各种内核浏览器都能支持 border-radius 属性，那么我们在具体应用中时需要把我们的 border-radius 格式改成：

　　其拆分开来的格式相应需要加上 -moz 和 -webkit，上面的代码其实就等价于下面的代码：

　　另外需要特别注意的是，border-radius 一定要放置在 -moz-border-radius 和 -webkit-border-radius 后面，（特别声明：本文中所讲实例都只写了标准语法格式，如果你的版本不是上面所提到的几个版本，如要正常显示效果，请更新浏览器版本，或者在 border-radius 前面加上相应的内核前缀，在实际应用中最好加上各种版本内核浏览器前缀。）

　　我们初步来看一个实例，HTML代码：

　　为了更好的看出效果，我们给这个demo添加一点样式：

　　注：如无特殊声明，本文实例所有基本代码格式如上所示，只在该元素上添加border-radius属性设置。

　　这种写法我们前面有提到过，“/”前是指圆角的水平半径，而“/”后是指圆角的垂直半径，他们两都遵循TRBL（上右下左）的顺序原则。为了能让大家更清楚理解，我们把上面代码换成如下：

　　不仿看看他们的效果：

　　

　　三、支持的浏览器：

　　

　　上面我们介绍了border-radius的基本用法，以及在各大浏览器下的格式等，下面我们通过实例来介绍其具体的用法：

　　一：border-radius只有一个取值时，四个角具有相同的圆角设置，其效果是一致的：

其等价于：

　　效果：

　　

　　二：border-radius设置两个值，此时top-left等于bottom-right并且他们取第一个值；top-right等于bottom-left并且他们取第二个值，也就是说元素 左上角和右下角相同，右上角和左下角相同

　　等价于：

　　效果：

　　

　　三：border-radius设置三个值，此时top-left取第一个值，top-right等于bottom-left并且他们取第二个值，bottom-right取第三个值：

　　等价于：

　　效果：

　　

　　四：border-radius设置四个值，此时top-left取第一个值，top-right取第二个值，bottom-right取第三个值.bottom-left取第四个值：

　　等价于：

　　效果：

　　

　　从上面四个实例中我们可以看出border-radius和border取值非常相似，我们border遵循TRBL原则（从上边右边下边左边分别对应1、2，3，4四个值），只不过border-radius换成了左上角(top-left)对就值1，右上角（top-right）对应值2，右下角(bottom-right)对应值3，左下角(bottom-left)对应值4.

　　上面四个实例都是水平和垂直半径相等情况下border-radius的应用，下面我们来看几个水平和垂直半径值不一样的实例：

　　一、border-radius: 水平 / 垂直：只设置一个水平和一个垂直半径时，那么水平半径分别指定了元素个四个角的水平半径值，同样垂直半径指定了元素的垂直半径值，此时四个角具有相同的效果，因为他们具有相同的值：

　　等价于： 

　　效果：

　　

　　此时我们每个角不在是四分之一圆了，前面我们也说过，只有水平和垂直半径值相同时，他们才具有四分之一圆特性，这样一来，我们可以改变不同的半径值，制作一些特殊的图形效果，感兴趣的朋友可以自己在本地尝试一下各种不同的设置方式。

　　二、border-radius: 水平1 水平2 / 垂直1  垂直2：设置了两个水平值和两个垂直值，此时我们top-left和bottom-right具有相同的水平和垂直半径，也就是其中的水平1和垂直1；而top-right和bottom-left也具有相同的水平和垂直半径值，也就是水平2和垂直2，我们他拆分出来就是：

　　具体我们来看下面的实例：

　　等价于：

　　效果：

　　

　　上面两种都是相互对应的取值，我们来看一个实例，水平有三个取值，而 垂直只有两个取值：

　　等价于：

　　效果：

　　

　　我们从上面等价代码中可以知道，不管他们怎么取值，“/”前后各自按TRBL顺序取值。

　　上面几种都是我们常见的一些应用，那下面我们来看几种特殊点的应用：

　　一、对于border-radius还有一个内半径和外半径的区别，它主要是元素 边框值较大时，效果就很明显，当我们border-radius半径值小于或等于border的厚度时，我们边框内部就不具有圆角效果,例如下面的实例：

　　效果：

　　

　　我们接着上面这个例子，把 border-radius半径值改成比边框值大一点：

　　效果：

　　

　　为何当border-radius的半径小于元素边框的厚度时，内部没有圆角效果？我在这里说一下，因为我们的border-radius的内径值是等于外径值减去边框厚度值，当他们的值为负时，内径默认为0,最前面讲border-radius取值时就说过其值不能为负值。同时也说明border-radius的内外曲线的圆心并不一定是一致的。只有当边框厚度为0时，我们内外曲线的圆心才会在同一位置。

　　二、如果角的两个相邻边有不同的宽度，那么这个角将会从宽的边平滑过度到窄的边。其中一条边甚至可以是0。相邻转角是由大向小转。

　　效果：

　　

　　三、相邻两条边颜色和线条样式不同时，那么两条相邻边颜色和样式转变的中心点是在一个和两边宽度成正比的角上。比如，两条边宽度相同，这个点就是一个45°的角上，如果一条边是另外一条边的两倍，那么这个点就在一个30°的角上。界定这个转变的线就是连接在内外曲线上的两个点的直线。我们来看一个四边颜色不一样，宽度不一样的实例：

　　效果：

　　

　　上面这几种是比较特殊点的用法，如果大家还想通过border-radius制作更多不同形状，或者更多的应用，可以点击这里。

　　border-radius能应用在各种元素中，但在img和table应用时会有点差别的，首先先来看图片上应用border-radius时的情况。在img上应用border-radius到目前只有Firefox4.0+浏览器才正常，而在其他浏览器都不能对图片进行剪切，我们先来看一个实例：

　　我们来看其在各浏览器下的效果：

　　

　　左图是在Safari5.0、Google Chrome 10.0、Opera11.1下的效果，我们可以看得出，图片根本就没有圆角效果，右图是在Firefox4.0下的效果，低于这个版本的和左图一样效果，如果需要达成一致效果，大家就必须放弃border-radius而采用CSS2制作圆角的老办法。另外table的样式属性border-collapse是collapse时,border-radius不能正常显示,只有border-collapse: separate;时才能正常显示。

　　效果：

　　

　　关于表格的demo可以查看这里。

　　那么到此，我们border-radius的一些用法就介绍完了。希望能给大家带来一点帮助，感兴趣的朋友可以观注本站后面的内容，我们下节将介绍CSS3中的文本阴影（text-shadow）的用法。更希望感兴趣的朋友一起探讨和学习 CSS3 更多的技术知识。

您可能感兴趣的相关文章

• CSS3 入门教程系列：CSS3 RGBA
• CSS3 Media Queries 实现响应式设计
• 35个让人惊讶的 CSS3 动画效果演示
• 推荐12个漂亮的 CSS3 按钮实现方案
• 24款非常实用的 CSS3 工具终极收藏

 

本文链接：CSS3入门教程：CSS3圆角详解（整理自：W3CPLUS）

编译来源：梦想天空 ◆ 关注Web前端开发技术 ◆ 分享网页设计资源

　　CSS 中的颜色有三种定义方式：使用颜色方法（RGB、RGBA、HSL、HSLA），十六进制颜色值和预定义的颜色名称。今天这篇文章我们一起来探讨一下 CSS3 中的 RGBA 属性。RGB 对于大家来说一点不陌生，他就是 Red（红色） Green（绿色）和 Blue（蓝色），那么现在我们所说的 RGBA 又是什么呢？

 

　　RGBA 是代表Red（红色） Green（绿色） Blue（蓝色）和 Alpha（不透明度）的色彩空间。虽然它有的时候被描述为一个颜色空间，但是它其实仅仅是 RGB 模型附加了额外的信息从而形成了我们今天需要讨论的 RGBA。如果需要更详细的解说，大家就跟着我一起往下看吧。

基本语法:

　　R：红色值。正整数 | 百分数

　　G：绿色值。正整数 | 百分数

　　B：蓝色值。正整数| 百分数

　　A：透明度。取值0~1之间

取值区间：

　　<length> ：Hue(色调)。 0(或360)表示红色，120表示绿色，240表示蓝色，当然可取其他数值来确定其它颜色；

　　<percentage> ：Saturation(饱和度)。 取值为0%到100%之间的值；

　　<percentage> ：Lightness(亮度)。 取值为0%到100%之间的值；

　　<opacity> ：alpha(透明度)。 取值在0到1之间；

简单说明：

　　RGB 色彩模式（也翻译为“红绿蓝”，比较少用）是工业界的一种颜色标准，是通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的，RGB即是代表红、绿、蓝三个通道的颜色，这个标准几乎包括了人类视力所能感知的所有颜色，是目前运用最广的颜色系统之一。

　　RGBA 在 RGB 的基础上多了控制 Alpha 透明度的参数。以上R、G、B三个参数，正整数值的取值范围为：0 – 255。百分数值的取值范围为：0.0% – 100.0%。超出范围的数值将被截至其最接近的取值极限。并非所有浏览器都支持使用百分数值。A参数，取值在0~1之间，不可为负值。

　　浏览器的兼容性：

　　

　　如果庞统说 RGBA 是制作透明色（透明背景色、透明边框色、透明前景色等），大家不由会想起 opacity 这个东西。他在我们 CSS2 中制作背景色通常用到，可是要用他来制作边框色或都说前景色的话，那他就只能在边上站着了，有心无力呀。

　　现在我们先来看一个 RGBA 和 Opacity 的对比实例，HTML 代码：

　　我们分别给这两上 ul 中的 li 应用相关样式， 在 li.opacity 中我用使用 CSS2 中的 Opacity 而在 li.rgba 中我们使用 CSS3 的 RGBA新属性。

　　Opacity样式

　　RGBA样：

　　我们来看看其效果：

　　

　　效果中我们可以看出，他们相同之处就是背景色完全是一样的，但区别就是一直让大家觉得头痛的问题，那就是 Opacity 后代元素会随着一起具有透明性，所以我们 Opacity 中的字随着透明值下降越来越看不清楚，而 RGBA 不具有这样的问题，但是其支持的浏览器中有一个占在大市场份额的 IE 不支持，这也就是让我们需要去做兼容，（听到兼容二字大家是不是特烦，我也是的）希望 IE 早点能实现。

　　在 CSS2 中 Opacity 能实现透明，而且大多主流浏览器都支持，虽然 IE 下有点麻烦：

　　那为什么不使用 Opacity 而要使用 RGBA 呢？

　　从我们上面的实例中我们也知道，RGBA 比元素设置 CSS 的透明度更好，因为单独的颜色可以在不影响整个元素的透明度，他不会影响到元素其他的属性，比如说边框，字体同时也不会影响到其他元素的相关透明度。

　　在 RGBA 还没有出世前，我们都是使用 Opacity 来做透明，但这里存在一个问题，就是我们在父元素中使用了 Opacity，那么其垢代元素都会受其影响，我想这个问题大家都有碰到过，为了解决这样的问题我们需要增加一个空的 div 来专门放置使用透明的背景，然后通过使用绝对定位来实现我们需要的结果。为了更好的理解我们在这里来看一个使用 Opacity 的实例。首先来看 HTML：

　　先给他们附上相应的样式：

　　效果：

　　

　　从效果中我们明显的看出，这里和我们前面那个例子一样，名叫 bg 的 div 中设置了Opacity，造成其后代元素段落P的前景色也随着变了。如果需要解决这样的问题，在不使用别的新技术下，也就是说坚持使用 Opacity。那么我们就需要添加一个空的层，在这个地方应用透明背景层首先来看看改变一下 HTML 结构吧

　　现在我们需要提把 bg-content 和 bg 层重合起来，换句话说就是把透明背景层单独放在另外一个 div，然后把内容层和背景层重叠。换而言之，我们需要在 bg 这个 div 上设置透明色，而在 bg-content 这个 div 上放置内容，并且都使用定位，保证 bg 这个 div 在 bg-content 这个 div 下面。具体看看其 CSS 的变化：

　　首先我们在 HTML 中把 bg 这个 div分 离出来了，让他和 bg-content 这个 div 变成兄弟关系，然后通过 CSS 把他们都定位在同一位置，只是 bg 放在了 bg-content 的下面（z-index）控制，另外在 bg 的 div 上应用了透明。看看这样一来我们有什么变化，效果如下：

　　

　　跟没有处理之前相比是不是完美多了。可是这样弄就是有一点麻烦，现在 CSS3 的 RGBA 完全可以帮大家解决这样的问题了，接着我们在看一个用 RGBA 制作的效果吧，看看他是不是完全一样的。

　　HTML代码：

　　我们只要在 bg-content 中应用一个 background:rgba(); 就能有上面那种效果了，具体看看代码吧：

　　效果：

　　

　　从效果的对比中我们可以明显的看出，和 Opacity 做出的效果是完全一样的。但是这里有一个问题是我们讨厌的IE（除IE9以外）都不支持 CSS3 的 RGBA 属性。

　　那么这样我们在 IE 下不是什么都没有吗？回答是肯定的，虽然 IE 不支持但我们不能什么都不给他呀，这样一来我们就碰到一个新名词”fallback color“,它的意思是我给IE备份一个色，在不支持 RGBA 的情况下，我照样给他一个色，而对 RGBA 支持的浏览器并不会带来影响，那我们一起看看这个fallback color怎么用吧。

　　其实很简单，我们可以给其制作一张图片或都只给其加一个色，我们这些就只加一个色吧拿前面的实例来说吧，我们只要把 bg-content 的样式换一下：

　　这里需要注意的是startColorStr和endColorStr的值#80000000,其中前两位是十六进制的透明度80,也就是透明值为0.5而后面六位是十六进制的颜色#000000(black黑色)。如果你和我一样不知道怎么转换这个值，你可以采用下面这个工具：CSS背景颜色属性值转换 有关于这个工具的使用大家可以点击志哥的《使用IE过渡滤镜和CSS3中的RGBA属性完成背景色透明效果》，关于RGBA-IE-FALLBACK更多的知识可点击这里进入。

　　上面代码中的颜色值可以根据自己的需求修改，此处只是一个代表性的值。

　　我们前面简单的带过一句，我们 RGBA 不单可以应用在 background 上，我们还可以应用在只要设置了颜色的地方都可以使用，我在这里简单的说一下几种：

　　第一种：前景色color

　　HTML：

　　CSS样式：

　　效果：

　　

　　第二种边框色border-color

　　HTML：

　　CSS样式：

　　效果：

　　

　　第三种：字体的阴影色text-shadow

　　HTML：

　　CSS：

　　效果：

　　

　　第四种改变边框阴影色

　　HTML：

　　CSS：

　　效果:

　　

　　最后需要告诉大家的一点，这几种使用 RGBA 的方法，目前只有在支持 RGBA 属性的浏览器才能正常显示，如果需要使用的朋友，请考虑这方面的显示差别。那么到这里关于 CSS3 的 RGBA 我就介绍完了，希望能给大家的学习带来一定的帮助，更希望志同道合的朋友一起探讨一起学习一起进步。

深入阅读

• Colors in CSS
• CSS3 RGB & RGBA
• A brief introduction to Opacity and RGBA
• RGBA colors
• Yay for HSLa
• color (CSS data type)
• CSS Color Module Level 3

 

您可能感兴趣的相关文章

• Web 开发人员和设计师必读文章推荐
• 20个非常绚丽的 CSS3 特性应用演示
• 35个让人惊讶的 CSS3 动画效果演示
• 推荐12个漂亮的 CSS3 按钮实现方案
• 24款非常实用的 CSS3 工具终极收藏

 

本文链接：CSS3 入门教程：CSS3 RGBA（整理自：W3CPLUS）

编译来源：梦想天空 ◆ 关注Web前端开发技术 ◆ 分享网页设计资源