新手小白期末复习第一弹----web中的圆角制作
web中的圆角制作
在我们制作网站的时候我们有很多方面都需要这所谓的圆角，那么这个所谓的圆角到底是运用在哪一方面
例如：咱们网页中小圆圈的制作，有的地方需要正方形四个角需要有一定弧度，像这些地方我们都需要用到圆角的相关知识
所以说掌握好圆角的相关知识对我们有很大帮助，那么这篇文章我就带大家一起来了解有关圆角的制作的相关知识
一、圆角是什么
所谓圆角就是给盒子、图片、按钮等元素的四个角做成圆弧的效果
二、圆弧效果通过什么来实现
圆弧效果在CSS中通过 border-radius来实现
三、制作圆角的写法
1、基本写法
/*四个角统一圆角*/
border-radius:10px
值越大，圆弧越明显
单位：px、%、rem都可以用
分开控制四个角（顺序：左上、右上、右下、左下）
border-radius:5px 10px 15px 20px
单独指定一个角
border-top-left-radius:8px
border-top-right-radius:8px
border-bottom-left-radius:8px
border-bottom-right-radius:8px
2、特殊效果
圆形（宽高相等+50%）
.box{
width：100px
height:100px
border-radius:50%
}
胶囊椭圆（宽高不等+50%）
.btn{
width:160px
heightP:40px
border-radius:50%
}
/*或border-raduis:9999px;万能胶囊写法*/
以上是关于圆角制作的相关知识，下面是我自己做的关于圆角的相关代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>圆角的制作</title>
<style type="text/css">
.container{
margin: 0 auto;
height: 48px;
display: flex;
}
div[class^=items]{
flex: 1;
}
.items1{background-color: #e7000a;}
.items2{background-color: #f29900;}
.items3{background-color: #fdf100;}
.items4{background-color: #029a43;}
.items5{background-color: #0268bc;}
.items6{background-color: #601289;}
.number{
background-color: #FFFFFF;
width: 30px;
height: 30px;
border-radius:50%;
text-align: center;
margin: 9px auto;
}
</style>
</head>
<body>
<div class="container">
<div class="items1">
<div class="number">1</div>
</div>
<div class="items2">
<div class="number">2</div>
</div>
<div class="items3">
<div class="number">3</div>
</div>
<div class="items4">
<div class="number">4</div>
</div>
<div class="items5">
<div class="number">5</div>
</div>
<div class="items6">
<div class="number">6</div>
</div>
</div>
</body>
</html>
附加效果图：
浙公网安备 33010602011771号