CSS3的border-radius(圆角)

转角处的邂逅55

转角处的邂逅55

2016-02-20 00:29

今天图老师小编要跟大家分享CSS3的border-radius(圆角),精心挑选的过程简单易学,喜欢的朋友一起来学习吧!

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

border-radius(圆角)的几点说明:

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

border-radius:长度
Firefox支持border-radius(圆角):-moz-border-radius:2px;
webkit内核的Safari和Chrome支持border-radius(圆角):-webkit-border-radius:2px;
Opera支持border-radius(圆角):border-radius:2px;
IE不支持border-radius(圆角)

我们还可以随意指定圆角的位置,左上、左下、右上、右下四个方向。在firefox、webkit内核的Safari和Chrome和opera(css3)、中的具体书写格式如下:

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

border-radius(圆角)还有其他一些用法,Firefox、webkit内核的Safari和Chrome和opera(css3)其他写法有些略微的差异,具体可以查看以下网址:https://developer.mozilla.org/en/CSS:-moz-border-radius
http://www.the-art-of-web.com/css/border-radius/
http://dancewithnet.com/2008/12/27/border-radius-and-rounded-corner/

展开更多 50%)
分享

猜你喜欢

CSS3的border-radius(圆角)

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

CSS3样式:box-shadow,border-radius和transition

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
CSS3样式:box-shadow,border-radius和transition

s8lol主宰符文怎么配

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

CSS3教程(3):border-color网页边框色彩

Web开发
CSS3教程(3):border-color网页边框色彩

CSS3系列教程:边框半径和圆角

Web开发
CSS3系列教程:边框半径和圆角

lol偷钱流符文搭配推荐

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

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

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

兼容所有浏览器的CSS3圆角

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
兼容所有浏览器的CSS3圆角

lolAD刺客新符文搭配推荐

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

CSS实例教程:制作漂亮的网页表单

CSS实例教程:制作漂亮的网页表单

CSS设计网页教程:制作网页气泡状文本框

CSS设计网页教程:制作网页气泡状文本框
下拉加载更多内容 ↓