CSS中有-webkit-border-radius

最新推荐文章于 2024-10-01 22:08:10 发布

k678mh

最新推荐文章于 2024-10-01 22:08:10 发布

阅读量1.1k

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/k678mh/article/details/9797965

版权

CSS 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

CSS中有-webkit-border-radius

小知识 2009-09-04 15:15 阅读 126 评论 0

字号：大中小

border-radius：用这个属性能实现圆角边框的效果。
现在只有Mozilla/Firefox 和 Safari 3支持该属性。请看下面的示例代码：

<div style=" background-color: #ccc;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #000;
padding: 10px;" >

Mozilla/Firefox 和 Safari 3用户将在这里看到圆角边框
此外，设计者还可以随意指定圆角的位置，左上、左下、右上、右下四个方向。在mozilla/firefox和safari中的具体书写格式如下：

-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

Mozilla/Firefox 和Safari 3 中看到的左上圆角
Mozilla/Firefox 和Safari 3 中看到的右上圆角
Mozilla/Firefox 和Safari 3 中看到的左下圆角
Mozilla/Firefox 和Safari 3 中看到的右下圆角