CSS3中的border-radius使用方法
发布时间:2023-12-16 15:51:00 所属栏目:语言 来源:DaWei
导读: 这篇文章给大家分享的是CSS3中的border-radius的相关内容。使用border-radius属性可以很轻松的实现圆角效果,小编觉得挺实用的,因此分享给大家做个参考,文中示例代码介绍的非常详细,
这篇文章给大家分享的是CSS3中的border-radius的相关内容。使用border-radius属性可以很轻松的实现圆角效果,小编觉得挺实用的,因此分享给大家做个参考,文中示例代码介绍的非常详细,感兴趣的朋友接下来一起跟随小编看看吧。 CSS3圆角只需设置一个属性:border-radius(含义是"边框半径")。你为这个属性提供一个值,就能同时设置四个圆角的半径。所有合法的CSS度量值都可以使用:em、ex、pt、px、百分比等等。 border-radius的浏览器支持 IE 9、Opera 10.5、Safari 5、Chrome 4和Firefox 4,都支持上述的border-radius属性。 早期版本的Safari和Chrome,支持-webkit-border-radius属性。 早期版本的Firefox支持-moz-border-radius属性。 目前来看,为了保证兼容性,只需同时设置-moz-border-radius和border-radius即可。 -moz-border-radius: 15px; border-radius: 15px; CSS3 border-radius - 指定每个圆角 如果你在 border-radius 属性中只指定一个值,那么将生成 4 个 圆角。但是,如果你要在四个角上一一指定,可以使用以下规则: 四个值: 第一个值为左上角,第二个值为右上角,第三个值为右下角,第四个值为左下角。 三个值: 第一个值为左上角, 第二个值为右上角和左下角,第三个值为右下角 两个值: 第一个值为左上角与右下角,第二个值为右上角与左下角 一个值: 四个圆角值相同 CSS3 border-radius单个圆角的设置 单个圆角的设置除了同时设置四个圆角以外,还可以单独对每个角进行设置。对应四个角,CSS3提供四个单独的属性: border-top-left-radius border-top-right-radius border-bottom-right-radius border-bottom-left-radius 以上就是关于CSS3中的border-radius使用的介绍,上述示例对大家学习border-radius的使用有一定的帮助,有需要的朋友可以参考。 (编辑:大连站长网) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
推荐文章
站长推荐