html边框圆角化代码

html-css036

html边框圆角化代码,第1张

html边框圆角化可以用css中的“border-radius”属性来实现。

1、新建html文档,在body标签中添加一个div标签,然后为这个div标签设置边框,这时默认情况下边框是直角:

2、为div标签设置“border-radius”属性,属性值为圆角半径大小,这时边框的四个顶角都会变成圆角:

3、为div标签设置“border-radius”属性,属性值分别对应边框的左上角、右上角、右下角和左下角,这时可以对每个顶角自定义设置圆角半径:

上面这位兄台你的回答是COPY的吧,没有讲到重点不说,洋洋散散那么多字都是多余的,我给你写一句简单的代码。

CSS代码:

<style>

#myDiv {

border-radius: 4px /*这句就是重点,让边框变为圆角*/

border: 1px solid #CCC/*让边框变为1px宽度,直线,#CCC颜色*/

width: 500px

height: 500px

}

</sytle>

HTML代码:

<div id="myDiv">这是圆角矩形</div>

就是这么简单,你COPY过去就OK了。

另外说一句,这个圆角的属性是CSS3中的特性,在IE9以下以及非webkit和moz内核的浏览器下都是不行的(比如IE8、IE7、IE6),这些浏览器就只能使用图片达到圆角效果了。

纯手工制造,希望对你有帮助,有任何疑问可以继续追问。