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”,进行更加深入的学习。

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180315G1V1D800?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券