关于css:CSS3新增的部分属性

5次阅读

共计 8865 个字符，预计需要花费 23 分钟才能阅读完成。

HTML5、CSS3 和 JavaScript API 一起造成了新的网页规范，很多浏览器曾经开始施行其中的局部新性能。其中 CSS3 负责网页款式的体现，为了达到更好的体现成果，减少了一些新属性。

目前 CSS3 的局部属性在一些浏览器上处在试验阶段，为了在文档中无效利用这条规定，必须应用相应的前缀申明。
·-moz- 是 Firefox 的前缀
·-webkit- 是 Safari 和 Chrome 的前缀
·-o- 是 Opera 的前缀
·-khtml- 是 Konqueror 的前缀
·-ms- 是 Internet Explorer 的前缀
·-chrome- 是 Google Chrome 的专用前缀

在 CSS3 中，在文本润饰方面，能够减少暗影、描边和发光等成果。在排版办法，能够对溢出及换行进行良好的管制，甚至对于非凡少见的字体，也能在客户端显示良好。

1）text-shadow 属性：

CSS3 中的暗影属性 text-shadow，岂但能够给文本增加暗影，还能够实现文本的描边和发光成果。语法为：
text-shadow:length||length||opacity||color
其中，length 示意暗影在程度和垂直方向绝对于文字自身的偏移间隔，能够为负值；opacity 示意暗影成果含糊的间隔，不能为负，0 示意没有含糊；color 示意暗影的色彩值。已取得所有浏览器厂商新版本的反对。

示例：
text-shadow:5px 5px 3px #333;
text-shadow:-5px -5px 3px #00f;
还能够在上下左右四个方向为文字设置多个暗影：
text-shadow:-5px -5px 3px #00f,5px 5px 3px #333;
不设置含糊间隔，就能够实现文本描边成果：
text-shadow:-1px 0 #333,0 -1px #333,1px 0 #333,0 1px #333;
能够为每个方向上的暗影设置不同的色彩。如果将左和上的暗影色彩设为红色，会有凸起成果；而向下和右的暗影色彩设为红色，会有凸起成果：
text-shadow:-1px 0 #fff,0 -1px #fff,1px 0 #333,0 1px #333;
text-shadow:-1px 0 #333,0 -1px #333,1px 0 #fff,0 1px #fff;
如果不设置暗影程度和垂直的偏移间隔，仅设置含糊作用间隔，配合背景，可实现发光成果：
text-shadow:0 0 10px #fff;

2）text-overflow 属性：

CSS3 的溢出文本处理属性，语法为：
text-overflow:clip|ellipsis|ellipsis-word
其中，clip 示意间接裁切溢出的文本；ellipsis 示意文本溢出时显示省略标记，代替最初一个字符；ellipsis-word 也示意文本溢出时显示省略标记，代替的是最初一个词。示例：
overflow:hidden; /溢出内容设为暗藏 /
white-space:nowrap; / 强制文本单行显示 /
text-overflow:ellipsis; / 设置溢出文本显示为省略标记/
Firefox 不反对该属性。

3）word-wrap 和 word-break：

word-wrap 为边界换行属性，设置或检索以后行超过指定容器边界时是否断开换行。语法：
word-wrap:normal|break-word;
其中，normal 示意为默认的间断文本换行，容许内容超出边界；break-word 示意内容将在边界内换行，如果须要，词内换行也会产生。
word-break 为字内换行属性，设置或检索对象内文本的字内换行行为。语法：
word-break:normal|break-all|keep-all;
该属性的值与应用的语言有关系。

4）@font-face 规定：

CSS 字体通常会受到客户端的限度，只有客户端装置了该字体之后款式能力正确显示。CSS3 新增了字体自定义性能，通过 @font-face 规定来援用互联网上任一服务器中存在的字体。语法：
@font-face:{属性: 值;}
其中的属性和值为：
·font-family：设置文本的字体名称，该名称可被当作字体援用
·font-style：设置文本款式
·font-variant：设置文本是否为小型大写字母大小写
·font-weight：设置文本的粗细
·font-stretch：设置文本是否横向的拉伸变形
·font-size：设置文本字号大小
·src：设置自定义字体的相对路径或者绝对路径，可蕴含 format 信息
对于 @font-face 的兼容，次要是字体 format 的问题，因为不同的浏览器对字体格局的反对不统一。TrueTpe(.ttf)格局的字体对应的 format 属性为 truetype；OpenType(.otf)格局的字体对应的 format 属性为 opentype；Embedded Open Type(.eot)格局的字体对应的 format 属性为 eot。示例：
@font-face {
font-family:myfont;
src:url(../font/HEMIHEAD.TFF) format(“tryetype”);
}
中文字体文件都是几 MB 到十几 MB 大小，会重大影响网页的加载速度，如果是大量非凡字体，倡议应用图片来代替。而英文的字体文件只有几十 kB，非常适合应用 @font-face 规定。

