汕头市网站制作浅谈CSS3的新作用和新特点

         汕头市网站制作表明，现阶段许多早已存有的新作用和特点已经被明确提出至CSS3。因此网编将在此试着展现在其中的一些內容，期待对大伙儿有一定的协助。 外框

border-color 特性

boder-image 特性

border-radius 特性

box-shadow 特性

情况

background-origin 特性和 background-clip 特性

background-size 特性

多种情况

色调

HSL 色调值

HSLA 色调值

opacity 特性

RGBA 色调值

文本实际效果

text-shadow 特性

text-overflow 特性

word-wrap 特性

客户页面

box-sizing 特性

resize 特性

outline 特性

nav-top、nav-right、nav-bottom、nav-left 特性

挑选器

特性(attribute)挑选器

基本盒实体模型

overflow-x 特性和 overflow-y 特性

转化成的內容

content 特性

其他控制模块

media queries 控制模块

multi-column layout 控制模块

Web 字体样式控制模块

Speech 控制模块

怎样根据CSS3建立五颜六色的外框

W3C早已在CSS3中为外框出示了一些新的选择项，这种选择项即圆弧外框、外框色调以后，也是是非非经常出现趣的。Mozilla/Firefox早已完成了这一容许你建立很帅的五颜六色外框的涵数

Border-image：在你的外框中应用照片

另外一个让人激动的CSS3中澳的外框特点是border-image特性。拥有这一特点你可以以界定一个照片以替代一般外框。这一特点具体上可分成一对特性：border-image和border-corner-image。这2个值能够简称，以下：

border-image:

border-top-image

border-right-image

border-bottom-image

border-left-image

border-corner-image:

border-top-left-image

border-top-right-image

border-bottom-left-image

border-bottom-right-image border-image现阶段早已在Safari和Firefox 3.1 (Alpha)下工作中了。英语的语法以下：

或

Border-radius：用CSS建立圆弧外框!

W3C早已在CSS3中出示了一些新的选择项，border-radius是在其中之一，Mozilla/Firefox和Safari 3早已经完成了这一容许你建立圆弧盒实体模型的涵数。比如：

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

这种不一样的角能够被各自操纵，编码以下：

-moz-border-radius-topleft / -webkit-border-top-left-radius

-moz-border-radius-topright / -webkit-border-top-right-radius

-moz-border-radius-bottomleft / -webkit-border-bottom-left-radius

-moz-border-radius-bottomright / -webkit-border-bottom-right-radius

Box-shadow，CSS3的最强逼的新特点之一

CSS3情况和外框控制模块有着一个十分好的新特点全名是box-shadow，它早已在Safari 3+和Firefox 3.1 (Alpha)中足以完成。其标准谈及了多种黑影，可是创作者早已对于此事明确提出了提出质疑，而且Safari 3并沒有将实际上现。

此特性由3个长短主要参数和一个色调主要参数构成，在其中长短主要参数有：

1. 黑影的横着位移量，恰逢寓意着黑影靠右，负值则靠左;

2. 黑影的竖向位移量，负值寓意着黑影靠上，恰逢则靠下;

3. 退色渐变色半径，假如数值0则黑影会被立即断开，值越高退色渐变色的实际效果就会越显著。比如：

box-shadow: 10px 10px 5px #888;

padding: 5px 5px 5px 15px;

此黑影会被只靠圆弧外框的圆弧而建立，比如：

box-shadow: -10px -10px 0px #000;

border-radius: 5px;

padding: 5px 5px 5px 15px;

background-origin和background-clip

Mozilla、Safari 3和Konqueror早已经试验性完成了CSS3中的background-origin特性和background-clip特性。Opera在上一个公布版本号中有一个平稳的、根据初期Opera 2.3中情况和外框标准的基本完成。

background-origin特性用于决策怎样在盒实体模型中测算background-position的值。

此特性有三种赋值：border-box、padding-box和content-box。假如你应用了padding-box，则情况的部位测算会相对性于内行高地区的左上方;border-box则相对性于外框的左上方;content-box则相对性于其中容的左上方。根据Gecko或Webkit的访问器应用了落伍的标准版本号，其赋值为border、padding和content。

background-clip特性用于决策情况是不是要拓展到外框里。默认设置值是border-box，即拓展到外框里。但假如将其取值padding-box则不容易。假如你应用content-box则情况总是在有內容的矩形框地区显示信息(这一可选择值早已在近期的标准中来没了)。

试验性完成的编码以下：

-webkit-background-origin / -moz-background-origin

-webkit-background-clip / -moz-background-clip

平稳完成的编码以下：

background-origin

background-clip

Background-size

CSS3给了你一种界定情况照片规格的方法。你可以以根据情况照片宽高的清晰度值或百分数开展界定。如果你应用百分数开展界定时，其照片规格是相对性于其盒实体模型根据background-origin界定的地区的长和宽的。

完成这一特点的访问器有Opera 9.5、Safari 3、Firefox和Konqueror。她们各自应用-o-background-size、-webkit-background-size和-khtml-background-size、-moz-background-size特性。

根据CSS3完成多种情况

CSS3容许同一个原素中有好几个情况照片。你可以以用分号将不一样的情况界定隔开开已界定多种情况。例如：

现阶段早已完成这一特性的访问器有：Webkit和KHTML (Konqueror)。

HSL色调值

跟应用16进制的RGB(红、绿、蓝)色调值一样，CSS3还可以鉴别HSL(色相、饱和状态度、色度)色调值。

HSL色调值有三个主要参数：

色相就是指色盘的度数，0度或全方位是鲜红色，120度是翠绿色，240度是深蓝色。大家能够在0度到全方位中间赋值以表明不一样的色彩。

饱和状态度值是一个百成绩，100%表明彻底饱和状态的色调。

色度值也是一个百成绩，0%表明黑色，100%表明全白，50%则表明正中间值。

这类色调数值大家明确能用色调日风格出示了一个十分宽阔的室内空间。

目前，HSL早已被Opera 9.5、Safari 3、Konqueror和Mozilla访问器所完成。