css实现圆角的几种方法是什么？

html-css048

css实现圆角的几种方法是什么？,第1张

有四种方法可以实现圆角。

第一、直接写CSS代码：border-radius

第二、四个圆角贴图；制作四个圆角的图片，然后用css定义

第三、直接制作整个圆角矩形背景

第四、定义12个背景色：左上角4个，右上角4个，右下角4个，左下角4个。

css3最简单：

border-radius:10px---4个角都是10px的圆角。

你也可以：border-radius:2px 3px 4px 5px分别对应容器的右上、右下、左下、坐上。

如果是css2的话，需要用到图片来实现圆角。

用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

{

text-align:center

border:2px solid #a1a1a1

padding:10px 40px

background:#dddddd

width:350px

border-radius:25px

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

}

3、实现效果：