CSS3 新增了 HSL 色调模式，还减少了色彩自身的不透明度设置和独自的不透明度属性。

1)HSL 色调模式：

HSL 色调模式通过对色调 Hue、饱和度 Saturation 和亮度 Lightness 三个色彩通道的变动及相互之间的叠加来失去各式各样的色彩，简直包含了人类视力所能感知的所有色彩。语法：
hsl(<length>,<percentage>,<percentage>)
其中，第一个参数示意色调 Hue，能够任意取值，该值除以 360 所得的余数为 0 示意红色，为 60 示意黄色，为 120 示意绿色，为 180 示意青色，为 240 示意蓝色，为 300 示意洋红色；第二个参数示意饱和度 Saturation，值为百分比，范畴从 0% 到 100%，0% 示意灰度无色，100% 示意最娇艳；第三个参数示意亮度 Lightness，为百分比，范畴从 0% 到 100%，0% 最暗，50% 均亮，100% 最亮。
利用 HSL 色调模式，首先确定网页的主色调，而后通过调整饱和度和亮度，即可在同一色系中抉择色彩，整体上有对立的感觉。

示例：
background-color:hsl(0,0%,90%);
color:hsl(0,100%,50%);

2)HSLA 色调模式：

HSLA 色调模式是 HSL 色调模式的延长，减少了不透明度参数。语法：
hsl(<length>,<percentage>,<percentage>,<alpha>)
减少的第四个参数示意不透明度，取值在 0 到 1 之间，取值为 1 时与 HSL 色调模式雷同。
background-color:hsl(40,50%,50%,0.1);

3)RGBA 色调模式：

RGBA 色调模式是 RGB 色调模式的延长，在红、绿、蓝三原色根底上减少了不透明度参数。语法：
rgba(<red>,<green>,<blue>,<alpha>)
前三个参数别离示意红、绿、蓝色彩的取值，范畴在 0 到 255 之间的整数，也能够是 0.0% 到 100.0% 之间的百分数，但有些浏览器不反对百分数。第四个参数示意不透明度，取值在 0 到 1 之间，取值为 1 时与 RGB 色调模式雷同。
background-color:rgba(255,153,0,0.1);

4)Opacity 属性：

CSS3 还有专门的不透明度属性 opacity，能够设置半透明成果，能够利用到任何页面元素中。语法：
opacity:<alpha>|inherit
其中，<alpha> 示意不透明度，取值在 0 到 1 之间，默认为 1，示意齐全不通明，0 示意齐全通明；inherit 示意继承父元素的不透明度。在 IE8 及以前的浏览器版本中，通明成果应用 filter 来设置：filter:alpha(opacity=<value>)
半透明的遮蔽层是网页中罕用的表现形式，经常是为了突出弹出层的内容，须要一个半透明的遮蔽层来遮挡页面的其余内容。

在布局和丑化页面方面，经常离不开对背景的设置。CSS3 加强了原有背景属性的性能，并削减了一些新的背景属性。语法：
background:[background-image]|[background-origin]|[background-clip]|[background-repeat]|[background-size]|[background-position];
其中，background-image 指定或检索对象的背景图像；background-origin 指定背景的原点地位，新增属性；background-clip 指定背景的显示区域，新增属性；background-repeat 设置或检索对象的背景图像是否及如何反复铺排；background-size 指定背景图片的大小，新增属性；background-position 设置或检索对象的背景图像地位。如果定义多重背景图，则用逗号隔开各个背景图设置。如果应用子属性间接定义，各个子属性也用逗号对应顺次隔开。

1)定义多个背景图片：

CSS3 中，能够对一个元素利用一个或多个图片作为背景，只须要用逗号来辨别各个图片。第一个申明的图片定位在元素顶部，其余的图片顺次在其下排列。

