CSS3用过哪些新特性

html-css042

CSS3用过哪些新特性,第1张

关于CSS3，可以先查看一下文档

新特性有：

border-radius 圆角, @font-face 字体, box-shadow text-shadow 框和文本的阴影

word-wrap, background-size, background-origin, border-image, box-sizing, calc, linear-gradient 等等

transform 转换

rotate(XYZ) 根据x,y,z轴旋转

translate(XYZ), scale(XYZ) 同理

perspective 透视，这个很多3D效果都要设置一下，不然3D还是只会有”2D”的效果

rotate 旋转，图片转个90或180度什么的

translate 位置移动

scale, skew, matrix 等

2D 转换

3D 转换

transition: 过渡，简单的动画（如：移个位置，变个长短），直接用这个属性就能搞定。

animation: 动画，3D可以调用硬件渲染。

新的长度单位：rem， ch，vw，vh，vmax，vmin 等。其中ch:数字“0”的宽度,vw 相对于视窗的宽度：视窗宽度是100vw.

clip-path: 绘制路径，类似SVG技术。 国外炫酷产品。

flex: flex布局，继 table 和 div 后的趋势，不了解或不熟悉的可以参考cssreference。

伪类选择器：如::target, :enabled, :disabed, :first-child, last-child等等

@media 媒体查询，适用于一些响应式布局中

columns: 分栏布局。

will-change: 改善渲染性能, 参考使用CSS3 will-change提高页面滚动、动画等渲染性能。

<!DOCTYPE html>

<html>

<head>

<style type="text/css">

div{margin:0padding:0}

#container{width:800pxheight:500pxborder:1px solid #ccc}

#container .box1{width:380pxheight:500pxfloat: leftbackground:red}

#container .box2{margin-left: 40pxwidth:380pxheight:500pxfloat:leftbackground: green}

</style>

</head>

<body>

<div id="container">

<div class="box1"></div>

<div class="box2"></div>

</div>

</body>

</html>

左浮动即float:left，使布局元素靠左浮动。右浮动即float:right，使布局元素靠右浮动。在网页布局中结合这两种布局方式可以设计出千变万化的布局形式！只要发散你的思维，开拓你的想象相信定能设计出好的作品！祝你成功！