css 圆角

时间 2019-11-07 标签 css 圆角

1.圆角优势

1.1减小制做图片的时间

1.2减小维护的工做量

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

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

2.border-radius属性

boder-radius:15px;css

<!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>

效果图：html

为圆角设置一个值同时做用到四个圆角上面，服务器

border-radius能够同时设置1到4个值网络

》只设置一个值：这一个值做用到四个圆角上性能

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

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

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

3.圆角原理

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

由此可得圆角分类分为htm

水平半径与垂直半径相等

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

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

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

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

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

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

每一组也能够使用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;
}