18
七
Html5不只是个传说
View more presentations from czbad
分类为‘CSS3/HTML5’的日志
28
四
忽然有个古怪的念头, 希望尝试一下把页面做成是横向的排列, 当然, 众所周知的用float方式可以完成, 但是一段连续的内容, 例如一段很长的文字内容, 难道要人工分开一节一节, 没到一屏的高度就去设置一个float的块元素? 这样做明显不妥的. 要想一种办法, 能让文字内容碰到屏幕底部就自动再向右上角新开一列继续.
我们也许有两个法子:
1.writing-mode: tb-lr; 和 layout-flow: vertical-ideographic;
这两个属性都能让内容竖排, 这里所说的竖排, 是指像中国的古文, 至于是由右向左还是左向右, 可以通过tb-lr和tb-rl控制, 没错, tb也可以改成bt..不过要是你这样做的话, 的确比较bt. 这个属性的确不错, 改变了文档流的走向, 能符合要求. 不过可惜的是, 这两个属性只有IE系列支持, 而且这样的文字自上而下的阅读, 也是比较吃力的事情, 毕竟我们不是古人嘛. 另外一个问题是, 这个属性貌似很好资源, 内容多的时候, 我在ie中选定内容, 已经出现延迟的情况了.
提示：你可以先修改部分代码再运行。
2.column-width和column-gap属性
通过设置column-width, 再加上设置块元素的高度, 能让内容在到高度之后, 自动新开一列, 继续显示, column-gap则是用于设置每列的间隔, 这个貌似很合适! 再一次可惜的是, 只有Firefox3.5+/Chrome 1.0+/Safari3+支持这两个属性. column这属性, 其实的确不错, 如果浏览器能支持, 在某些地方上还可以减少float的使用. 希望IE9能开始支持!
提示：你可以先修改部分代码再运行。
20
四
box-sizing属性
这个属性可以用来设定浏览器对盒模型的尺寸计算方式, 有两个值
box-sizing:content-box;
这个设定就是让浏览器按css2.1的盒模型尺寸计算方法.
即像 style=”width:100px;border-with:10px; padding:15px;” 这个设定, 100px 只是内容部分的宽度, 而真实宽度应该是100px+10px*2+15px*2 继续阅读 »
19
四
text-shadow属性
这个属性用于设置字体的投影效果, 参数和含义基本都和之前提及的box-shadow一样(url), 示例代码:text-shadow:2px 2px 2px #999;
支持这个属性的浏览器: Firefox3.1+/Chrome 2.0/Opera 9.5+/Safari3+ … 继续阅读 »
29
三
border-color属性
这个属性本来在css2已经有支持, 但是在css3里面, 多了一个新的设置模式, 让我们看看描述:
“如果你设置了border的宽度是X px，那么你就可以在这个border上使用X种颜色，每种颜色显示1px的宽度。如果说你的border的宽度是10个像素，但是只声明了5或6种颜色，那么最后一个颜色将被添加到剩下的宽度。” 继续阅读 »
04
三
border-image属性是css3中新出现的属性, 相信从名字上来看, 大家已经能知道是用来设置border的背景图的, 但深入对属性值来研究, 却是有超出想像的收获, 可以说, 这个新属性, 很有前途. 我们一起来看看.
先看属性的浏览器支持:
| 类型 | Internet Explorer | Firefox | Chrome | Opera | Safari |
|---|---|---|---|---|---|
| 版本 | (N)IE6 | (N)Firefox 2.0 | (Y)Chrome 1.0.x | (N)Opera 9.64 | (Y)Safari 3.1 |
| (N)IE7 | (N)Firefox 3.0 | (Y)Chrome 2.0.x | (Y)Safari 4 | ||
| (N)IE8 | (Y)Firefox 3.5 |