圓角矩形介紹
- 在
CSS
中經過border-radius
屬性能夠實現元素的圓角矩形。
border-radius
屬性值一共有4
個,左上、右上、左下、右下。
border-radius
屬性值規則以下:第一個值爲左上、第二個值爲右上、第三個值爲左下、第四個值爲右下。
- 假如
border-radius
屬性值都是一致的我能夠設置一個屬性值便可。
圓角矩形實踐
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>圓角矩形</title>
<style>
div{
width: 100px;
height: 100px;
border: 2px solid rebeccapurple;
border-radius: 10px 20px 30px 40px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
- 若是咱們的
border-radius
屬性值一致實踐。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>圓角矩形</title>
<style>
div{
width: 100px;
height: 100px;
border: 2px solid rebeccapurple;
border-radius: 20px ;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
- 若是使用
border-radius
屬性值將元素設置爲圓形呢。
- 第一步:要設置的元素寬高度必須一致。
- 第二步:使用
border-radius
屬性值必須是要設置的元素寬高度的一半。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>圓角矩形</title>
<style>
div{
width: 100px;
height: 100px;
border: 2px solid rebeccapurple;
border-radius: 50px ;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
- 設置橢圓形實踐
- 實現橢圓形
border-radius
屬性值必須是元素的高度一半便可。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>圓角矩形</title>
<style>
div{
width: 100px;
height: 50px;
border: 2px solid rebeccapurple;
border-radius: 25px ;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
設置半圓形
- 設置右半圓形
border-radius
屬性值左上、和右下爲元素的寬度一致便可。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>圓角矩形</title>
<style>
div{
width: 50px;
height: 100px;
border: 2px solid rebeccapurple;
border-radius: 50px 0px 0px 50px ;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
- 設置左半圓形
border-radius
屬性值右上、和左下爲元素的寬度一致便可。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>圓角矩形</title>
<style>
div{
width: 50px;
height: 100px;
border: 2px solid rebeccapurple;
border-radius: 0px 50px 50px 0px ;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
- 設置上半圓形
border-radius
屬性值左上、和右上爲元素的高度一致便可。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>圓角矩形</title>
<style>
div{
width: 100px;
height: 50px;
border: 2px solid rebeccapurple;
border-radius: 50px 50px 0px 0px ;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
- 設置下半圓形
border-radius
屬性值左下、和右下爲元素的高度一致便可。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>圓角矩形</title>
<style>
div{
width: 100px;
height: 50px;
border: 2px solid rebeccapurple;
border-radius: 0px 0px 50px 50px ;
}
</style>
</head>
<body>
<div></div>
</body>
</html>