老师 帮忙看下这样书写可以吗？
来源：2-11 编程练习
槑大槑小
2020-12-09 11:56:16
# 具体遇到的问题
为啥圆角写为和边框一样的数值后就变为圆形了 必须要比边框的数值小才可以呈现作业中的这种效果
# 报错信息的截图
# 相关课程内容截图
# 尝试过的解决思路和结果
# 粘贴全部相关代码，切记添加代码注释（请勿截图）
在这里输入代码，可通过选择【代码语言】突出显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>边框</title>
<style>
/*补充代码*/
* {
padding: 0;
margin: 0;
}
.bd1 {
width: 0;
height: 0;
border: 100px solid transparent;
border-left-color: red;
border-top-left-radius: 80px;
border-bottom-left-radius: 80px;
}
.bd2 {
width: 0;
height: 0;
border: 100px solid transparent;
border-right-color: red;
border-top-right-radius: 80px;
border-bottom-right-radius: 80px;
position: relative;
bottom: 200px;
right: 20px;
}
</style>
</head>
<body>
<div class="box">
<div class="bd1"></div>
<div class="bd2"></div>
</div>
</body>
</html>
1回答
-
同学你好，问题回答如下：
1、效果实现了哦，不过还可以优化一下，相同的样式代码可以一起设置，减少不必要的冗余代码，优化建议如下图：
2、对于同学的另一个问题，”圆角写为和边框一样的数值后就变为圆形了，必须要比边框的数值小才可以呈现作业中的这种效果“，原因为圆角的数值越大圆角的弧度也就越大，当达到一定数值的时候就呈现出圆的状态。如果像同学的是设置的边框的圆角，就要设置和边框数值一样大的时候才能呈现出圆的状态，下图老师设置的是元素的圆角，元素的圆角设置元素本身一半的大小就可以呈现出圆的状态，同学可以参考对比下边的图1图2理解一下：
祝学习愉快！
0
相似问题