css 边框圆角

最新推荐文章于 2024-08-29 09:00:00 发布

BillowX

最新推荐文章于 2024-08-29 09:00:00 发布

阅读量4.3k

点赞数 1

分类专栏： Html

本文链接：https://blog.csdn.net/smile_luckly/article/details/81872656

版权

Html 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

记录一下使用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>