css3的新特性有哪些，css3主要增加了哪些新特性

今天小编为大家分享Windows系统下载、Windows系统教程、windows相关应用程序的文章，希望能够帮助到大家！

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

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

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

border-color:控制边框颜色，并且有了更大的灵活性，可以产生渐变效果；

border-image:控制边框图象 CSS3边框border-corner-image:控制边框边角的图象；

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

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

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

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

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

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

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

text-shadow:文字投影，可能是因为MAC OSX的Safari浏览器开始支持投影才特意增加的。

text-overflow:当文字溢出时，用“…”提示。包 CSS3文字效果括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之间的数来表示。

实现这样的效果非常简单，设置颜色的时候我们使用标准的rgba（）单位即可，例如rgba（255,0,0,0.4）这样就出现了一个红色同时拥有alpha透明为0.4的颜色。

经过测试firefox3.0、safari3.2、opera10都支持了rgba单位。

resize:可以由用户自己调整div的大小，有horizontal（水平）vertical（垂直）或者both（同时），或者同时调整。如果再加上max-width或min-width的话还可以防止破坏布局。

CSS3增加了更多的CSS选择器，可以实现更简单但是更强大的功能，比如:nth-child()等。

media queries:感觉叫媒体选择比较合适，可以为网页中不同的对象设置不同的浏览设备。比如可以为某一块分别设置屏幕浏览样式和手机浏览样式，以前则只能设置整个网页。

multi-column layout:多列布局，让文字以多列显示，包括column-width、column-count、column-gap三个值。

column-gap:指定每列之间的间距;

column-rule-color:控制列间的颜色;

column-rule-style:控制列间的样式;

column-rule-width:控制列间的宽度;

column-space-distribution:平均分配列间距。

perspective与最终呈现在浏览器上的大小，关系运算；

这个公式我在网上没找到，用几组数据得出来的结果，也测试了几组数据好像也没什么问题，可以用一下；设置了perspective就等于启动了物体的Z轴，Z轴默认为0px

也可以根据一个目标大小推出自己想要的perspective或者translateZ；

1.--3D物体的轴，做一个平时看手机的姿势

1.1--你把手机左右移动（头不要动）这就是物体的X轴运动；

1.2--你把手机上下移动（头不要动）这就是物体的Y轴运动；

1.3--你把手机前后移动（头不要动）这就是物体的Z轴运动；（前后移动就是把手机放远点和拉近点，胳膊伸直和弯曲的动作）

2.--perspective定义观察点到被观察物体Z轴的距离（眼睛到手机的前屏与手机背面的中心点距离）；

3.--分清perspective和物体Z轴运动

3.1--如果你的手机不动，头前后移动就是perspective在改变；

3.2--如果你的头不动，手机前后移动就是Z轴在改变；

perspective设置会改变物体最终呈现在浏览器上的大小和形状；perspective的数值要比translateZ大，否则就看不到物体了，因为他跑到你的眼睛后面去了。

一般弄懂了perspective和translateZ之间的关系后，其他的变形心里就有底了，

比如物体rotateY的时候，我们看到的样子变成另一个样子的过程，脑子就有概念了

套用上面公式(w*z)/(p-z)+ w=d；

虽然你设置的宽高为100px*200px，但是你最终看见的大小为200px*400px

最后可以百度jQuery之家，进入网站搜索perspective，查看2015年-2-2号写的系列文章（CSS 3D transforms系列教程-perspective）

wwW.Xtw.Com.cN系统网专业的PC、手机系统开发下载平台，HarmonyOS系统、安卓、OS、windows电脑重装系统在线下载安装,操作系统平台技术学习,攻略教程,技术交流。