CSS圆角边框

最新推荐文章于 2023-05-15 09:33:15 发布

Hu Jing4781

最新推荐文章于 2023-05-15 09:33:15 发布

阅读量102

点赞数

本文链接：https://blog.csdn.net/weixin_50561836/article/details/115225421

版权

使用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 ;
}

Hu Jing4781

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS圆角边框

使用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;
复制链接

扫一扫