PhoneGap中文网

 找回密码
 立即注册
查看: 24896|回复: 5
打印 上一主题 下一主题

css3 中如何创建圆角边框

[复制链接]

493

主题

2035

帖子

6894

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
6894
跳转到指定楼层
楼主
发表于 2013-7-19 18:04:24 | 只看该作者 |只看大图 回帖奖励 |倒序浏览 |阅读模式
CSS3 圆角边框

在 CSS2 中添加圆角矩形需要技巧。我们必须为每个圆角使用不同的图片。

在 CSS3 中,创建圆角是非常容易的。

在 CSS3 中,border-radius 属性用于创建圆角:

这个矩形有圆角哦!





简单实例向 div 元素添加圆角:
  1. div
  2. {
  3. border:2px solid;
  4. border-radius:25px;
  5. -moz-border-radius:25px; /* Old Firefox */
  6. }
复制代码
完整示例:
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. div
  6. {
  7. text-align:center;
  8. border:2px solid #a1a1a1;
  9. padding:10px 40px;
  10. background:#dddddd;
  11. width:350px;
  12. border-radius:25px;
  13. -moz-border-radius:25px; /* 老的 Firefox */
  14. }
  15. </style>
  16. </head>
  17. <body>

  18. <div>border-radius 属性允许您向元素添加圆角。</div>

  19. </body>
  20. </html>
复制代码
it营
回复

使用道具 举报

23

主题

141

帖子

260

积分

中级会员

Rank: 3Rank: 3

积分
260
沙发
发表于 2013-9-27 15:47:25 | 只看该作者
谢谢楼主,共同发展
it营
回复 支持 反对

使用道具 举报

0

主题

108

帖子

116

积分

注册会员

Rank: 2

积分
116
板凳
发表于 2013-9-27 23:28:14 | 只看该作者
路过,支持一下啦
回复 支持 反对

使用道具 举报

0

主题

108

帖子

116

积分

注册会员

Rank: 2

积分
116
地板
发表于 2013-9-30 00:03:55 | 只看该作者
不错不错,楼主您辛苦了。。。
回复 支持 反对

使用道具 举报

4

主题

25

帖子

247

积分

中级会员

Rank: 3Rank: 3

积分
247
5#
发表于 2013-10-24 16:43:34 | 只看该作者
这个不错。。顶
回复 支持 反对

使用道具 举报

0

主题

19

帖子

50

积分

注册会员

Rank: 2

积分
50
6#
发表于 2014-1-14 12:02:40 | 只看该作者
很好,学习了!
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

站长推荐 上一条 /1 下一条

ionic4视频教程

Archiver|手机版|小黑屋| PhoneGap中文网 ( 京ICP备13027796号-1 )  

GMT+8, 2024-11-23 09:47 , Processed in 0.077866 second(s), 33 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表