summary:css3radius

最新推荐文章于 2024-09-29 09:20:06 发布

冷风**

最新推荐文章于 2024-09-29 09:20:06 发布

阅读量93

点赞数

文章标签： css3 前端

本文链接：https://blog.csdn.net/ypuzhiyuan/article/details/105798605

版权

1.标准语法

   border-top-left-radius: 20px;
     border-top-right-radius: 20px;
        border-bottom-left-radius: 20px;
         border-bottom-right-radius: 20px;
         /*兼容*/
	  -moz-border-radius-bottomleft: 20px;
	   /*兼容*/
	   -webkit-border-bottom-left-radius: 20px;

2.radius包含两个值，第一个水平半径，第二个垂直半径

 -moz-border-radius: 20px/40px;
  -webkit-border-radius: 20px/40px;
   border-radius: 20px/40px;

在这里插入图片描述

3.radius包含四个值，左上，右上，右下，左下

 -moz-border-radius: 10px 30px 50px 70px;
		      -webkit-border-radius: 10px 30px 50px 70px;
		      border-radius: 10px 30px 50px 70px;

4.radius三个值，左上，右上左下，右下

 -moz-border-radius:30px 50px 70px;
		      -webkit-border-radius:30px 50px 70px;
		      border-radius:30px 50px 70px;

5.radius两个值，左上右下，右上左下

-moz-border-radius:50px 70px;
		      -webkit-border-radius:50px 70px;
		      border-radius:50px 70px;

**6.radius=height/2则为两头半圆

7.radius=width/2等于一个圆形**

8.为边框各个方向可以设置不同的颜色

 border-color: #FF0000 #6495ED #7FFFD4 #FFE4C4;
		      -moz-border-radius: 10px 30px 50px 70px;
		      -webkit-border-radius: 10px 30px 50px 70px;
		      border-radius: 10px 30px 50px 70px;