CSS3教程

当前位置: HTML5技术网 > CSS3教程 > CSS3 HTML5实例一(圆角)

CSS3 HTML5实例一(圆角)

CSS 3  HTML 5 是未来的 Web,它们都还没有正式到来,虽然不少浏览器已经开始对它们提供部分支持。本文介绍了 5 个 CSS3 技巧,可以帮你实现未来的Web。目前这些技术不应该用在正式的客户项目,它们更适合你的个人博客站点,Web 设计社区,或者不会有客户向你投诉的场合。

  1. 圆角效果

\
 

  CSS3 新功能中最常用的一项是圆角效果,标准 HTML 方块对象是90度方角的,CSS3 可以帮你实现圆角。

  -moz-border-radius: 20px;

  -webkit-border-radius: 20px;

  border-radius: 20px;

  甚至单个角也可以实现圆角,不过 Mozilla 和 Webkit 的语法稍有不同。

  -moz-border-radius-topleft: 20px;

  -moz-border-radius-topright: 20px;

  -moz-border-radius-bottomleft: 10px;

  -moz-border-radius-bottomright: 10px;

  -webkit-border-top-rightright-radius: 20px;

  -webkit-border-top-left-radius: 20px;

  -webkit-border-bottom-left-radius: 10px;

  -webkit-border-bottom-rightright-radius: 10px;

  所支持的浏览器:Firefox, Safari , Chrome

【CSS3 HTML5实例一(圆角)】相关文章

1. CSS3 HTML5实例一(圆角)

2. CSS3 HTML5实例二(图形化边界)

3. CSS3 HTML5实例三(块阴影与文字阴影)

4. CSS3 HTML5实例四(使用 RGBA 实现透明效果)

5. CSS3 HTML5实例五(使用 @Font-Face 实现定制字体)

6. CSS3系列教程:边框半径和圆角

7. CSS3实现圆角效果

8. 如何让IE浏览器支持CSS3圆角

9. 兼容所有浏览器的CSS3圆角

10. CSS3圆角的实现教程

本文来源:https://www.51html5.com/a775.html

点击展开全部

﹝CSS3 HTML5实例一(圆角)﹞相关内容

「CSS3 HTML5实例一(圆角)」相关专题

其它栏目

也许您还喜欢