<!doctype html>
<html>
<head>
<title>CSS3方框圓角</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
#box{
background-color: blue;
height: 200px;
width: 200px;
margin: 40px auto;
padding: 50px;
box-sizing: border-box;
/*box-sizing: border-box; 這個元素的內距和邊框將不會增加元素本身的寬度。*/
/*border-radius: 20px;*/
/*border-radius 設定圓角，4個角同時設定*/
border-bottom-left-radius:100px;
/*border-bottom-left-radius: 只設定左下角*/
border-top-right-radius: 100px;
/*border-top-right-radius: 只設定右上角*/
}
</style>
</head>
<body>
<div id="box">some test here</div>
</body>
</html>
PS:
padding+border+width= 盒子的寬度padding+border+heigh= 盒子的高度
參考:https://www.jianshu.com/p/e2eb0d8c9de6
留言列表
Impression (1)
