CSS3完成DIV圆角实际效果详细编码

2021-01-20 12:50 jianzhan

拷贝编码
编码以下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3完成DIV圆角 - CSS3实例教程 - 方案 - blog园</title>
<meta name="keywords" content="www.jb51.net"/>
<style type="text/css"> #yuanjiao{
font-family: Arial;
border: 2px solid #379082;
border-radius: 20px;
padding: 30px 30px;
width: 330px;
}</style>
</head>
<body>
<div id="yuanjiao">
本案例是CSS3完成DIV圆角。完成圆角的CSS3编码句是： "border-radius: 20px;" 。需应用适用CSS3的访问器运作,比如新版的Chrome、火狐，或IE9。IE6、7、8不适用。

脚本制作之家CSS3实例教程

</div>
</body>
</html>

实际效果图(Chrome)：


具体实际效果（请应用适用CSS3的访问器）：

本案例是CSS3完成DIV圆角。完成圆角的CSS3编码句是： "border-radius: 20px;" 。需应用适用CSS3的访问器运作,比如新版的Chrome、火狐，或IE9。IE6、7、8不适用。

脚本制作之家CSS3实例教程

为您推荐