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模拟jq点击事件的实例代码
Jul 06 HTML / CSS
css3绘制百度的小度熊
Oct 29 HTML / CSS
CSS实现圆形放大镜狙击镜效果 只有圆圈里的放大
Dec 10 HTML / CSS
一款纯css3实现简单的checkbox复选框和radio单选框
Nov 05 HTML / CSS
css3 实现圆形旋转倒计时
Feb 24 HTML / CSS
CSS3 实现弹跳的小球动画
Oct 26 HTML / CSS
详解HTML5中的元素与元素
Aug 17 HTML / CSS
用html5绘制折线图的实例代码
Mar 25 HTML / CSS
html5+css如何实现中间大两头小的轮播效果
Dec 06 HTML / CSS
Html5移动端网页端适配(js+rem)
Feb 03 HTML / CSS
html5实现点击弹出图片功能
Jul 16 HTML / CSS
HTML中的表单元素介绍
Feb 28 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
FleaPHP的安全设置方法
2008/09/15 PHP
晋城吧对DiscuzX进行的前端优化要点
2010/09/05 PHP
php读取文件内容的几种方法详解
2013/06/26 PHP
PHP查询快递信息的方法
2015/03/07 PHP
PHP的自定义模板引擎
2017/03/24 PHP
广告显示判断
2006/08/31 Javascript
JavaScript 不只是脚本
2007/05/30 Javascript
理解Javascript_09_Function与Object
2010/10/16 Javascript
Javascript实现DIV滚动自动滚动到底部的代码
2012/03/01 Javascript
javascript ie6兼容position:fixed实现思路
2013/04/01 Javascript
jQuery切换网页皮肤并保存到Cookie示例代码
2014/06/16 Javascript
限制复选框最多选择项的实现代码
2016/05/30 Javascript
jQuery实现倒计时(倒计时年月日可自己输入)
2016/12/02 Javascript
原生javascript实现文件异步上传的实例讲解
2017/10/26 Javascript
JS常见DOM节点操作示例【创建 ,插入,删除,复制,查找】
2018/05/14 Javascript
vsCode安装使用教程和插件安装方法
2020/08/24 Javascript
原生JS实现相邻月份日历
2020/10/13 Javascript
使用python统计文件行数示例分享
2014/02/21 Python
Python发送form-data请求及拼接form-data内容的方法
2016/03/05 Python
浅谈Django自定义模板标签template_tags的用处
2017/12/20 Python
python3+selenium实现qq邮箱登陆并发送邮件功能
2019/01/23 Python
pyqt5 实现多窗口跳转的方法
2019/06/19 Python
Python处理时间日期坐标轴过程详解
2019/06/25 Python
用Python 爬取猫眼电影数据分析《无名之辈》
2020/07/24 Python
运行python提示no module named sklearn的解决方法
2020/11/29 Python
CSS3 边框效果
2019/11/04 HTML / CSS
Skyscanner澳大利亚:全球领先的旅游搜索网站
2018/03/24 全球购物
Wolford法国官网:奥地利奢侈内衣品牌
2020/08/11 全球购物
拓展培训心得体会
2014/01/04 职场文书
一份创业计划书范文
2014/02/08 职场文书
出生公证委托书
2014/04/03 职场文书
暑期社会实践新闻稿
2015/07/17 职场文书
再也不用花钱买漫画!Python爬取某漫画的脚本及源码
2021/06/09 Python
Spring Boot 启动、停止、重启、状态脚本
2021/06/26 Java/Android
如何使用pdb进行Python调试
2021/06/30 Python
在NumPy中深拷贝和浅拷贝相关操作的定义和背后的原理
2022/04/14 Python