示例：
background:url(../images/icon12.png) 120px 110px no-repeat, url(../images/icon5.png) 400px 10px no-repeat, url(../images/j10-2.png) no-repeat;
也能够写成：
background-image:url(../images/icon12.png), url(../images/icon5.png), url(../images/j10-2.png);
background-position:120px 110px , 400px 10px , 0 0;
background-repeat:no-repeat no-repeat no-repeat;

2)指定背景的原点地位：

CSS3 的新增属性 background-origin 用来指定背景图像的原点地位，默认状况下总是以元素边框以内的左上角为坐标原点进行背景图像定位。语法：
background-origin:border-box|padding-box|content-box
其中，border-box 示意原点地位为边框区域的开始地位；padding-box 示意原点地位为内边框区域的开始地位；content-box 示意原点地位为内容区域的开始地位。
可见，该原点地位不是通过间接给出原点坐标指定的，而是依据盒模型的构造来确定的，这对于网页背景的布局有肯定的劣势。但这部分属性目前须要加浏览器前缀。

示例：
-webkit-background-origin:border-box;
-moz-background-origin:border-box;
background-origin:border-box;

3)指定背景的显示区域：

CSS3 的新增属性 background-clip 用来指定背景的显示区域。语法：
background-clip:border-box|padding-box|content-box
其中，border-box 示意背景从边框开始显示；padding-box 示意背景从内边距开始显示；content-box 示意背景仅在内容区域显示。示例：
-webkit-background-clip:border-box;
-moz-background-clip:border-box;
background-clip:border-box;
因为背景显示区域的限度，背景图像被裁剪了，所以该显示区域也叫裁剪区域，该属性也叫裁剪属性。

4)指定背景图像的大小：

CSS3 新增属性 background-size 用来指定背景图像的大小。语法：
background-size:[<length>|<percentage>|auto]{1,2}|cover|contai
<length> 或 <percentage> 值用来设置背景图像的高度和宽度，第一个值设置宽度，第二个值设置高度，如果只给出一个值，第二个值设置为 auto。其中，<length> 间接指定背景图像的高度和宽度，<percentage> 是基于父元素尺寸的百分比来确定背景图像的宽和高，其中父元素的计算尺寸包含父元素的内边距，不包含边框。
Cover 示意放弃背景图像自身的宽高比例将图像缩放到正好齐全笼罩所定义的背景区域，可能会裁剪掉局部图像；contain 示意放弃背景图像自身的宽高比例，将图像缩放到正好适应所定义的背景区域，但可能不会齐全笼罩背景区域。

示例：
background-size:30% 30%,60% 60%, 100% 100%;
上述代码设置了三个背景图像的大小，用百分比示意的。

边框是罕用的丑化网页手法之一。CSS3 中，通过样式表，能够实现圆角边框、图像边框和多色边框等。

1)border-radius 属性：

border-radius 为 CSS3 新增的用来设计边框圆角的属性。语法：
border-radius:none|<length>{1,4}[/<length>{1,4}]?
其中，none 是默认值，示意没有圆角；<length> 为长度值，不能为负值，分为两组，每组能够有 1 到 4 个值，第一组为程度半径，第二组为垂直半径，如果第二组省略则默认等于第一组的值。
border-radius 属性针对边框的 4 个角派生出 4 个子属性，别离为 border-top-left-radius、border -top-right-radius、border-bottom-left-radius、border-bottom-right-radius，定义左上、右上、左下、右下角的圆角。如果边框的 4 个圆角的半径各不相同，能够应用子属性独自设置。

示例：
border-radius:20px;
圆角成果还与边框宽度无关，如果边框的宽度大于或等于圆角半径，则边框外部将不再是圆角。在不设边框时，如果该块元素有背景，则把背景的 4 个角定义为圆角。
border-radius 属性能够被赋值为 2 个参数，这是第一个值示意左上角和右下角，第二个值示意右上角和左下角。示例：
border-radius:20px 40px;
还能够设 3 个属性和 4 个属性。border-radius 属性还能够为边框的圆角同时指定两组半径值，第一组值示意圆角的程度半径，第二组的值示意圆角的垂直半径，两组之间用 / 隔开。如果半径只有一组，就认为垂直半径等于程度半径，如果任一个为 0，则这个角就变成直角了。
border-radius:20px/40px;
border-radius:20px 30px 40px 50px/30px 40px 10px 0;

2)border-image 属性：

