首页 > 开发 > CSS > 正文

CSS3中border-radius属性设定圆角的使用技巧

2024-07-11 08:25:40

字体：大中小

来源：转载

供稿：网友

border-radius CSS3中的代表——第一个在社区中得到广泛使用新属性。这意味着，除去Internet Explorer 8及更低版本，所有的浏览器可以显示圆角。
为了使样式能正确应用，需要为Webkit和Mozilla内核添加前缀。

CSS Code复制内容到剪贴板

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

然而，今天我们不关心前缀，只简单坚持官方形式：border-radius。
2016510110907211.jpg (253×999)

如你所料，我们可以为每个角指定不同的值。
2016510110940699.jpg (599×525)

CSS Code复制内容到剪贴板

border-top-left-radius: 20px; border-top-rightright-radius: 0;
border-bottom-rightright-radius: 30px; border-bottom-left-radius: 0;

在上面的代码中，设置border-top-right-radius和border-bottom-left-radius为零是多余的，除非该元素有继承的值。
按top-left, top-right, bottom-right, bottom-left顺序设置每个 radius 的值。如果省略 bottom-left，则与 top-right 相同。如果省略 bottom-right，则与 top-left 相同。如果省略 top-right，则与 top-left 相同。
我们可以实验，

CSS Code复制内容到剪贴板

border-radius:2px;

等价于：

CSS Code复制内容到剪贴板

border-top-left-radius:2px; border-top-rightright-radius:2px;
border-bottom-rightright-radius:2px; border-bottom-left-radius:2px;

例子2:

CSS Code复制内容到剪贴板

border-radius:2em 1em 4em / 0.5em 3em;

等价于：

CSS Code复制内容到剪贴板

border-top-left-radius:2em 0.5; border-top-rightright-radius:1em 3em;
border-bottom-rightright-radius:4em 0.5em; border-bottom-left-radius:1em 3em;

就像margin和padding一样，如果需要的话，这些设置可以合并为一个单一的属性。

上一篇：详解CSS的border边框属性及其在CSS3中的新特性

下一篇：CSS3使用多列制作瀑布流

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注

新闻热点

最牛同桌！我考了696分我同桌考了703分

2024-06-26 22:28:41

650分！高二女生考入北大：遗憾不能上高三

2024-06-26 22:26:16

男生估分600只考了397 妈妈：高考虽重要，但不代表所有

2024-06-26 22:23:01

唐尚珺回应是否会直播带货：有人出100万想和他合作！

2024-06-25 19:29:23

名校抢人名场面：清华、北大太拼了！

2024-06-25 19:22:14

男生高考语文满分！网友：第一次听说

2024-06-25 19:19:15

疑难解答

图片精选

网友关注