css圆角边框代码

2024年1月31日发(作者：)

css圆角边框代码

CSS圆角边框是一个常见的设计元素，可以用于创建各种效果，例如按钮、卡片和框架等。以下是一些常用的CSS圆角边框代码示例：

1.圆角矩形边框

border-radius: 10px;

这将创建一个四个角都为10像素的圆角矩形边框。

2.不同圆角矩形边框

border-radius: 10px 20px 30px 40px;

这将创建一个四个角分别为10、20、30和40像素的圆角矩形边框。

3.圆形边框

border-radius: 50%;

这将创建一个圆形边框，其中半径为元素宽度的50%。

4.半圆形边框

border-top-left-radius: 50% 100%;

border-top-right-radius: 50% 100%;

这将创建一个上半圆形边框，其中左上角和右上角的半径为元素高度的50%和100%。

5.椭圆形边框

border-radius: 50% / 25%;

这将创建一个椭圆形边框，其中水平半径为元素宽度的50%，垂直半径为元素高度的25%。

- 1 -

以上是一些常用的CSS圆角边框代码示例，你可以根据自己的需要进行调整和修改。

- 2 -