CSS3就是这么神奇，先从border-radius开始
Posted 小学信息
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS3就是这么神奇，先从border-radius开始相关的知识，希望对你有一定的参考价值。
border-radius属性
上一期介绍了在“设计”视图下利用<div>盒子进行布局，那么怎么让div盒子有圆角边框呢？
在Dreamweaver CS6中不能直给接<div>添加“border-radius”属性，需要手动输入CSS样式，这是因为“border-radius”是CSS3的新属性。
02
利用该属性应该注意浏览器版本的兼容性问题，如果是IE浏览器8或以下，其效果不能正常显示，因此为了获得更好的视觉效果，建议使用谷歌浏览器或者360浏览器进行网页的预览。
03
那么怎样给<div>手动添加CSS样式呢？
启动Dreamweaver CS6，将视图切换为“拆分”，找到<div>标签内部的“style”属性，在原有CSS样式末尾输入：“border-radius:10px”，保存网页，按快捷键“F12”进行预览。
假如<div>盒子的长度和宽度都是200px，将border-radius=100px，效果又会是如何呢？具体html代码如下：
<div class="box" style="width:200px;height:200px;border:3px solid red;margin:15px auto;text-align:center;border-radius:100px; ">
</div>
同学们可以把这写代码复制到<body></body>之间，保存网页，进行预览，你将有惊奇的发现哦。
好了本期的内容就介绍到这里，感兴趣的同学，可以打开百度输入“border-radius”，进行更加深入的学习。
后台回复“dw”，
获得DreamweaverCS6软件
以上是关于CSS3就是这么神奇，先从border-radius开始的主要内容，如果未能解决你的问题，请参考以下文章