css3新增的属性有哪些

html-css034

css3新增的属性有哪些,第1张

css3新属性:

一、RGBA和透明度

RGBA是RGB色彩模型的一个扩展。在本质上看也是为设置的元素增加了一个 alpha 通道,即除了红绿蓝三种颜色外还增加一个代表透明度的通道,其中 RGB 值分别表示红色、绿色、蓝色,而 alpha 取值则为 0 到 1 (小数位一位)。

二、background属性

background-image:设置元素的背景图像。

background-origin:规定背景图片的定位区域。

background-size :规定背景图片的尺寸。

background-repeat:设置是否及如何重复背景图像。

三、word-wrap属性

word-wrap 属性允许长单词或 URL 地址换行到下一行。

注:所有主流浏览器都支持 word-wrap 属性。

基础语法:

word-wrap: normal|break-word

四、text-shadow属性

text-shadow 属性:向文本设置阴影。

text-shadow基础语法:

text-shadow: 5px 5px 5px #FF0000

参数分别表示:水平阴影,垂直阴影,模糊距离,阴影颜色;

五、font-face属性

font-face属性:定义自己的字体

在新的 @font-face 规则中,您必须首先定义字体的名称(比如 myFirstFont),然后指向该字体文件。

六、border-radius属性

border-radius 属性:是一个简写属性,用于设置四个 border-*-radius 属性。

基础语法:

border-radius: 1-4 length|% / 1-4 length|%

注:该属性允许您为元素添加圆角边框!

七、border-image属性

border-image:将图片规定为包围 div 元素的边框

border-image基础语法:

border-image: url(border.png) 30 30 round

八、box-shadow属性

box-shadow属性:向框添加一个或多个阴影。(盒阴影)

box-shadow基础语法:

box-shadow: 10px 10px 5px #888888

九、媒体查询

媒体查询定义两套css,当浏览器的尺寸变化时会采用不同的属性。

利用alpha通道设定透明度的时候需要单独对每一个设定,而opacity直接就运用在了整个标签上, 其实这就是两者最大的区别,总结来说,opacity只能设定整个元素的透明值,而alpha通道可以特定对元素的某个属性设定透明值,比如上面的背景、 边框、文字等。

