CSS实现绝对的完美圆角框

儒雅的小噶

儒雅的小噶

2016-02-19 23:41

想不想get新技能酷炫一下,今天图老师小编就跟大家分享个简单的CSS实现绝对的完美圆角框教程,一起来看看吧!超容易上手~

导言:

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

本文探讨的是圆角框的终极解决方案,其核心关键词是圆滑、完美、兼容、重用性、语义,这些技术都是收集目前网络上最流行的做法。纵观种种方法,各有其优势,请针对不同的环境分别使用。

圆角框,因为其样式比直角框漂亮,所以成为设计师心中偏爱的设计元素。现在的web标准下大量的网页、博客都采用圆角框设计,成为一道亮丽的风景线。
然而,就是这个圆角,却成为了网页前端人员心中永远抹之不去的阴影,对它,可以说是又痛又爱。爱的是它的漂亮,痛的是要让它兼容通行于各种不同的浏览器却成为一个永远的神话。
让我们来回顾一下目前网络流行的都有哪些解决方案。

第一种:无图片纯css圆角框

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

收录理由:兼容性强,不用图形

图一

特点:

不用任何图形,使用很多个div容器模拟出圆角效果。 兼容性:通杀所有浏览器

缺点:

构造这个圆角需要加入太多的无语义的标签,结构比较冗余。 重用性不强:如果一个页面有多个圆角,并且要实现不同的半径大小,则其灵活性不够。 边框颜色虽然可以调节,但会对页面中的结构产生致命的影响,适用于色彩单一并且一个页面中圆角应用不多的页面。 不容易实现圆弧内有渐变色的图形背景。
圆角框不够圆滑,有锯齿现象,适合于背景色和当前色色差不大并且圆弧较小的网页。

实现原理:
用很多1像素高的div容器,利用背景色和边框色来模拟出圆角框的轮廓线。

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

第二种:无图片纯css圆角框,用特殊字符(&bull)

收录理由:圆滑,不用图形

图二

特点:

不用任何图形,使用特殊字符•(圆点)模拟出圆角。 兼容性:通杀所有浏览器 圆角平滑

缺点:

构造这个圆角一样需要加入无语义的标签,结构冗余,同第一种一样。 重用性不强:如果一个页面有多个圆角,并且要实现不同的半径大小,需要调整四个角图片的定位,并且字符大小对其有影响,灵活性不够。 颜色虽可调节,但要求里面的背景色和字符的颜色相同,不能做成边框线条。适用于色彩单一并且一个页面中圆角不是太多的页面。 一样不容易实现圆弧内有渐变色的图形背景。

实现原理:
用特殊字符(&bull),利用定位,截取四分之一圆模拟出圆角框的一个角图片。

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

展开更多 50%)
分享

猜你喜欢

CSS实现绝对的完美圆角框

Web开发
CSS实现绝对的完美圆角框

CSS实例教程:纯CSS实现圆角框

Web开发
CSS实例教程:纯CSS实现圆角框

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

CSS创建圆角框

Web开发
CSS创建圆角框

使用CSS 3新技术 完美实现圆角效果

Web开发
使用CSS 3新技术 完美实现圆角效果

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

CSS圆角框进行JS封装

Web开发
CSS圆角框进行JS封装

使用CSS3新技术 完美实现圆角效果

Web开发
使用CSS3新技术 完美实现圆角效果

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

CSS教程:语义化方法替代结构化方法

CSS教程:语义化方法替代结构化方法

很受网友喜欢的QQ分组名称设计空荡旳角落等谁抚慰

很受网友喜欢的QQ分组名称设计空荡旳角落等谁抚慰
下拉加载更多内容 ↓