CSS3的新特性介绍


Posted in HTML / CSS onOctober 31, 2008

边框:(Borders)
border-color:控制边框颜色,并且有了更大的灵活性,可以产生渐变效果
border-image:控制边框图象
border-corner-image:控制边框边角的图象
border-radius:能产生类似圆角矩形的效果
背景(Backgrounds)
background-origin:决定了背景在盒模型中的初始位置,提供了3个值,border, padding和content
border:控制背景起始于左上角的边框
padding:控制背景起始于左上角的留白
content:控制背景起始于左上角的内容
background-clip:决定边框是否覆盖住背景(默认是不覆盖),提供了两个值,border和padding
border:会覆盖住背景
padding:不会覆盖背景
background-size:可以指定背景大小,以象素或百分比显示。当指定为百分比时,大小会由所在区域的宽度、高度,以及background-origin的位置决定
multiple backgrounds:多重背景图象,可以把不同背景图象只放到一个块元素里。
文字效果:(Text effects)
text-shadow:文字投影,可能是因为MAC OSX的Safari浏览器开始支持投影才特意增加的。
text -overflow:当文字溢出时,用"..."提示。包括ellipsis、clip、ellipsis-word、inherit,前两个CSS2就有了,目前还是部分支持,但有趣的是IE6居然也支持。ellipsis-word可以省略掉最后一个单词,对中文意义不大,inherit可以继承父级元素。
颜色:(Color)
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 colors:和HSLA colors类似,加了个不透明度
用户界面(User-interface)
resize:可以由用户自己调整div的大小,有horizontal(水平)vertical(垂直)或者both(同时),或者同时调整。如果再加上max-width或min-width的话还可以防止破坏布局
选择器:(Selectors)
Attribute selectors:在属性中可以加入通配符,包括^,$,*
[att^=val]:表示开始字符是val的att属性
[att$=val]:表示结束字符是val的att属性
[att*=val]:表示包含至少有一个val的att属性
其它模块:(Other modules)
media queries:感觉叫媒体选择比较合适,可以为网页中不同的对象设置不同的浏览设备。比如可以为某一块分别设置屏幕浏览样式和手机浏览样式,以前则只能设置整个网页。
multi-column layout:多列布局,让文字以多列显示,包括column-width、column-count、column-gap三个值
column-width:指定每列宽度
column-count:指定列数
column-gap:指定每列之间的间距
column-rule-color:控制列间的颜色
column-rule-style:控制列间的样式
column-rule-width:控制列间的宽度
column-space-distribution:平均分配列间距

HTML / CSS 相关文章推荐
使用css3背景渐变中的透明度来设置不同颜色的背景渐变
Mar 31 HTML / CSS
使用CSS3实现圆角,阴影,透明
Dec 23 HTML / CSS
深入浅析css3 border-image边框图像详解
Nov 24 HTML / CSS
CSS3制作圆角图片和椭圆形图片
Jul 08 HTML / CSS
CSS3 文字动画效果
Nov 12 HTML / CSS
HTML5实现视频直播功能思路详解
Nov 16 HTML / CSS
基于 HTML5 的 WebGL 3D 版俄罗斯方块的示例代码
May 28 HTML / CSS
整理HTML5的一些新特性与Canvas的常用属性
Jan 29 HTML / CSS
基于HTML5陀螺仪实现ofo首页眼睛移动效果的示例
Jul 31 HTML / CSS
canvas绘制太极图的实现示例
Apr 29 HTML / CSS
HTML5 Blob对象的具体使用
May 22 HTML / CSS
使用CSS实现百叶窗效果示例代码
May 07 HTML / CSS
CSS3属性选择符介绍
Oct 17 #HTML / CSS
CSS3教程:background-clip和background-origin
Oct 17 #HTML / CSS
细说CSS3中的选择符
Oct 17 #HTML / CSS
css3 给背景设置渐变色的方法
Sep 12 #HTML / CSS
css3中用animation的steps属性制作帧动画
Apr 25 #HTML / CSS
css3 中实现炫酷的loading效果
Apr 26 #HTML / CSS
使用 css3 transform 属性来变换背景图的方法
May 07 #HTML / CSS
You might like
收音机术语解释
2021/03/01 无线电
关于PHP中的Class的几点个人看法
2006/10/09 PHP
PHP实现动态获取函数参数的方法示例
2018/04/02 PHP
javascript 密码强度验证规则、打分、验证(给出前端代码,后端代码可根据强度规则翻译)
2010/05/18 Javascript
$.each遍历对象、数组的属性值并进行处理
2014/07/18 Javascript
javascript中var的重要性分析
2015/02/11 Javascript
jquery及js实现动态加载js文件的方法
2016/01/21 Javascript
jquery分页插件jquery.pagination.js实现无刷新分页
2016/04/01 Javascript
JS动态插入并立即执行回调函数的方法
2016/04/21 Javascript
Bootstrap嵌入jqGrid,使你的table牛逼起来
2016/05/05 Javascript
浅谈JavaScript中数组的增删改查
2016/06/20 Javascript
Jquery针对tr td的一些实用操作方法(必看篇)
2016/10/05 Javascript
jQuery监听文件上传实现进度条效果的方法
2016/10/16 Javascript
基于jquery实现的鼠标悬停提示案例
2016/12/11 Javascript
JS高仿抛物线加入购物车特效实现代码
2017/02/20 Javascript
JavaScript 中的12种循环遍历方法【总结】
2018/05/31 Javascript
Nginx设置为Node.js的前端服务器方法总结
2019/03/27 Javascript
js简单遍历获取对象中的属性值的方法示例
2019/06/19 Javascript
详解如何使用React Hooks请求数据并渲染
2020/10/18 Javascript
微信小程序实现日历小功能
2020/11/18 Javascript
python使用matplotlib画饼状图
2018/09/25 Python
Python实现线性插值和三次样条插值的示例代码
2019/11/13 Python
基于python3的socket聊天编程
2020/02/17 Python
利用Python实现斐波那契数列的方法实例
2020/07/26 Python
HTML5中如何显示视频呢 HTML5视频播放demo
2013/06/08 HTML / CSS
英国领先的游戏零售商:GAME
2019/09/24 全球购物
索引覆盖(Index Covering)查询含义
2012/02/18 面试题
老师对学生的评语
2014/04/18 职场文书
酒店管理专业毕业生求职自荐信
2014/04/28 职场文书
应届硕士毕业生自荐信
2014/05/26 职场文书
2015年医院创卫工作总结
2015/04/22 职场文书
党员转正意见怎么写
2015/06/03 职场文书
初中政教处工作总结
2015/08/12 职场文书
2015年度个人工作总结报告
2015/10/24 职场文书
如何撰写出一份完美的商业计划书?
2019/07/12 职场文书
你真的会用Mysql的explain吗
2022/03/31 MySQL