CSS3中支持IE9, Firefox, Safari, Chrome的圆角

瑞丽芳香

瑞丽芳香

2016-02-17 02:33

今天天气好晴朗处处好风光,好天气好开始,图老师又来和大家分享啦。下面给大家推荐CSS3中支持IE9, Firefox, Safari, Chrome的圆角,希望大家看完后也有个好心情,快快行动吧!

W-教程博主就比较喜欢圆角的盒子模型,现在CSS3已经可以轻松实现跨浏览器的圆角效果,包括Firefox高版本,IE9,Safari,Chrome等高端浏览器。

我们这样去定义一个盒子模型:

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

在Firefox,和Chrome中的效果:

CSS3中支持IE9, Firefox, Safari, Chrome的圆角,PS教程,图老师教程网

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

其中 -moz-border-radius 是 Firefox 实现圆角的私有属性,而 -webkit-border-radius是 webkit 内核浏览器(如 Safari 和 Chrome)实现圆角的私有属性。

我们也可以分别设置4个圆角的属性值,例如这样的样式:

-moz-border-radius-topleft: 50px;-moz-border-radius-topright: 10px;-moz-border-radius-bottomright: 10px;-moz-border-radius-bottomleft: 10px;-webkit-border-top-left-radius: 10px;-webkit-border-top-right-radius: 50px;-webkit-border-bottom-right-radius: 10px;-webkit-border-bottom-left-radius: 10px;

得到的效果如下图:

CSS3中支持IE9, Firefox, Safari, Chrome的圆角,PS教程,图老师教程网

我们还可以使用CSS缩写样式实现圆角效果,例如下面的代码:

-moz-border-radius: 50px 30px 20px 10px;-webkit-border-radius:20px 10px 5px 50px;

当然我们也可以为盒子模型添加边框属性:

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

CSS3中支持IE9, Firefox, Safari, Chrome的圆角,PS教程,图老师教程网

-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius:10px;border:10px solid #69F;
展开更多 50%)
分享

猜你喜欢

CSS3中支持IE9, Firefox, Safari, Chrome的圆角

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
CSS3中支持IE9, Firefox, Safari, Chrome的圆角

IE、Firefox、Opera和Safari对CSS样式important和*的支持

Web开发
IE、Firefox、Opera和Safari对CSS样式important和*的支持

什么是极简主义 如何打造极简风格家居

家居设计 装修设计
什么是极简主义 如何打造极简风格家居

CSS3的border-radius(圆角)

Web开发
CSS3的border-radius(圆角)

CSS Hack(Safari、Opera、Firefox3和IE7)

Web开发
CSS Hack(Safari、Opera、Firefox3和IE7)

2017榻榻米书房设计装修效果图 榻榻米书房设计图片

榻榻米 书房 装修设计 书房设计 平面设计
2017榻榻米书房设计装修效果图 榻榻米书房设计图片

IE兼容css3圆角的htc解决方法

Web开发
IE兼容css3圆角的htc解决方法

让IE可以变相支持CSS3选择器

Web开发
让IE可以变相支持CSS3选择器

2017春夏女装风衣外套流行趋势

服装设计 平面设计 设计 服装搭配
2017春夏女装风衣外套流行趋势

从滚动条消失看细节设计技巧

从滚动条消失看细节设计技巧

产品中图形语言规范化的意义与过程

产品中图形语言规范化的意义与过程
下拉加载更多内容 ↓