CSS3.0 的介绍 CSS3的介绍

CSS3中新技术:圆角、个别圆角、不透明度、阴影和调整元素大小

 

CSS3.0在CSS2.0基础上有那些常用改进，以下是CSS3.0特点（功能）： 

1. CSS3圆角
2. css3.0美化边框颜色
3. 阴影
4. CSS 3.0对背景图片(背景大小和多背景图)
5. 嵌入字体/网络字体
6. CSS3 RGBA颜色
   浏览器的透明一直无法实现 单纯的颜色透明，每次使用alpha后就会把透明的属性继承到子节点上。换句话说，很难实现 背景颜色透明 而文字不透明的效果…直到 RGBA 颜色的出现这一切将成为现实。
7. 透明度

 

     但是我们要考虑到用户体验来开发和优化制作出好的页面，需要考虑不仅效果好看，更要考虑到用户的浏览器是否支持，所以我们现在尽量不用CSS3.0新CSS样式。

     解决以上的特效问题我们可以用图片背景来代替，等以后各大浏览器兼容后再用CSS最新的样式属性开发漂亮的网页。
这里提供中文版CSS3.0手册供大家下载查看参考-CSS3.0中文版手册下载（可点鼠标右键另存为）。

 

CSS3 中的 Gird 布局

Published at Dec 19, 11pm / Keywords: css3, gird

刚刚看了一份 W3C CSS3 的文档，是关于 Gird （网格？）布局草案的说明。无论它最终实现是否如草案中的描述，但这个功能本身就已经足够吸引人了。

我们看看下面这张图：

图中蓝色的线不会出现在实际的网页中。对于这个布局复杂的三栏网页来说，如果使用 CSS3 Gird 布局的话，我们只需这样写：

body { columns:3; column-gap:0.5in; }

img { float:page top right; width:3gr; }

     其中，body 部分声明页面为 3 栏，栏间距为 0.5英寸；img 中 float 属性指明图片浮动位置为页面的右上角（CSS3 定位好强大 -__-），而宽度为 3 个栏宽。只需这样两行 CSS，我们就可以实现这个复杂的布局了。真的很神奇。

     Gird 布局是好，不过如果你认为它很简单的话，你就大错特错了。看看 w3c 中关于它的介绍，你会发现理解它的意义不亚于看懂天书。好在还是个草案，但愿它到了正式版的时候，能够更加简单易用点。

     Gird 布局应用很广泛，最简单的例子就是内容的分栏显示。但这个 CSS3 特性目前还没有任何浏览器可以支持它。谁要是能第一个支持它（以及其它 CSS3 草案），那就酷毙了。不知道，最近异常低调的 IE8，会不会是这第一个吃螃蟹的人呢？