白话CSS3的新特性
声明:这篇文章不是手册,所以不会说的很详细,只是告诉初学者CSS3显著的改进有啥,高手老手绕行。
一、在边框上的改进
1.可以给方框加圆角了,值越大越圆,解决了过去大方框的不美观
2.可以给控件加阴影了,让控件看着更立体
3.可以用图片做边框了,用类似于相框的图片最好。
二、背景上的改进
1.可以规定background-image的图片的大小/比例了,不像原来傻乎乎平铺或严丝合缝的切图。
2.可以规定做背景图片所处的位置了,根据CSS盒模型的 border、padding和context的位置放背景图片。
3.可以用多个背景图片作为一个背景呈现了,不过个人觉得这样不太好,中国这网速渲染背景得多费劲儿。
三、文本上的改进
1.给文本加阴影,这是逮着一种效果往死里用啊,阴影无处不在。
2.可以自动换行了
3.可以修剪文本了,如果文本超出区域我又不想换行,可以修剪,剪成省略的...也好,简单粗暴的不显示也罢,都可以。
4.可以超脱p标签的限制和繁琐的缩进换行,让文本并列显示,类似于报纸的效果,一列一列的。
四、字体上的改进
1.当设计师们给我们千奇百怪的字体网站素材的时候我们很头疼,现在不必了,我们可以自定义字体,而且这种字体能够被用户的浏览器自动下载使用,这功能挺好,哈哈。PS:这种实现方法不是平常的CSS键值对,而是单用{}弄出来一个组。
五、素材的二维转换
1.我们现在可以对设计师们给的素材进行平移、放大、缩小、拉伸、转动操作,这是要撇开PS和JS的节奏啊。
六、素材的三维转换
1.当然现在主要的特效还是在 旋转上,有待完善啊。
七、元素的过渡
1.啥叫过渡?以上的2、3D转化它只是静止状态的,所以有了过渡。怎么实现捏?从当前状态到期望状态有一个过程,过去我们用JS实现,现在用CSS键值对就可以了,值里面附上属性和时间就OK了,利用伪类里的值作为目标进行触发,这也挺好。
2.如果这过渡只是单行也没啥值得夸耀,它可以并行发生,挺好!
八、动画效果
1.跟过渡一个原理,只是不用伪类触发,它是连贯的自动发生的,相当于 setInterval里的脚本
九、盒模型上的改进
1.以后用户再想调节网页内容显示的大小可以不用拖拽浏览器了,在元素上拖拽就可以。
2.又多了一个轮廓,不用div套div再费劲调居中也能实现的效果,就是再加个边框。当然IE和欧朋现在是不支持滴。
就先总结这么多,以后再丰富
白话CSS3的新特性的更多相关文章
- HTML5和CSS3的新特性
html5的新特性 添加了用于媒介回放的 <video>,<audio> 元素 添加了语义标签譬如 header.footer.nav 等等元素 添加了用于绘画的 canvas ...
- css3的新特性选择器-------属性选择器
自己学css的时候比较乱,这次趁着复习把css3的新特性选择器和css2以前不怎么用的选择器做一个总结 <div id="parent"> <p>I'm a ...
- CSS3常用新特性
CSS3的新特性 新增CSS3特性有兼容性问题,ie9+才支持 移动端支持优于PC端 新增选择器和盒子模型以及其他特性 CSS新增选择器 属性选择器 属性选择器可以根据元素特定属性来选择元素,这样就可 ...
- CSS3的新特性
CSS3中增加的新特性: (1)选择器的种类 (2)字体 font (3)text-overflow (4)文本渲染 text-decoration (5)多列布局 column-count (6)R ...
- HTML5、CSS3等新特性:
HTML5:1/绘画 canvas 元素;2/用于媒介回放的 video 和 audio 元素;3/本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失;4/sessionSt ...
- css3的新特性transform,transition,animation
一.transform css3引入了一些可以对网页元素进行变换的属性,比如旋转,缩放,移动,或者沿着水平或者垂直方向扭曲(斜切变换)等等.这些的基础都是transform属性 transform属性 ...
- CSS3的新特性整理
animation IE10 animation的六大属性 animation-name规定需要绑定选择器的keyframe名称 animation-duration规定完成动画所花费的时间 s ...
- CSS/CSS3语法新特性笔记
CSS层叠样式表 三大特性 层叠性:相同的样式会覆盖 继承性:属性可向下继承 优先级:范围越小权重越高 选择器 基础选择器 标签选择器 1 body { 2 color:#fff; 3 } 类选择器 ...
- CSS3部分新特性
1.旋转transform:rotate(30deg);-ms-transform:rotate(30deg); /* IE 9 */-moz-transform:rotate(30deg); /* ...
随机推荐
- [转]浅谈Python web框架
说到web framework,Ruby的世界Rails一统江湖,而Python则是一个百花齐放的世界,各种micro-framework.framework不可胜数,不完全列表见:http://wi ...
- OracleINSERT提示IGNORE_ROW_ON_DUPKEY_INDEX
OracleINSERT提示IGNORE_ROW_ON_DUPKEY_INDEX insert提示IGNORE_ROW_ON_DUPKEY_INDEX 在 insert into table a() ...
- Linux ls -l内容详解
ls -l是列出当前目录下所有文件信息 以下是实例: 具体的文字描述如下: 第1字段: 文件属性字段文件属性字段总共有10个字母组成,第一个字母表示文件类型,如果这个字母是一个减号”-”,则说明该文 ...
- Oracle Imp and Exp (导入和导出) 数据 工具使用
Oracle 提供两个工具imp.exe 和exp.exe分别用于导入和导出数据.这两个工具位于Oracle_home/bin目录下. 导入数据exp 1 将数据库ATSTestDB完全导出,用户名s ...
- mac media server
近日在mac osx基于开源组件nginx-rtmp-module架设了一台默认的media server,以下是过程笔记 下载https://github.com/arut/nginx-rtmp-m ...
- AMD 和 CMD as lazy as possible
http://blog.chinaunix.net/uid-26672038-id-4112229.html AMD 与 CMD 区别到底在哪里? 看了以上 AMD,requireJS 与 ...
- MVC 中的@Html.DropDownList下拉框的使用
MVC 中的下拉框 实现方式,下面为大家介绍一个我自己认为比较好用的实现方式,而二话不说直接上代码: 第一步: 后台代码 //公共的方法 //在每次需要展示下拉框的时候,需要调用一下这个方法 [数据源 ...
- unity工具IGamesTools之批量生成帧动画
unity工具IGamesTools批量生成帧动画,可批量的将指定文件夹下的帧动画图片自动生成对应的资源文件(Animation,AnimationController,Prefabs) unity工 ...
- [转载]求平方根sqrt()函数的底层算法效率问题
我们平时经常会有一些数据运算的操作,需要调用sqrt,exp,abs等函数,那么时候你有没有想过:这个些函数系统是如何实现的?就拿最常用的sqrt函数来说吧,系统怎么来实现这个经常调用的函数呢? 虽然 ...
- 四则运算之C++版
一.设计思想 之前的版本是用Java语言实现的,在这次的练习中,我用C++语言将其功能逐一实现,其实C++与Java有很多相似之处,只是一些书写格式不同,思路还是一样的. 二.源代码 #include ...