使用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就行了。
椭圆:
设置水平和垂直半径,例如水平方向的椭圆:宽度=高度x2,水平半径=宽度,垂直半径=高度!垂直方向的椭圆则相反。
.hor{
width:200px;height:100px;
background: green;
border-radius: 200px/100px;
}
半圆:
元素的宽度和高度相配合(多为2倍关系),圆角半径为短边的值,圆角半径设置位置不同。分上、右、下、左半圆
.shangbanyuan{
width:200px;height:100px;
background-color: blue;
border-radius:100px 100px 0 0 ;
}