新手小白期末复习第一弹----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;万能胶囊写法/
以上是关于圆角制作的相关知识，下面是我自己做的关于圆角的相关代码

1

2

3

4

5

6

附加效果图：

局部截取_20260627_161029

免责声明：本内容来自平台创作者，博客园系信息发布平台，仅提供信息存储空间服务。