欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

CSS3实现DIV圆角效果完整代码

程序员文章站 2024-02-02 15:54:16
本实例是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实现DIV圆角效果完整代码


实际效果（请使用支持css3的浏览器）：

本实例是css3实现div圆角。实现圆角的css3代码句是： "border-radius: 20px;" 。需使用支持css3的浏览器运行,例如新版的chrome、火狐，或者ie9。ie6、7、8不支持。

css3教程

上一篇： 汇编语言 输出16进制数

下一篇： app怎么推广？app的营销和推广方法

推荐阅读