当前位置： 移动技术网 > IT编程>网页制作>CSS > CSS3实现DIV圆角效果完整代码

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

2019年07月25日  | 移动技术网IT编程  | 我要评论

复制代码
代码如下:

<!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教程

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网