老师为什么我谷歌浏览器最新版的用：root不好使
来源：2-1 汉克狗头部轮廓和耳朵
慕婉清5296191
2019-09-06 20:38:55
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>2-9</title>
<style type="text/css">
:root {
--hl:#1b2f90;
--bg:#f9f9f6;
}
body{background:#ffc400;}
.dog{width:300px;
height:400px;
position:relative;
}
.center{position:absolute;
left:50%;
transform:translate(-50%,0);}
.forehead{width:102px;
height:48px;
background:var(--bg);
position:absolute;
left:50%;
transform:translate(-50%,0);
border-radius:51px/40px 40px 8px 8px;}
.face{width:110px;
height:68px;
background:var(--bg);
border-radius:50%;
top:20px;}
.chin{width:104px;
height:36px;
background:var(--bg);
border-radius:52px/0px 0px 36px 36px;
top:60px;}
.ear{width:16px;
height:70px;
background:#1b2f90;
border-radius:50%;
position:absolute;
left:50%;
top:20px;
}
</style>
</head>
<body>
<div class="dog center">
<div class="forehead center"></div>
<div class="face center"></div>
<div class="chin center"></div>
<div class="ear"></div>
<div class="ear right"></div>
</div>
</body>
</html>
2回答
-
好帮手慕糖
2019-09-07
同学你好，如下，使用最新的版本测试，是有效果的哦。
祝学习愉快！
0 -
慕婉清5296191
提问者
2019-09-06
这个是，上一个请忽略
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>2-9</title>
<style type="text/css">
:root {
--hl:#1b2f90;
--bg:#f9f9f6;
}
body{background:#ffc400;}
.dog{width:300px;
height:400px;
position:relative;
}
.center{position:absolute;
left:50%;
transform:translate(-50%,0);}
.forehead{width:102px;
height:48px;
background:var(--bg);
position:absolute;
left:50%;
transform:translate(-50%,0);
border-radius:51px/40px 40px 8px 8px;}
.face{width:110px;
height:68px;
background:var(--bg);
border-radius:50%;
top:20px;}
.chin{width:104px;
height:36px;
background:var(--bg);
border-radius:52px/0px 0px 36px 36px;
top:60px;}
.ear{width:16px;
height:70px;
background:var(--h1);
border-radius:50%;
position:absolute;
left:50%;
top:20px;
}
</style>
</head>
<body>
<div class="dog center">
<div class="forehead center"></div>
<div class="face center"></div>
<div class="chin center"></div>
<div class="ear"></div>
<div class="ear right"></div>
</div>
</body>
</html>
0
相似问题