提示:文章写完后,css样式新增了圆角边框样式,这样我们的盒子就可以变为圆角。
1、语法:
div{
border-radius:“length”;
这里的圆角,跟盒子的高度一半,就是圆角,如果不选择圆角就把值改小
}
解释:
1、radius半径(圆的半径)原理:圆与边框的交集形成的圆角的效果。
2、参数值可以为数值或者百分比的形式。
3、如果正方形,想要设置一个圆,把数值修改为高度或者宽的一半即可,或者直接写50%。
4、如果是一个矩形,设置为高度的一半就可以做。
5、该属性是一个简写属性,可以跟四个值,分别代表:左上角、右上角、右下角、左下角。
分开写:
border-radius:10px;
表示边框圆角左上角、右上角、右下角、左下角都为10像素。
border-radius:10px 20px;
表示边框圆角:左上角和右下角为10像素、右上角和左下角为10像素。
border-radius:10px 20px 30px;
表示边框圆角:左上角为10像素、右上角为20像素、右下角为10像素、左下角为30像素。
如果一个一个方向写法:
border-top-left-radius:10px;
表示左上角边框为10像素
border-top-right-radius:20px;
表示右上角边框为20像素
border-bottom-right-radius:30px;
表示右下角边框为30像素
border-bottom-left-radius:40px;
表示左下角边框为40像素
注意:
border-radius:“20px”
圆角边框的值越大,他的圆角半径更明显
圆角边框的值越小,他的圆角半径不是特别明显。
边框4个值的方向:
border-radius:“5px 10px 15px 20px”
边框圆角:右上角为5像素、右下角为10像素、左下角为15像素、左上角为120像素。
自己代码展示:
这个表示一个值的圆角边框:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>圆角边框</title>
<style>
.box {
width: 400px;
/* 宽度 */
height: 200px;
/* 高度 */
background-color: pink;
/* 背景填充颜色 */
border: 1px solid red;
/* 边框、1表示粗细、solid表示实线、边框线颜色 */
margin: 100px auto;
/* 表示外边距、上下为100外边距、auto表示左右不变(还有居中效果) */
border-radius: 60px;
/* border-radius: 10px; */
/* 这个就是重点:
“border-radius”表示边框圆角、后面的值表示圆的半径
后面值越大、则显示出来圆角边框越明显
值越小、则显示出来圆角边框越不明显
自己理解:
就是把圆放到角哪里、然后在根据自己设置的值让圆发生变化、圆角就是用圆放到角哪里、跟着圆走、去掉多余90度角*/
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
表示四个值的圆角边框:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>圆角边框、数值或百分比、属性值</title>
<style>
.yuanxing {
width: 200px;
height: 200px;
/* border-radius: 100px; */
border-radius: 50%;
background-color: pink;
}
.juxing {
width: 400px;
height: 200px;
background-color: pink;
border-radius: 200px;
}
.radius {
width: 200px;
height: 200px;
background-color: pink;
/* border-radius: 10px 20px; */
/* 这个表示设置的左边上角和右边下角一样的10
这里右边上角和左边下角一样的
理解:
每一个圆角有对应的值都是一样的 */
/* border-radius: 10px 20px 30px; */
/* 这个先这样:
10表示左上角圆角边框
20表示右边上角的圆角
30表示右边下角的圆角
剩下的一个跟对应的那个角值一样的20 */
/* border-radius: 10px 20px 30px 40px; */
/* 这个表示:
可以理解为:顺时针看
左边上圆角为10
右边上圆角为20
右边下圆角为30
左边下圆角为40 */
border-top-left-radius: 10px;
/* 只能指定一个角;这个就是左上角、因为它的方位为top上方向意思、left表示左边所以就是左边上角 */
}
</style>
</head>
<body>
<h4>1.圆形的做法</h4>
<div class="yuanxing"></div>
<h4>2.圆角矩形的做法</h4>
<div class="juxing"></div>
<h4>3.可以设置不同的圆角</h4>
<div class="radius"></div>
</body>
</html>
显示结果:
表示第一个结果:
表示四个值的边框圆角:
总结
提示:这里对文章进行总结:
例如:以上就是今天要讲的内容,本文仅仅简单介绍了圆角边框,四个值的圆角边框(顺时针)。