CSS3就是这么神奇，先从border-radius开始

border-radius属性

上一期介绍了在“设计”视图下利用

盒子进行布局，那么怎么让div盒子有圆角边框呢？

01

在Dreamweaver CS6中不能直给接

添加“border-radius”属性，需要手动输入CSS样式，这是因为“border-radius”是CSS3的新属性。

02

利用该属性应该注意浏览器版本的兼容性问题，如果是IE浏览器8或以下，其效果不能正常显示，因此为了获得更好的视觉效果，建议使用谷歌浏览器或者360浏览器进行网页的预览。

03

那么怎样给

手动添加CSS样式呢？

启动Dreamweaver CS6，将视图切换为“拆分”，找到

标签内部的“style”属性，在原有CSS样式末尾输入：“border-radius:10px”，保存网页，按快捷键“F12”进行预览。

假如

盒子的长度和宽度都是200px，将border-radius=100px，效果又会是如何呢？具体HTML代码如下：

同学们可以把这写代码复制到之间，保存网页，进行预览，你将有惊奇的发现哦。

Tips

好了本期的内容就介绍到这里，感兴趣的同学，可以打开百度输入“border-radius”，进行更加深入的学习。