不使用图片创建CSS圆角效果

CSS圆角效果,从美学角度更比较被大多数人所接受,但遗憾的是CSS从3.0版本开始推出一个border-radius新属性,用来支持对块状元素的 圆角设置。因此设计师想要创建快速响应的圆角效果就要寄希望与未来的浏览器了。目前,圆角效果的实现有很多方法,基于CSS圆角技术可以分为背景图像和不 带背景图像两大类,其中又有使用javascript和未使用javascript脚本之分。所以实现途径各有千秋,互有利弊。

今天就介绍一种不使用图片创建CSS圆角效果的方法,其利用的就是像素之间的锯齿结构排列。无论何种图像你放大到一个像素之后就会发现其实它无非就是一个个小小的像素的排列,所创造出来的效果。借助这个原理我们可以使用Div和css来创建CSS圆角效果。代码截图如下:


HTML代码如下:



显示效果如下:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值