老师检查一下,辛苦啦~
来源:2-11 编程练习
江伍德
2021-01-27 16:44:13
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 第一题*/
/* .box1{
width: 300px;
height: 300px;
border: 3px solid red;
border-radius:20px 10px 60px;
} */
/* -------------------------------------------------- */
/* 第二题 一个盒子实现效果 */
/* .box2{
width: 0;
height: 0;
border: 90px solid transparent;
border-left-color:red ;
border-right-color:red ;
border-radius: 70px;
} */
/* -------------------------------------------------- */
/* 两个盒子实现效果 */
.box3{
width: 0;
height: 0;
border: 90px solid transparent;
border-left-color:red ;
border-radius: 70px;
}
.box4{
width: 0;
height: 0;
border: 90px solid transparent;
border-right-color:red ;
margin-top: -180px;
border-radius: 70px;
}
</style>
</head>
<body>
<!-- 第一题 -->
<div class="box1"></div>
<!-- 第二题 一个盒子实现效果 -->
<div class="box2 div"></div>
<!-- 第二题 两个盒子实现效果 -->
<div class="box3 spec"></div>
<div class="box4 spec"></div>
</body>
</html>
老师 transparen 是透明,但为什么在一个盒子里图层一盖住了图层二,图层二给了浮动并列的图层一,但给透明效果后下方图层没显示出来= =所以transparen是给透明通道的颜色还是和背景颜色相同呢???
1回答
好帮手慕张
2021-01-27
同学你好,问题解答如下:
1、两个题目的代码效果都是正确的。
2、“老师 transparent 是透明,但为什么在一个盒子里图层一盖住了图层二,图层二给了浮动并列的图层一,但给透明效果后下方图层没显示出来?“这句话是什么意思老师没有特别明白。另外,一个盒子实现“圆三角”是因为设置的90px边框,上下两边框设置了透明色,所以只显示左右两个。
3、“透明通道的颜色?”这里透明通道指的是边框吗?
transparent的颜色是边框的颜色。因为div没有设置宽高,设置边框颜色看起来像设置了背景色
4、另外建议同学提交练习代码的时候在对应的练习任务中提交,不要两个一起提交,方便同学之后复习
祝学习愉快!
相似问题