CSS3新特性简介

1.CSS3 边框:通过 CSS3,能够创建圆角边框,向矩形添加阴影,使用图片来绘制边框,如border-radius;box-shadow;border-image

2.CSS3 背景:CSS3 包含多个新的背景属性,它们提供了对背景更强大的控制。background-size;background-origin

3.CSS3 文本效果:CSS3 包含多个新的文本特性。text-shadow;word-wrap

4.CSS3 @font-face规则:可将设计师希望使用的字体文件存放到web服务器上,它会在需要时被自动下载到用户的计算机上,即可使用任意字体。在新的@font-face规则中,您必须首先定义字体的名称(比如myFirstFont),然后指向该字体文件。

5.CSS3 转换:通过 CSS3转换,我们能够对元素进行移动、缩放、转动、拉长或拉伸。转换是使元素改变形状、尺寸和位置的一种效果。您可以使用2D或3D转换来转换您的元素。

2D 转换方法:translate();rotate();scale();skew();matrix()。Chrome 和 Safari 需要前缀 -webkit-,Internet Explorer 9 需要前缀 -ms-

6.3D 转换:CSS3 允许您使用 3D 转换来对元素进行格式化。 3D 转换方法:rotateX();rotateY()

Opera 仍然不支持 3D 转换。

7.CSS3 过渡:通过 CSS3,我们可以在不使用Flash动画或JavaScript的情况下,当元素从一种样式变换为另一种样式时为元素添加效果。

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。

要实现这一点,必须规定两项内容:

规定您希望把效果添加到哪个 CSS 属性上;

规定效果的时长:默认值是 0;

8.CSS3 动画:通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。

@keyframes规则用于创建动画。在@keyframes中规定某项CSS样式,就能创建由当前样式逐渐改为新样式的动画效果。

请把它捆绑到某个选择器,否则不会产生动画效果。

通过规定至少以下两项 CSS3 动画属性,即可将动画绑定到选择器:

规定动画的名称;

规定动画的时长;

9.CSS3 多列:通过 CSS3,您能够创建多个列来对文本进行布局 - 就像报纸那样!column-count;column-gap;column-rule

10.CSS3 用户界面:在 CSS3 中,新的用户界面特性包括重设元素尺寸、盒尺寸以及轮廓等。

resize

box-sizing

outline-offset

CSS3新特性简介

时间: 2024-12-07 19:57:36

CSS3新特性简介的相关文章

[转]深入了解 CSS3 新特性

简介 CSS 即层叠样式表(Cascading Stylesheet).Web 开发中采用 CSS 技术,可以有效地控制页面的布局.字体.颜色.背景和其它效果.只需要一些简单的修改,就可以改变网页的外观和格式.CSS3 是 CSS 的升级版本,这套新标准提供了更加丰富且实用的规范,如:盒子模型.列表模块.超链接方式.语言模块.背景和边框.文字特效.多栏布局等等,目前有很多浏览器已经相继支持这项升级的规范,如:Firefox.Chrome.Safari.Opera 等等.在 Web 开发中采用 C

深入了解 CSS3 新特性

简介 CSS 即层叠样式表(Cascading Stylesheet).Web 开发中采用 CSS 技术,可以有效地控制页面的布局.字体.颜色.背景和其它效果.只需要一些简单的修改,就可以改变网页的外观和格式.CSS3 是 CSS 的升级版本,这套新标准提供了更加丰富且实用的规范,如:盒子模型.列表模块.超链接方式.语言模块.背景和边框.文字特效.多栏布局等等,目前有很多浏 览器已经相继支持这项升级的规范,如:Firefox.Chrome.Safari.Opera 等等.在 Web 开发中采用

Atitti css3 新特性attilax总结

图片发光效果2 透明渐变效果2 文字描边2 背景拉伸2 CSS3 选择器(Selector)4 @Font-face 特性7 Word-wrap & Text-overflow 样式9 Word-wrap9 Text-overflow10 文字渲染(Text-decoration) 描边12 CSS3 的多列布局(multi-column layout)13 边框和颜色(color, border)14 CSS3 的渐变效果(Gradient)15 线性渐变15 径向渐变16 CSS3 的阴影(

CSS3新特性+less实验——animation

自从CSS3推出animation以来,一大批H5应用纷纷利用animation来制作以往需要JS或FLASH才能制作出的特效.今天就来看看animation的庐山真面目吧. 实验对象:animation animation可以被用来定义一组动画效果,此效果可以被应用在任何元素之上,并且可以通过它提供的各项参数精确控制动画的细节. 语法 animation:[[ animation-name ] || [ animation-duration ] || [ animation-timing-fu

个人总结(css3新特性)

1.前言css3这个相信大家不陌生了,是个非常有趣,神奇的东西!有了css3,js都可以少写很多!我之前也写过关于css3的文章,也封装过css3的一些小动画.个人觉得css3不难,但是很难用得好,用得顺手,最近我也在过一遍css3的一些新特性(不是全部,是我在工作上常用的,或者觉得有用的),以及一些实例,就写了这一篇总结!希望,这篇文章能帮到大家认识css3.写这篇文章主要是让大家能了解css3的一些新特性,以及基础的用法,感觉css3的魅力!如果想要用好css3,这个得靠大家继续努力学习,寻

常用的HTML5、CSS3新特性能力检测写法

伴随着今年10月底HTML5标准版的发布,未来使用H5的场景会越来越多,这是令web开发者欢欣鼓舞的事情.然而有一个现实我们不得不看清,那就是IE系列浏览器还占有一大部分市场份额,以IE8.9为主,windows8.1的用户已经用上了IE10/11,而考虑我国的国情,IE6.7依然存留不少.在我们放手用HTML5开发的时候,新特性支持度检测就是必不可少的了.一种方式是用navigator.userAgent或navigator.appName来检测浏览器类型和版本,不过这种方式不是很可靠,浏览器

Css3新特性总结之边框与背景(一)

本系列主要总结Css3一些新特性的认识,来源于<css揭秘>书. 一.半透明边框 css3最好用hsla,而不是rgba,hsla是:h:颜色值(0~360):s:饱合度(0%~100%):l:亮度(0%~100%):a:透明度(0~1) background-clip:裁剪背景颜色,默认为border-box(背景颜色扩散到border):padding-box(背景颜色扩散到padding):content-box(背景颜色扩展到content) 示例代码: width:200px; he

使用Modernizr探测HTML5/CSS3新特性

HTML5, CSS3以及相关技术(例如canvas和web sockets)带来了非常有用的特性,可以让我们的web程序提升一个新的level.这些新技术允许我们只用HTML,CSS和JavaScript 就可以构建包括在平板和移动设备上能够运行的多样化表单页面.HTML5虽然提供了很多新特性,但是如果我们不考虑旧版本的浏览器就是用这些新技术也不太 现实,老版本浏览器已经使用了很多年,我们依然需要考虑这些版本的兼容性问题.本文要解决的问题就是:在我们使用HTML5/CSS3技术的时候,如何更

HTML5和CSS3新特性一览

HTML5 1.HTML5 新元素 HTML5提供了新的元素来创建更好的页面结构: 标签 描述 <article> 定义页面独立的内容区域. <aside> 定义页面的侧边栏内容. <bdi> 允许您设置一段文本,使其脱离其父元素的文本方向设置. <command> 定义命令按钮,比如单选按钮.复选框或按钮 <details> 用于描述文档或文档某个部分的细节 <dialog> 定义对话框,比如提示框 <summary>