CSS3 新增 border-image 属性，专门用于图像边框的解决，可用灵便地宰割图像，并利用于边框。语法：
border-image:none|<image>[<number>|<percentage>{1,4}[/<border-width>{1,4}]?[stretch|repeat|round]{0,2}
其中，none 默认值，示意边框没有背景图；<image> 应用相对或绝对的 url 地址指定图像源；<number> 裁切边框图像大小，没有单位，默认以像素为单位；<percentage> 裁切边框图像大小，应用百分比示意；<border-width> 用于设定边框宽度，不能为负值；stretch、repeat、round 别离示意拉伸、反复、平铺，默认值为 stretch。
border-image 是一个复合属性，依据边框方位能够派生出 8 个子属性：border-top-image、border-right-image、border-bottom-image、border-left-image、border-top-left-image、border-top -right-image、border-bottom-left-image、border-bottom-right-image；依据边框图像的解决性能又派生出 5 个子属性：
·border-image-source：定义边框的图像源，应用相对或绝对的 url 地址
·border-image-slice：定义边框图像的切片，设置图像的边界向内的偏移长度
·border-image-repeat：定义边框图像的展示形式，拉伸、反复、平铺
·border-image-width：定义图像边框的宽度，也可应用 border-width 属性设置雷同性能
·border-image-outset：定义边框图像的偏移地位
border-image 属性语法中，<number> 或 <percentage> 都能够用于定义边框图像的切片，定义出 9 个切片进行边框图像渲染。只有定义 4 个数值或百分比就会从图像的边界别离在上、下、左、右 4 个方向向内偏移相应的长度，造成 4 条线，通过这 4 条线就能够确定 9 个切片。9 个切片中，4 个角上的切片会间接显示，4 个边上的切片则能够设置拉伸、平铺等显示方式，两头的切片会以元素背景模式显示。所有切片都会依据边框的宽度与切片的宽度的比例进行缩放。子属性 border-image-slice 也能够定义边框图像的切片，但没有支流浏览器的反对。

示例：
-webkit-border-image:url(../images/borderimage.png) 30/30px;
-moz-border-image:url(../images/borderimage.png) 30/30px;
-o-border-image:url(../images/borderimage.png) 30/30px;
border-image:url(../images/borderimage.png) 30/30px;
或
-webkit-border-image:url(../images/borderimage.png) 90 100 120 130/30px;
-moz-border-image:url(../images/borderimage.png) 90 100 120 130/30px;
-o-border-image:url(../images/borderimage.png) 90 100 120 130/30px;
border-image:url(../images/borderimage.png) 90 100 120 130/30px;
边框图像切片的显示方式对应的子属性为 border-image-repeat，包含 stretch、repeat 和 round，别离示意拉伸、反复、平铺，默认值 stretch。
-webkit-border-image:url(../images/borderimage.png) 30/30px repeat;
-moz-border-image:url(../images/borderimage.png) 30/30px repeat;
-o-border-image:url(../images/borderimage.png) 30/30px repeat;
border-image:url(../images/borderimage.png) 30/30px repeat;
4 个边框的图像反复显示，且反复过程中会放弃所属切片的长宽比例不变。切片是从边框的两头开始向四周反复平铺，在边缘区域可能会被局部暗藏，不能显示残缺的切片。
属性值 round 也是把切片反复地平铺，在平铺过程中会依据边框的尺寸调整切片的长宽比例，以保障在边缘区域也能显示残缺的切片。
也能够定义显示方式为两个值，第一个值用于指定上、下两个边框的切片显示方式，第二个值用于指定左、右两个边框的切边显示方式。
边框宽度能够在 border-image 属性设置，也能够应用 border-width 属性来指定宽度。图像的切片会依据边框的尺寸主动缩放切片。示例：
-webkit-border-image:url(../images/borderimage.png) 30/10px round;
-moz-border-image:url(../images/borderimage.png) 30/10px round;
-o-border-image:url(../images/borderimage.png) 30/10px round;
border-image:url(../images/borderimage.png) 30/10px round;

3)Border-color 属性：

Border-color 属性用于设置边框的色彩，CSS3 加强了该属性的性能，能够为边框设置更多色彩。语法：
border-color:[<color>|transparent]{1,4}
其中，<color> 是一个色彩值，能够是半透明色彩；transparent 是通明值，不设色彩时应用，为默认值。能够别离为元素的 4 个边框设置色彩，也派生 4 个子属性，别离是 border-top -color、border-right-color、border-bottom-color、border-right-color。Firefox 浏览器还反对为每个边框定义多个色彩，从外到内显示，每种色彩 1px 宽度，最初一种色彩被用于剩下的宽度。

正文完