1. Border-radius
Border-radius 應該是css3最常用的功能了。以前要做round corner真的有點費力,而且你還得用各個browser去test下有沒問題,費時失事。有了border-radius就不用再煩了。
雖然舊版browser也不可能顯示round corner了,可是正因為你知道,所以也就省了看的時間了!可以肯定新的browser看起來都大同小異了,而且不用自己加圖,轉顏色也就方便得多了。再說用新browser的人肯定是會更多的,所以情況也不會變壞。
圓角的設定就這樣一句,支持css3的browser就可以看明白了。
#myDiv { border-radius: 15px; }
再保險一點的做法,就是加上webkit或moz過渡時期用的-moz-border-radius和-webkit-border-radius。
border-radius: 15px; -moz-border-radius: 3px; /* 舊firefox 也許明白 */ -webkit-border-radius: 3px; /* 舊webkit browser也許明白 */
2. Box-shadow
打陰影也是現在很流行的做法,就好像女人出街要化妝一樣。基本上IE9就支持box-shadow了,所以IE9 render的網頁,有時會比以前的IE靚很多,當然也有例外(網頁沒有對針IE9做修改)。
Box-shadow一次食6個parameter: inset?, horizontal offset, vertical offset, optional blur distance, optional spread distance, color。
例如:
box-shadow:15px 15px; box-shadow:inset 10px 10px 10px 10px #000;
box-shadow:inset 10px 10px 10px 10px #000; border-radius: 15px;
3. CSS 3 Selectors
會用css的都知道在css語法中,你首先就要指定你接下來的一堆css會用在那裡。以前可以用class(.)或id(#)去select目標,現在css3支持用attribute來select dom 物件了。
p[title^=xx] {color:blue} /* select p with title attribute starting with xx */ p[title$=yy] {color:blue} /* select p with title attribute ending with yy */ p[title*=zz] {color:blue} /* select p with title attribute containing zz */
相关推荐
《疯狂html 5/css 3/javascript讲义》是一本全面介绍html 5、css 3和javascript前端开发技术的图书,系统地介绍了html 5常用的元素和属性、html 5的表单元素和属性、html 5的绘图支持、html 5的多媒体支持、css 3的...
《疯狂HTML 5/CSS3/JavaScript讲义》是一本全面介绍HTML 5、CSS3和JavaScript前端开发技术的图书,系统地介绍了HTML 5常用的元素和属性、HTML 5的表单元素和属性、HTML5的绘图支持、HTML 5的多媒体支持、CSS3的功能...
第二部分:详细地介绍了CSS 3的绝大部分常用选择器、属性,并为这些 选择器、属性提供了示例,方便广大读者参考本书全面、系统地掌握CSS 3的 功能和用法。这部分内容也可以作为前端开发者的参考手册。 第三部分:...
CSS3 @font-face实现个性化字体 制作页面的时候,我们常用“font-family ”来定义字体,然而我们用“font-family “定义的字体在用户的浏览器中是否可以呈现取决于用户的电脑上是否有安装我们定义的字体。在网络上...
CSS3 3D 转换的常用API介绍 CSS3 3D 应用场景 CSS3 3D 实现一个立方体 开始 1.CSS3 3D 转换的常用API介绍 首先先上一张css 3D的坐标系: 接下来我们来介绍几个常用的api: 旋转 rotateX() rotateY() ...
精彩绝伦的CSS 英文原版pdf CSS专家Eric A. Meyer新作 全面解说CSS现代技巧和最佳实践 Smashing杂志专业策划 ...第三部分介绍前沿技术,主要是最新HTML5 和CSS3 技术。 本书适合所有Web 开发与设计人员学习参考。
HTML5最新标签使用介绍,CSS3常用样式介绍。
本书将最有用的CSS技术汇总在一起,在介绍基本的CSS概念和最佳实践之后,讨论了核心的CSS技术,例如图像、链接、列表操纵、表单设计、数据表格设计以及纯CSS布局。每一章内容由浅入深,直到建立比较复杂的示例。之后...
以下就是这些写法的详细介绍。所有代码都经过了Firefox 3.6和IE 8.0的验证。 一、圆角(Rounded Corner) 复制代码代码如下: .box_round { -moz-border-radius: 30px; /* FF1+ */ -webkit-border-radius: 30px; /* ...
本书是一本全面介绍HTML 5、CSS 3和JavaScript前端开发技术的图书,系统地介绍了HTML 5常用的元素和属性、HTML 5的表单元素和属性、HTML 5的绘图支持、HTML 5的多媒体支持、CSS 3的功能和用法、最前沿的变形与动画...
本书是一本全面介绍HTML 5、CSS 3和JavaScript前端开发技术的图书,系统地介绍了HTML 5常用的元素和属性、HTML 5的表单元素和属性、HTML 5的绘图支持、HTML 5的多媒体支持、CSS 3的功能和用法、最前沿的变形与动画...
揭秘HTML5和CSS3的ppt文档,介绍一些常用的标签,如何使用
主要简单介绍了CSS3中Media Query的使用,包括其中一些常用的属性功能,需要的朋友可以参考下
animate.css是一个使用CSS3的animation制作的动画效果的CSS集合,里面预设了很多种常用的动画,且使用非常简单。本文将详细介绍animate.css的使用
1.常用选择器 2. 子选择器与相邻同胞选择器 3. 属性选择器 4. 浏览器对CSS选择器的支持情况
Dreamweaver CS4新增了很多令人惊喜的新功能,在本章中通过个人主页、新闻查看页和博客首页3个实例详细介绍如何使用该软件设计符合Web标准的网页,以及使用CSS设计页面布局时的常用解决方案。 学习目标: ...
css3新增了相对单位 rem ,使用rem同em一样皆为相对字体大小单位,不同的是rem相对的是HTML根元素。鉴于很多网友提到了rem,所以我这里就对其中一个总结。 在Web中使用什么单位来定义页面的字体大小,至今天为止都还...
全面介绍HTML 5、CSS 3和JavaScript前端开发技术的图书,系统地介绍了HTML 5常用的元素和属性、HTML5的表单元素和属性、HTML 5的绘图支持、HTML5的多媒体支持、CSS 3的功能和用法、最前沿的变形与动画功能等
其他 CSS3 选择器用法请查看 CSS3 selectors explained 这篇文章,此外,W3C CSS3 选择器官方文档 Selectors Level 3 W3C Recommendation 29 September 2011 记录在这里留待有疑问的时候查看。 1. * * { margin...