css 边框圆角
程序员文章站
2022-06-17 16:30:16
...
记录一下使用border-radius使边框变成圆角的方法
- 构造圆形的方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
</head>
<style>
.div1{
width:300px;
height: 300px;
border: 1px solid red;
margin: 0px auto;
border-radius:250px;
text-align: center;
line-height: 200px;
}
</style>
<body>
<div class="div1">我是个圆</div>
</body>
</html>思路：首先构造一个正方形，然后使用border-radius让四个角变成圆角，圆角具体的范围根据正方形的边长除以2就行了。
- 构造椭圆的方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
</head>
<style>
.div2{
width:300px;
height: 200px;
border: 1px solid red;
margin: 0px auto;
border-radius:150px/100px;
text-align: center;
line-height: 200px;
}
</style>
<body>
<div class="div2">我是个椭圆</div>
</body>
</html>思路：使用border-radius让四个角变成圆角，后面的横向和纵向的圆角范围使用 “/” 分割开来
- 效果图
上一篇： [转]Kafka文件存储机制那些事
下一篇： Ant命令行参数传递