1、在图像处理中alpha到底是什么?Alpha通道是计算机图形学中的术语,指的是特别的通道,意思是“非彩色”通道,主要是用来保存选区和编辑选区。2、为什么用‘Alpha’代表透明度?Alpha 没有透明度的意思,不代表透明度。opacity 和 transparency 才和透明度有关,前者是不透明度,后者是透明度。比如 css 中的「opacity: 0.5」就是设定元素有 50% 的不透明度。后来 Alvy Ray Smith 提出每个像素再增加一个 Alpha 通道,取值为0到1,用来储存这个像素是否对图片有「贡献」,0代表透明、1代表不透明。也就是说,「Alpha 通道」储存一个值,其外在表现是「透明度」,Alpha 和透明度没啥关系。为什么取名为 Alpha 通道,我觉得是因为这是除RGB以外「第一个通道」的意思,没有别的更深刻的含义。「Alpha 通道」是图片内在的一个属性,用 css 或者其他外部方法设定透明度,并没有改变图片的 Alpha 通道的值。 阿尔法通道(α Channel或Alpha Channel)是指一张图片的透明和半透明度。例如:一个使用每个像素16比特存储的位图,对于图形中的每一个像素而言,可能以5个比特表示红色,5个比特表示绿色,5个比特表示蓝色,最后一个比特是阿尔法。在这种情况下,它要么表示透明要么不是,因为阿尔法比特只有0或1两种不同表示的可能性。又如一个使用32个比特存储的位图,每8个比特表示红绿蓝,和阿尔法通道。在这种情况下,就不光可以表示透明还是不透明,阿尔法通道还可以表示256级的半透明度,因为阿尔法通道有8个比特可以有256种不同的数据表示可能性。RGBA是代表Red(红色) Green(绿色) Blue(蓝色)和 Alpha的色彩空间。虽然它有的时候被描述为一个颜色空间,但是它其实仅仅是RGB模型的附加了额外的信息。采用的颜色是RGB,可以属于任何一种RGB颜色空间,但是Catmull和Smith在1971至1972年间提出了这个不可或缺的alpha数值,使得alpha渲染和alpha合成变得可能。提出者以alpha来命名是源于经典的线性插值方程αA + (1-α)B所用的就是这个希腊字母。(线性插值是数学、计算机图形学等领域广泛使用的一种简单插值方法)真正让图片变透明的不是Alpha 实际是Alpha所代表的数值和其他数值做了一次运算 。比如你有一张图片你想抠出图片中间的一部分 在PS里你会建立一个蒙板 然后在蒙板里把不需要的地方填充成黑色 需要的留成白色 这个时候实际上是是做了一次乘法。用黑色所代表的数值0去乘以你所填充的地方 那么这个地方就变透明了3、Alpha通道详解通道的概念通道作为图像的组成部分,是与图像的格式密不可分的,图像颜色,格式的不同决定了通道的数量和模式,在通道面板中可以直观的看到。通道的不同,自然我们给它们的命名就不同。Alpha 通道 Alpha 通道是为保存选择区域而专门设计的通道。在计算机图形学中,一个RGB颜色模型的真彩图形,用由红、绿、蓝三个色彩信息通道合成的,每个通道用了8位色彩深度,共计24位,包含了所有彩色信息。为实现图形的透明效果,采取在图形文件的处理与存储中附加上另一个8位信息的方法,这个附加的代表图形中各个素点透明度的通道信息就被叫做Alpha通道。Alpha通道使用8位二进制数,就可以表示256级灰度,即256级的透明度。白色(值为255)的Alpha像素用以定义不透明的彩色像素,而黑色(值为0)的Alpha通道像素用以定义透明像素,介于黑白之间的灰度(值为30-255)的Alpha像素用以定义不同程度的半透明像素。因而通过一个32位总线的图形卡来显示带Alpha通道的图形,就可能呈现出透明或半透明的视觉效果。在生成一个图像文件时,并不必须产生 Alpha 通道。通常它是由人们在图像处理过程中人为生成,并从中读取选择区域信息的。因此在输出制版时, Alpha 通道会因为与最终生成的图像无关而被删除。但也有时,比如在三维软件最终渲染输出的时候,会附带生成一张 Alpha 通道,用以在平面处理软件中作后期合成。除了 photoshop 的文件格式 PSD 外, GIF 与 TIFF 格式的文件都可以保存 Alpha 通道。而 GIF 文件还可以用 Alpha 通道作图像的去背景处理。因此,我们可以利用 GIF 文件的这一特性制作任意形状的图形。一个栗子:一个透明或半透明图形的数学模型应当如下:为了便于下面的分析,设Alpha值[0,255]区间映射为[0,1]区间相对应的值表示,即Alpha值为0—1之间的数值。则图形文件中各个像素点可表示为:Graphx(Redx,Greenx,Bulex,Alphax)屏幕上相应像素点的显示值就转换为:Dispx(Redx*Alphax,Greenx*Alphax,Bluex*Alphax)Alpha通道不仅用于单个图形的透明或半透明显示,更重要的是在图像合成中被广泛运用。下面是如何根据Alpha通道数据进行图像混合的算法:事实上,我们把需要组合的颜色计算出不含Alpha分量的原始RGB分量然后相加便可。如:两幅图像分别为A和B,由这两幅图像组合而成的图像称为C,则可用如下四元组表示图A和B,三元组表示图像C:A:(Ra,Ga,Ba,Alphaa)B:(Rb,Gb,Bb,Alphab)C:(Rc,Gc,Bc)根据上述算法,则:Rc=Ra*Alphaa+Rb*AlphabGc=Ga*Alphaa+Gb*AlphabBc=Ba*Alphaa+Bb*Alphab这就是两图像混合后的三原色分量。如果有多幅图像需要混合,则按照以上方法两幅两幅地进行混合。Alpha通道在多媒体课件作品开发中的应用Alpha通道技术是非曲直图像合成的最基本技术,目前其应用多局限于多媒体课件作品开发中的个别环节,未能从整体上给予Alpha通道功能以足够的重视。如:对通用图像处理软件PHOTOSHOP中的Alpha通道及其运用有较深刻的理解,而疏忽了Alpha通道在动画、视频和多媒体集成工具中的应用。本文通过对Alpha通道的综合分析,以期使Alpha通道技术在多媒体课件作品开发中的应用形成一个相对完整的理论体系,并在多媒体课件作品开发实践中起到具体的指导作用。4、Alpha通道在多媒体素材准备中的应用( 1.图像处理软件Photoshop中的Alpha通道在图像处理软件Photoshop中,通道是一个最为基本的概念,颜色通道代表了该图像的主要色彩信息,附加通道有用于印刷的专色通道和存储、修改选取区域的Alpha通道。通常情况下,单独创建的新通道就是Alpha通道,这个通道并不存储图像的色彩,而是将选择域作为8位灰度图像存放并被加入到图像的颜色通道中。因而Alpha通道的内容代表的不是图像的颜色,而是选择区域,其中的白色表示完全选取区域,黑色为非选取区域,不同层次的灰度代表不同的选取百分率,最多可有256级灰阶。对Alpha通道内容的操作,即是创建、存储、修改我们所需要的选取区域。如在目标图层上载入该选区(即运用该Alpha通道)便可实现任意层次的选取。通过多个Alpha通道之间的计算或Alpha通道与图层的合成便能够产生许多特殊的效果。因此,Alpha通道功能可以说是Photoshop编辑合成多媒体作品中所使用的背景图片、主题图片、按钮、导航标志等素材的一大法宝。( 2.Alpha通道在动画创作软件中的应用Alpha通道无论是在二维动画软件还是三维动画软件中都有广泛的应用。大家熟知的3DMAX动画软件中提供了动画作品后期合成的工作环境(即VIDEO POST),利用VIDEO POST的图像合成功能可以实现一次处理许多不同层次的图像文件与动画场景合成的设定。其中使用最频繁的合成方式Alpha composing就是靠Alpha通道来实现的。3DMAX能根据文件的输出格式产生包含Alpha通道的32位文件格式(特别是32位的Targa图像文件)。当进行渲染时,任何不含物体的区域的Alpha值为0,实色的物体的Alpha值为255,而透明材质的Alpha值介于0~255间。利用3DMAX的这一特性可在该软件或其它软件中实现各种透明重叠的图像或动画效果。Flash矢量动画中同样具有Alpha通道功能的运用。Alpha是Flash动画场景中图形符号(graphic)的一个主要属性,改变其值(0~100之间)便可改变对象符号的透明程度。如在各关键帧设定某图形符号以不同的Alpha值,则该图形符号就呈现出动态变化的透明效果。通过编写动作脚本(Action scripting),用户交互式地改Alpha值,更能使动画作品生动有趣。( 3.利用Alpha通道在视频编辑软件中实现高叠轨道的透明合成在视频处理软件中,通常要将多个视频片段按照要求重叠在一起形成透明或半透明效果。Premiere电影编辑软件里提供了多达97个视频高叠轨道用以实现影像片段的合成。在高叠片段的video Option命令中有一个专门用于合成的透明设置选项Transparency,它提供了许多key Type基本(透明)类型。其中Alpha channel key就是利用影像或图片的Alpha通道在片段上选定区域形成透明效果。一些影视创作人员在节目编辑中,为了把广告的图标、报道题花等图案作为标记或栏目标题叠加在画面上,使用Photoshop、3DMAX或Cool3d等软件生成带Alpha通道的32位TGA图片或图片序列,在非编系统软件中运用Alpha channel key功能实现标题字幕或图标的高叠。Alpha通道技术本身并不复杂,但其运用上的创意是无限的。不断总结在多媒体课件作品开发中运用Alpha通道技术的途径以提高作品技术质量、增强作品艺术感染力,是一个永无止境的课题。opengl 里面,alpha值通常是在激活了混合操作之后起作用的。用来将已经处理过的片元颜色值与存储在帧缓存中的像素颜色值结合起来。如果不进行混合操作,每个新的片元都将被opengl当成是不透明的,覆盖掉已经存在的所有颜色值。利用混合操作可以实现半透明等状态。可以这样看alpha值,将片元的RGB分量考虑为对颜色的表示,而将alpha值分量考虑为颜色的不透明度。