CSS3技术详解

CSS即层叠样式表（Cascading StyleSheet）。 在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。 只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括： 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。

迅龙网络编辑：相比之前的css版本，css3提供了更加丰富的页面展示效果，让网站呈现更加绚丽多彩，迅龙网络目前熟练使用css技术进行网站建设

-

CSS3-Gird布局格式

CSS3-Gird布局格式 (2张)

 Grid布局图中[1]  蓝色的线不会出现在实际的网页中。

Grid布局应用很广泛，最简单的例子就是内容的分栏显示。

对于右边这个布局复杂的三栏网页来说，如果使用CSS3Grid布局的话，我们只需这样写：

body{columns:3;column-gap:0.5in;}

img{float:pagetopright;width:3gr;}

其中，body部分声明页面为3栏，栏间距为0.5英寸；img中float属性指明图片浮动位置为页面的右上角，而宽度为3个栏宽。只需这样两行CSS，就可以实现这个复杂布局。

1、

CSS3圆角表格

CSS3圆角表格

圆角表格，对应属性：border-radius。

2、以往对网页上的文字加特效只能用filter这个属性，这次CSS3中专门制订了一个加文字特效的属性，而且不止加阴影这种效果。对应属性：font-effect。

3、丰富了对链接下划线的样式，以往的下划线都是直线，这次可不一样了，有波浪线、点线、虚线等等，更可对下划线的颜色和位置进行任意改变。（还有对应顶线和中横线的样式，效果与下划线类似）对应属性：text-underline-style，text-underline-color，text-underline-mode，text-underline-position。

4、在文字下点几个点或打个圈以示重点，CSS3也开始加入了这项功能，这应该在某些特定网页上很有用。对应属性：font-emphasize-style和font-emphasize-position。

border-color:<color>

/*其中可以上一个值，也可以是多个值，具体我在这里不多说了，大家来时用到的也特别多*/

/*我们可以分别给各边上色*/

border-top-color:<color>/*给上边框上色*/

border-right-color:<color>/*给右边框上色*/

border-bottom-color:<color>/*给下边框上色*/

border-left-color:<color>/*给左框上色*/

border-image:控制边框图像

CSS3边框

CSS3边框

border-corner-image:控制边框边角的图像

border-radius:能产生类似圆角矩形的效果

background-origin:决定了背景在盒模型中的初始位置，提供了3个值，border, padding和content

border:控制背景起始于左上角的边框

padding:控制背景起始于左上角的留白

CSS3背景

CSS3背景

content:控制背景起始于左上角的内容background-clip:决定边框是否覆盖住背景（默认是不覆盖），提供了两个值，border和padding

border:会覆盖住背景

padding:不会覆盖背景

background-size:可以指定背景大小，以象素或百分比显示。当指定为百分比时，大小会由所在区域的宽度、高度，以及background-origin的位置决定

multiple backgrounds:多重背景图像，可以把不同背景图像只放到一个块元素里。

text-shadow:文字投影，可能是因为MAC OSX的Safari浏

CSS3文字效果

CSS3文字效果

览器开始支持投影才特意增加的。

text -overflow:当文字溢出时，用“…”提示。包括ellipsis、clip、ellipsis-word、inherit，前两个CSS2就有了，还是部分支持，但有趣的是IE6居然也支持。ellipsis-word可以省略掉最后一个单词，对中文意义不大，inherit可以继承父级元素。

HSL colors:除了支持RGB颜色外，还支持HSL（色相、饱和度、亮度）。以前一般都是作图的时候用HSL色谱，但这样一来会包括更多的颜色。H用度表示，S和L用百分比表示，比如hsl（0,100%, 50%）

HSLA colors:加了个不透明度（Apacity），用0到1之间的数来表示，比如hsla（0,100%,50%,0.2）

opacity:直接控制不透明度，用0到1之间的数来表示