html边框圆角化代码_教程

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

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

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

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

两种方式：

一种：给DIV设置背景图片，背景图片可以设计成圆角。适用范围广。建议使用这一种方法。

另一种：用CSS3技术，设置{-webkit-border-radius:10px-moz-border-radius:10pxborder-radius: 15px}只能在最新的浏览器上使用。IE浏览器基本不支持，当然，你可以导入一些外部文件来使IE支持CSS圆角。

用css样式为html元素设置圆角框是利用border-radius属性实现的。

1、html代码：

<!DOCTYPE html>

<html>

<head>

<style>

div

{

text-align:center

border:2px solid #a1a1a1

padding:10px 40px

background:#dddddd

width:350px

border-radius:25px

-moz-border-radius:25px/* 老的 Firefox */

}

</style>

</head>

<body>

<div>border-radius 属性允许您向元素添加圆角。</div>

</body>

</html>

2、css代码：

div

{