Rumah > Artikel > hujung hadapan web > css如何把div修饰成圆
css如何把div修饰成圆
- 藏色散人asal
- 2020-12-30 09:23:583911semak imbas
css把div修饰成圆的方法：首先新建一个html文件；然后在body标签内输入“326687398899370377a71e0126e05ac316b28748ea4df4d9c2150843fecfba68”；最后在head表里添加style标签，并添加“border-radius”属性即可。
本教程操作环境：Dell G3电脑、Windows7系统、HTML5&&CSS3版本。
推荐：《css视频教程》
css把div修饰成圆
1、打开代码编辑器，新建一个html文件，写上基本的结构
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>2、在body标签内输入：326687398899370377a71e0126e05ac316b28748ea4df4d9c2150843fecfba68，这里的div就是用于画圆形的标签。（推荐学习：CSS视频教程）
<body>
<div class="circle"></div>
</body>3、在head表里添加style标签，输入下面代码
<style>
.circle{
width: 200px;
height: 200px;
border-radius: 100px;
background-color: #1EFD0C;
}
</style>5、保存好代码，打开浏览器即可看见圆形。
实现原理：设置宽高相同，再设置圆角为宽高的一半，更方便的做法是直接设置圆角为50%。
Atas ialah kandungan terperinci css如何把div修饰成圆. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：浅谈CSS元素显示模式Artikel seterusnya：CSS中一个冒号（:）和两个冒号（::）的区别