*{
margin: 0;
padding: 0;
}
.roundedCorner{
width:100px;/*宽*/
height: 100px;/*高*/
border-radius: 10px;/*圆角角度左上,右上,右下,左下都是
10px
*/
background: deepskyblue;/*背景颜色*/
margin: 20px auto;/*上下间距20px,左右居中*/
}
</style>
</head>
<body>
<div class="roundedCorner"></div>
</body>
效果图:
border-radius的优势不仅仅在制作圆角的边框,还是利用border-radius属性来画圆和半圆。
制作圆的方法:
<head>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.roundedCorner{
width: 100px;/*宽*/
height: 100px;/*高*/
border-radius: 50%;/*圆角角度设置50%,不要设置具体数值,如果哦下面的border值大的话会变形*/
background: deepskyblue;/*背景颜色*/
margin: 20px auto;/*上下间距20px,左右居中*/
border: 5px solid black;
}
</style>
</head>
<body>
<div class="roundedCorner"></div>
</body>
效果图
制作半圆的方法;
<head>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.roundedCorner{
width: 100px;/*宽*/
height: 50px;/*高*/
border-radius: 50px 50px 0 0;/*圆角角度*/
background: deepskyblue;/*背景颜色*/
margin: 20px auto;/*上下间距20px,左右居中*/
}
</style>
</head>
<body>
<div class="roundedCorner"></div>
</body>
效果图