CSS圆角与形状生成技巧-优快云博客

2019独角兽企业重金招聘Python工程师标准>>>

1.圆角优点

1.1减少制作图片的时间

1.2减少维护的工作量

1.3提高网页性能(减少http请求，网页的载入速度变快)

1.4增加视觉可靠性(某些情况下（网络拥堵、服务器出错、网速过慢等等），背景图片会下载失败，导致视觉效果不佳。CSS3就不会发生这种情况。)

2.border-radius属性

boder-radius:15px;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="content-type" content="text/html; charset=utf-8">
		<title>radius</title>
		<style>
			.radius{
				width:200px;
				height:100px;
				border-radius:15px;//圆角设置为15px
				background:#FF8C69;
			}
		</style>
	</head>
	<body>
		<div class="radius"></div>
	</body>
</html>

效果图：

为圆角设置一个值同时作用到四个圆角上面，

border-radius可以同时设置1到4个值

》只设置一个值：这一个值作用到四个圆角上

》设置两个值：对角使用相同的值(左上角与右下角使用第一个值，右上角与左下角使用第二个值)

》设置三个值：左上角使用第一个值，右上角和左下角使用第二个值，右下角使用第三个值

》设置四个值：从左上角开始，顺时针循环依次对应

3.圆角原理

border-radius:15px;是将圆角的水平半径和垂直半径都设置为15px;

由此可得圆角分类分为

水平半径与垂直半径相等

当水平半径与垂直半径相等的时候，就是在边角上画内切圆

水平半径与垂直半径不相等

当水平半径与垂直半径不相等的时候，就是在边角上画内切椭圆

用“/”来分割水平半径与垂直半径

第一组：“/”前面的值表示的是水平半径

第二组：“/”后面的值表示的是垂直半径

每一组也可以使用1到4个值，规则都是相同的

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="content-type" content="text/html; charset=utf-8">
		<title>radius</title>
		<style>
			.radius{
				width:200px;
				height:100px;
				border-radius:30px/5px;//斜杠前面代表水平半径，斜杠后面代表垂直半径
				background:#FF8C69;
			}
		</style>
	</head>
	<body>
		<div class="radius"></div>
	</body>
</html>

效果图：

4.几种常用效果图

☆圆

条件：宽=高，border-radius=1/2*宽(或百分比50%)

.radius{
	width:200px;
	height:200px;
	background:#FF8C69;
	border-radius:100px;
}

☆半圆

条件：宽=2*高(或高=2*宽)，border-radius= 宽高中最小的那个值，只设置相邻的两个圆角

//上半圆
.radius{
	width:100px;
	height:50px;
	background:#FF8C69;
	border-top-left-radius:50px;
	border-top-right-radius:50px;
}

//右半圆
.radius{
	width:50px;
	height:100px;
	background:#FF8C69;
	border-top-right-radius:50px;
	border-bottom-right-radius:50px;
}

//下半圆
.radius{
	width:100px;
	height:50px;
	background:#FF8C69;
	border-bottom-left-radius:50px;
	border-bottom-right-radius:50px;
}

//左半圆
.radius{
	width:50px;
	height:100px;
	background:#FF8C69;
	border-top-left-radius:50px;
	border-bottom-left-radius:50px;
}

☆椭圆

条件：宽≠高，border-radius=(1/2*宽)/(1/2*高)

.radius{
	width:100px;
	height:50px;
	background:#FF8C69;
	border-radius:50px/25px;
}

☆其他

条件：border-radius=(水平半径≠(0.5*宽))/(垂直半径≠(0.5*高))

//横着圆柱
.radius{
	width:100px;
	height:50px;
	background:#FF8C69;
	border-radius:15px/25px;
}

//竖着圆柱
.radius{
	width:100px;
	height:50px;
	background:#FF8C69;
	border-radius:50px/15px;
}

当宽≠高时：水平半径=0.5*宽，垂直半径=0.5*高，此时呈现的是椭圆

当宽=高时：水平半径=0.5*宽，垂直半径=0.5*高，此时呈现的是圆

.radius{
	width:200px;
	height:100px;
    border-radius:20px 200px;
    background-color:#FFE4C4;
}

转载于:https://my.oschina.net/u/3680343/blog/1835957