悠悠博客 关注Ajax技术与web开发

在网页的设计中，巧妙的运用各种样式的边框可以让你的网页层次分明，具有很好的用户友好性，也能使网页更加美观，我简单的介绍一下css中实现虚线边框的方法。

其实很简单，只需要运用border的dotted属性就可以了，代码如下：

效果如下：

其中1px 是边框的宽度，gray 是边框的颜色，dotted就是边框的线型了，实现是dashed，虚线就是dotted，padding:4px是div内容与边框的补白，也就是间隔。

CSS3的Spec已经接近尾声，我相信在IE8和各种主流浏览器中将会得到支持。对比于当前CSS最高版本，CSS3做了很大的改动，初步浏览了一下CSS3的Spec，发现了一个很有用的功能就是在css3的规范中可以直接通过CSS来实现分栏、布局表格还有图片的定位等。效果如下图：

实现这样的布局只需要如下的CSS代码：

通过这段代码，可以实现3行6列的布局，并且可以定位图片到哪几个单元格中。其中“float:page top right;”是使表格浮动在页面上方的顶部，“width:3gr”是指图片的宽度跨越3个"grid unit"即3个单元格，注意这里的3gr必须是在所有Grid内部的，外围的不计算在内。详细的解释可以参照W3C官方文档。

在设计网页时，我们会经常遇到文字布局不能随意的问题，基本局限在矩形的范围内，如果没有图形的辅助，给人的感觉就是方方正正，规规矩矩，有没有办法来解决这个问题呢？现在，有一款新的工具  CSS Text Wrap. 来帮助你，让你的网页布局可以灵活多变。

 CSS text Wrap可以让你的文字布局告别方框的时代。使用起来也很简单，只需要定义边框，然后把html代码复制到相应的地方就行了，具体的介绍可以看官方的文档。下面是一个很简单的例子：

下面是效果：