HTMLcss盒⼦模型案例（圆，半圆等）“border-radius”简易易上⼿
这篇⽂章关键介绍了HTML css盒⼦模型实例(圆，半圆形等)“border-radius” 简易易⼊门,⽂中根据案例编码给⼤伙⼉介绍的⼗分详尽，对⼤伙⼉的学习培训或⼯作中具备⼀定的参考参考使⽤价值，必须的盆友能够参考下
许多⼩伙伴们在前端学习的情况下，发觉盒⼦模型默认为⽅形。怎样把⼩盒⼦变为要想的实体模型呢？ 最先⼤家看来⼀下默认的状况----
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=, initial-scale=1.0">
<style>
.box{
width:100px;
height:100px;
background-color:rgb(116,51,51);
box-shadow:010px 10px red;
text-align: center;
position:absolute;
margin:0 auto;
left:0;
right:0;
bottom:0;
top:0;
}
</style>
<title>Document</title>
</head>
<body>
<div class="box">
</div>
</body>
</html>
watermark,size_14,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpd Gk=
默认情况下为正⽅形，也许⼩伙伴觉得不太好看。 我们换成圆形的试试！
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.box{
width:100px;
height:100px;
border-radius:50%;
background-color:rgb(28,99,60);
border:5px solid rgb(55,0,255);
position: absolute;
margin:0 auto;
left:0;
right:0;
bottom:0;
top:0;
}
</style>
<title>Round</title>
</head>
borderbox<body>
<div class="box">
</div>
</body>
</html>
watermark,size_14,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpd Gk=
看⼀下我们变成了圆形！ 来看看半圆形的吧！
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.box{
width:100px;
height:50px www.qlyl1688/product_ycxsys.html;
background-color:rgb(175,42,216);
border:3px solid rgb(26,236,26);
border-top-right-radius:50px;
border-top-left-radius:50px;
position:absolute;
margin:0 auto;
left:0;
right:0;
bottom:0;
top:0;
}
</style>
<title>semicircle</title>
</head>
<body>
<div class="box">
</div>
</body>
</html>
watermark,size_14,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpd Gk=
来试试其他形状!
<!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">
<style>
.box{
width:100px;
height:100px;
background-color:rgb(82,84,223);
border-radius:20px 15px 20px 10px;
position: absolute;
margin:0 auto;
left:0;
bottom:0;
right:0;
top:0;
}
</style>
<title>demo</title>
</head>
<body>
<div class="box">
</div>
</body>
</html>
watermark,size_14,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpd Gk=
知识点分析：
border-radius：给元素设置圆⾓边框
可以实现圆，半圆，椭圆，四分之⼀圆等各种圆⾓图形。
可以设置四个值，分别为左上，右上，右下，左下
给个⼝诀，“从左上开始顺时针移动”。。。
希望这篇⽂章能使你学好border-radius属性！
到此这篇有关HTML css盒⼦模型实例（圆，半圆形等）“border-radius” 简易⼊门的⽂章就详细介绍到这了，更多内容请关注脚本之家！
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论