行使 CSS+Jquery 实现页面圆角框结果

１，无图片纯css圆角框

收录来由：兼容性强，不消图形

图一

特点：

1.不消任何图形，行使许多个div容器模仿出圆角结果。

2.兼容性：通杀全部赏识器

弱点：

1.结构这个圆角必要插手太多的无语义的标签，布局较量冗余。

2.重用性不强：假如一个页面有多个圆角，而且要实现差异的半径巨细，则其机动性不足。

3.边框颜色固然可以调理，但会对页面中的布局发生致命的影响，合用于色彩单一而且一个页面中圆角应用不多的页面。

4.不轻易实现圆弧内有渐变色的图形配景。

5.圆角框不足油滑，有锯齿征象，得当于配景致和当前色色差不大而且圆弧较小的网页。

实现道理：

用许多1像素高的div容器，操作配景致和边框色来模仿出圆角框的外观线。

实例演示： http://www.cssplay.co.uk/boxes/snazzy.html

２，无图片纯css圆角框，用非凡字符（&bull）

收录来由：油滑，不消图形

图二

特点：

1.不消任何图形，行使非凡字符•（圆点）模仿出圆角。

2.兼容性：通杀全部赏识器

3.圆角滑腻

弱点：

1.结构这个圆角一样必要插手无语义的标签，布局冗余，同第一种一样。

2.重用性不强：假如一个页面有多个圆角，而且要实现差异的半径巨细，必要调解四个角图片的定位，而且字符巨细对其有影响，机动性不足。

3.颜色虽可调理，但要求内里的配景致和字符的颜色沟通，不能做成边框线条。合用于色彩单一而且一个页面中圆角不是太多的页面。

4.一样不轻易实现圆弧内有渐变色的图形配景。

实现道理：

用非凡字符（&bull），操作定位，截取四分之一圆模仿出圆角框的一个角图片。

实例演示：http://www.cssplay.co.uk/boxes/curves.html

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!