CSS3实现DIV圆角效果完整代码
程序员文章站
2023-11-28 13:37:04
本实例是CSS3实现DIV圆角。实现圆角的CSS3代码句是： "border-radius: 20px;" 。需使用支持CSS3的浏览器运行,例如新版的Chrome、火狐，或者IE9。IE6、7、8不支持... 12-10-10...
复制代码
代码如下:<!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教程 - 计划 - 博客园</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教程
css3教程
上一篇： 解析php中如何调用用户自定义函数
下一篇： linux命令行修改IP的2个方法