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实现3D旋转书本效果
Mar 21 HTML / CSS
7款设计巧妙的css3飘带状3D立体效果的导航菜单和表单窗口
Feb 04 HTML / CSS
利用纯CSS3实现动态的自行车特效源码
Jan 20 HTML / CSS
css3 中translate和transition的使用方法
Mar 26 HTML / CSS
css3中less实现文字长阴影(long shadow)
Apr 24 HTML / CSS
css3实现简单的白云飘动背景特效
Oct 28 HTML / CSS
HTML5之WebGL 3D概述(下)—借助类库开发及框架介绍
Jan 31 HTML / CSS
html5简介及新增功能介绍
May 18 HTML / CSS
html2canvas生成的图片偏移不完整的解决方法
May 19 HTML / CSS
background-position百分比原理详解
May 08 HTML / CSS
六个好看实用的 HTML + CSS 后台登录入口页面
Apr 28 HTML / CSS
css如何把元素固定在容器底部的四种方式
Jun 16 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
php在线打包程序源码
2008/07/27 PHP
php结合飞信 免费天气预报短信
2009/05/07 PHP
解析PHP中的正则表达式以及模式匹配
2013/06/19 PHP
ThinkPHP权限认证Auth实例详解
2014/07/22 PHP
php常见的魔术方法详解
2014/12/25 PHP
php获得网站访问统计信息类Compete API用法实例
2015/04/02 PHP
Zend Framework连接Mysql数据库实例分析
2016/03/19 PHP
Yii框架小部件(Widgets)用法实例详解
2020/05/15 PHP
jquery获得下拉框值的代码
2011/08/13 Javascript
浅谈JavaScript函数节流
2014/12/09 Javascript
node.js中的fs.readlink方法使用说明
2014/12/17 Javascript
纯JavaScript实现获取onclick、onchange等事件的值
2014/12/29 Javascript
JQuery选择器、过滤器大整理
2015/05/26 Javascript
分享我的jquery实现下拉菜单心的
2015/11/29 Javascript
jQuery限制图片大小的方法
2016/05/25 Javascript
jQuery无刷新上传之uploadify3.1简单使用
2016/06/18 Javascript
BootStrap 表单控件之单选按钮水平排列
2017/05/23 Javascript
修改npm全局安装模式的路径方法
2018/05/15 Javascript
详解如何在vue项目中使用eslint+prettier格式化代码
2018/11/10 Javascript
layui 图片上传+表单提交+ Spring MVC的实例
2019/09/21 Javascript
Python中的魔法方法深入理解
2014/07/09 Python
python实现网站的模拟登录
2016/01/04 Python
Python如何import文件夹下的文件(实现方法)
2017/01/24 Python
200 行python 代码实现 2048 游戏
2018/01/12 Python
python实现归并排序算法
2018/11/22 Python
pyqt 多窗口之间的相互调用方法
2019/06/19 Python
解决jupyter notebook import error但是命令提示符import正常的问题
2020/04/15 Python
python中加背景音乐如何操作
2020/07/19 Python
美国中小型企业领先的办公家具供应商:Office Designs
2016/11/26 全球购物
TripAdvisor德国:全球领先的旅游网站
2017/12/07 全球购物
WatchShop法国:英国排名第一的独立手表零售商
2020/02/17 全球购物
办公室前台岗位职责范本
2013/12/10 职场文书
个人求职意向书
2015/05/11 职场文书
离婚起诉书范本
2015/05/18 职场文书
2016教师节感恩话语
2015/12/09 职场文书
Python torch.flatten()函数案例详解
2021/08/30 Python