圆角border-radius

本文主要是介绍圆角border-radius，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一、语法

1、分开写

border-top-left-radius:左上;
border-top-right-radius:右上;
border-bottom-right-radius:右下;
border-bottom-left-radius:左下;

2、合并写

（1）四个参数

 border-radius:左上 右上 右下 左下;

（2）三个参数

border-radius:左上  右上左下  右下;

（3）两个参数

border-radius:左上右下  右上左下;

（4）1个参数

border-radius:四个角一样;

二、实例

1、一个圆角（右上）

(1)样式

 #abc{width: 400px;height: 400px;;background-color: red;margin-top:100px;border-top-right-radius:2em; }

(2)元素

 <div id="abc"></div>

(3)效果

2、两个圆角（左上、右上）

(1)样式

#fillet{width:300px;height: 400px;background-color: green;border-top-left-radius:2em;border-top-right-radius:2em;border-bottom-right-radius:0em;border-bottom-left-radius:0em; }

(2)元素

<div id="fillet"></div>

(3)效果

3、三个圆角（左上、右上、右下）

(1)样式

 #ef{width: 400px;height: 400px;;background-color: black;margin-top:100px;border-top-left-radius:2em;border-top-right-radius:2em;border-bottom-right-radius:2em;}

(2)元素

<div id="ef"></div>

(3)效果

4、四个圆角

(1)样式

 #gh{width: 400px;height: 400px;;background-color: pink;margin-top:100px;border-radius:2em;}

(2)元素

<div id="gh"></div>

(3)效果

5、不同比例圆角(2种：左上、右下10px ；左下、右上100px)

(1)样式

#son{width: 400px;height: 400px;;background-color: blue;margin-top:100px;border-radius:10px  100px;}

(2)元素

<div id="son"></div>

(3)效果

6、不同比例圆角(3种：左上20px；右上、左下50px ；右下100px)

(1)样式

 #gh{width: 400px;height: 400px;;background-color: #9400D3;margin-top:100px;border-radius:20px 50px 100px;}

(2)元素

<div id="gh"></div>

(3)效果

 

这篇关于圆角border-radius的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---