css 圓角

時間 2019-11-07

標籤 css 圓角欄目 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;
}

1. CSS畫圓角
2. CSS圓角框，圓角提示框
3. CSS圓角效果
4. 純CSS圓角框
5. CSS圓角實現詳解
6. CSS圓角樣式詳解
7. CSS border-radius邊框圓角
8. CSS圓角進化論
9. css實現div圓角
10. CSS 圓角邊框詳解
更多相關文章...
• jQuery Mobile CSS 類 - jQuery Mobile 教程
• CSS 指南 - 網站建設指南
• 使用Rxjava計算圓周率
• 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。