老师检查一下,辛苦啦~

来源: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没有设置宽高,设置边框颜色看起来像设置了背景色

http://img.mukewang.com/climg/6011433c09a885b418150724.jpg

4、另外建议同学提交练习代码的时候在对应的练习任务中提交,不要两个一起提交,方便同学之后复习

祝学习愉快!


0

0 学习 · 15276 问题

查看课程