CSS3如何指定每个圆角

CSS3如何指定每个圆角

很多朋友可能都知道圆角的设定是通过border-radius指定的，但是如何指定每个圆角就不是太懂了， 今天小编就来分享下CSS3如何指定每个圆角。

新建一个index.html文档，完成基础代码编写。

新建一个层，层大小宽500像素，高300像素，背景颜色为黑色。

将index.html文件用浏览器打开，查看页面初始显示效果。

首先我们先把图层设置圆角属性，通过"border-radius:20px"设置圆角大小为20像素。

刷新页面，查看圆角效果。

那么如何设置不同的圆角呢？我们可以在border-radius后面填写四个参数，分别对应左上角，右上角，右下角和左下角的值。小编这里就将其分别设置成20px，15px，10px和5px。

刷新页面，查看不同圆角的效果如下。