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

王春源4614

王春源4614

2016-02-20 00:01

下面是个使用CSS3新技术 完美实现圆角效果教程,撑握了其技术要点,学起来就简单多了。赶紧跟着图老师小编一起来看看吧!

    现在使用CSS3 技术不需要图片即可实现圆角,把侧边栏标题背景的圆角效果和搜索框的圆角效果用 CSS3 实现。记录一下以便以后使用。W3C 很早就制订了实现了 CSS 圆角的 CSS3 属性:border-radius,Firefox 和 Safari 也通过私有属性实现了该功能:

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

    效果如下:

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

    其中 -moz-border-radius 是 Firefox 实现圆角的私有属性,而 -webkit-border-radius 是 webkit 内核浏览器(如 Safari 和 Chrome)实现圆角的私有属性,如果你只要指定某一个角是圆角的话,它们都分别定义了四个属性:

-moz-border-radius-topleft / -webkit-border-top-left-radius
-moz-border-radius-topright / -webkit-border-top-right-radius
-moz-border-radius-bottomleft / -webkit-border-bottom-left-radius
-moz-border-radius-bottomright / -webkit-border-bottom-right-radius

    当然 IE (包括 IE8)还是不支持,所以该效果只能在 Firefox, Safari, 以及 Chrome 中查看。

展开更多 50%)
分享

猜你喜欢

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

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

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

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

s8lol主宰符文怎么配

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

网页美工应该了解的CSS3新技术

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
网页美工应该了解的CSS3新技术

CSS3中的5个有趣的新技术

Web开发
CSS3中的5个有趣的新技术

lol偷钱流符文搭配推荐

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

jQuery插件实现css3效果

Web开发
jQuery插件实现css3效果

CSS3中如何实现渐变效果

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
CSS3中如何实现渐变效果

lolAD刺客新符文搭配推荐

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

如何修复Win7系统:Win7蓝屏怎么办

如何修复Win7系统:Win7蓝屏怎么办

Windows7系统开机设置自动连网

Windows7系统开机设置自动连网
下拉加载更多内容 ↓