老师我照着视频里的一步一步的敲效果不对检查不出来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Carioon Dog</title>
   <link rel="stylesheet" href="轮廓和耳朵.css">
</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 class="birthmark"></div>
        <div class="eye">
            <div class="pupil"></div>
        </div>
        <div class="eye right">
            <div class="pupil"></div>
            
        </div>
        <div class="nose center">
            <div class="nostril"></div>
            <div class="nostril right"></div>
        </div>
      
        <div class="mouth center">
            <div class="teen"></div>
            <div class="teen right"></div>
            <div class="tongue center"></div>
            
        </div>
        
        <div class="body center">
            <div class="arm"></div>
            <div class="arm right"></div>
            <div class="leg">
                <div class="foot"></div>
            </div>
            <div class="leg right">
                <div class="foot"></div>
            </div>
            <div class="belly"></div>
        </div>
       
    </div>
</body>
</html>

:root
{
    --h1: #1b2f90;  --bg: #f9f9f6;
    
}
body
{
    background: #ffc400;
}
.dog
{
    position: relative;  width: 300px;height: 400px;
}
.center
{
    position: absolute;left: 50%;

transform: translate(-50%,0);

/* 居中 */
}
.forehead
{
position: absolute;    
   
z-index: 1;

left: 50%;  
 
width: 102px;height: 48px;

transform: translate(-50%,0);

border-radius: 51px / 40px 40px 8px 8px;

background: var(--bg);
   
}

.face
{  
z-index: 1;  top: 20px;  
 
width: 110px;height: 68px;

border-radius: 50%; background: var(--bg);
 
}
.chin
{
z-index: 1;  top: 60px;
 
width: 104px;height: 36px;

border-radius: 52px / 0 0 36px 36px; background: var(--bg);
 
}
.ear
{
    position: absolute;   z-index: 0; top: 20px;  left: 50%;  width: 16px;height: 70px ;

transform: translate(-42px,0) rotate(10deg);

transform-origin: 50% 0;

border-radius: 50%;

background: var(--h1);

}
.ear.right
{
    transform: scale(-1,1) translate(-26px,0) rotate(10deg) ;
    
}
.eye{ position: absolute;   z-index: 0;
 
z-index: 2;

top: 20px;  left: 50%;  width: 24px;height: 24px ;

transform: translate(-44px,0) rotate(10deg);

transform-origin: 50% 0;

border-radius: 12px / 13px 12px 12px 2px;

background: var(--bg);

box-shadow: 1px 0px 0px 0px #000 inset;
 
}
    .eye.right{
        transform: scale(-1,1)translate(-21px,0)rotate(10deg);

box-shadow: 1px 0px 0px 0px #000 inset;

}
    .birthmark{
position: absolute;

z-index: 1;

top: 10px;

left: 50%;

width: 30px;height: 36px;

transform: translate(15px,0)rotate(-10deg);

border-radius: 15px / 17px 23px 2px 13px;

background: var(--h1);

}
.pupil{
top: 1px;left: 3px;

overflow: hidden;

width: 26px;height: 26px;

border-radius: 50%;

background: #e79101;

box-shadow: 0 0 8px 0 #000 inset;

}
/* 眼球 */
.pupil:before{
position: absolute;

top: 50%;

left: 50%;

width: 18px;

height: 18px;

margin: -9px 0 0 -9px;

content: '';

border-radius: 50%;

background: #000;

}
   
.pupil:after{
position: absolute;

top: 6px;

left: 17px;

width: 5px;

height: 5px;

content: '';

border-radius: 50%;

background: #fff;

}


.nose{
z-index: 1;

top: 41px;

width:62px ;height: 32px;

border-radius: 31px/ 10px 10px 22px 22px;

background: #363035;

}
.nose:before{
position: absolute;

top: 1px;

left: 50%;

display: block;

width: 60px;

height: 15px;

content: '';

transform: translate(-50%,0);

border-radius: 30px /8px 8px 2px 2px;

background:linear-gradient(30deg,#fff 0%,#fff 8%,#b1aeb1 15%,#b1aeb1 50%,
#544d53 100%);

}
.nostril{
position: absolute;

top: 19px;

left: 50%;

width:15px ;height: 4px;

transform: translate(-21px,0)rotate(30deg);
 
border-radius: 30px/ 10px 10px 22px 22px;

background: linear-gradient(0deg,#000 0%,#363035 100%);

}
.nostril.right{
    transform: translate(-7px,0)rotate(30deg)scale(-1,1);
}

.mouth{
z-index: 1;

top: 68px;

width: 68px;

height: 27px;

border-radius: 34px / 0px 0px 27px 27px;

background:#671316;

box-shadow: 0 0 4px 0 #000 inset;

}
.mouth:before{
position: absolute;

z-index: 1;

top: 0;

left: 0;

width: 68px;

height: 8px;

content: '';

border-radius: 34px/0px 0px 5px 5px;

background: var(--bg);

}
.teen{
position: absolute;

top: 7px;

left: 50%;

width:8px ;

height: 3px;

transform: translate(-8px,0);

border: radius 4px / 0px 0px 3px 3px ;

background:var(--bg) ;

}
.teen.right{
    transform:scale(-1,1)translate(-8px,0);



    border-right: .5px solid #ddd;

}
.tongue{
z-index: 1;

top: 0px;
 
width: 34px;

height: 14px;

border-radius: 17px/ 0px 0px 7px 7px;

background: #a2504f;

box-shadow: 0 0 4px 0 #000 inset;

}
/* 牙齿部分 */
.body{
top: 89px;

width: 66px;

height: 70px;

border-radius: 50%;

background: var(--bg);

}
.arm{
position: absolute;

top: 5px;

left: 50%;

width: 26px;

height: 40px;

transform: translate(-43px,0) rotate(21deg);

border-radius: 13px /20px 0 14px 20px;

background: var(--bg);

}
.arm:before{
position: absolute;

top: 14px;

right: 6px;

width: 5px;

height: 20px;

content: '';

transform: rotate(-5deg);

border-radius: 5px/10px 0px 0px 10px;

box-shadow: -1px 0 0px 0 rgba(200 200 200,0.5);

}

.arm.right{
    transform: scale(-1,1) translate(-17px,0)rotate(21deg);
}
.leg{
position: absolute;

top: 40px;

left: 50%;

width: 29px;

height: 50px;

transform: translate(-32px,0);

border: radius 15px / 5px 5px 15px 45px;

background: linear-gradient(-85deg,#ddd 0%,#ddd 5%,#fff 16%,#fff 100%);

}  
.leg.right{
    transform: scale(-1,1)translate(-3px,0);
}
.foot{
position: absolute;

bottom: -8px;

left: 2px;

width: 29px;

height: 15px;

border-radius: 15px/10px 10px 5px 5px;

background: linear-gradient(-120deg,#ddd 0%,#ddd 10%,#fff 30%,#fff 100%);

}
.belly{
z-index: 2;

top: 34px;

width: 60px;

height: 36px;

border-radius: 30px/0px 0px 36px 36px;

background: linear-gradient(0deg,#ddd 0%, #ddd 10%,#fff 30%,#fff 100%);

}

豆包侠 2021-11-17

源自：项目：CSS3实现汉克狗案例 2-11 汉克狗的腿和脚

收起

2回答

好帮手慕久久 2021-11-18 13:43:07

同学你好，解答如下：
1、老师给你做的第一次修改之后，效果如下:

这个效果就可以了。
2、注释部分除了border-radius写错了，其余的都是数值不太合理。
3、同学修改后的代码，存在以下错误：
a、肚腩belly的渐变色不正确，修改如下：

b、脚丫foot，缺少如下样式：

c、眼睛没有设置定位，导致位置有问题，修改如下：

修改后效果如下：

收起回答

好帮手慕久久 #1

4、nose:before的属性，在如下位置讲过：
https://class.imooc.com/lesson/767#mid=19161
祝学习愉快！

2021-11-18 13:43:24
提问者豆包侠回复好帮手慕久久 #2

谢谢老师解答

2021-11-18 13:52:11

好帮手慕久久 2021-11-18 09:58:03

同学你好，效果与视频中的不一样，有如下原因：

1、某些尺寸设置的有差异，比如：

微小的差异攒在一起就会造成整体差异较大。这样的差异挺多的，同学自己查找一下。

2、nostril相关的旋转、位移设置的与老师不符，其他结构也存在类似问题：

transform连写时，先设置平移再设置旋转与先旋转再平移的效果是不一样的，即平移、旋转、缩放的先后顺序会影响最终的效果，如果同学按照自己的顺序写，那么各个数值需要做调整，不能照搬老师的数值。

由于此处只是想让大家练习一下平移、旋转、缩放、背景等样式，所以建议同学按照视频中的尺寸、代码来写。实际开发中，不会让我们写这么复杂的效果，所以同学简单练习一下此处的效果就行。

祝学习愉快！

收起回答

提问者豆包侠 #1

老师这两处我都更改过来了可是肚子这块的阴影感觉不太对是没其他错误了吗

2021-11-18 10:17:16
提问者豆包侠 #2

我自己找到了一个 leg的border-radius设置错了

2021-11-18 10:21:44

好帮手慕久久回复提问者豆包侠 #3

同学你好，老师给你调整了一下，重点看注释的部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Carioon Dog</title>
    <!-- <link rel="stylesheet" href="轮廓和耳朵.css"> -->
    <style>
        :root {
            --h1: #1b2f90;
            --bg: #f9f9f6;
        }

        body {
            background: #ffc400;
        }

        .dog {
            position: relative;
            width: 300px;
            height: 400px;
        }

        .center {
            position: absolute;
            left: 50%;
            transform: translate(-50%, 0);
            /* 居中 */
        }

        .forehead {
            position: absolute;
            z-index: 1;
            left: 50%;
            width: 102px;
            height: 48px;
            transform: translate(-50%, 0);
            border-radius: 51px / 40px 40px 8px 8px;
            background: var(--bg);
        }

        .face {
            z-index: 1;
            top: 20px;
            width: 110px;
            height: 68px;
            border-radius: 50%;
            background: var(--bg);
        }

        .chin {
            z-index: 1;
            top: 60px;
            width: 104px;
            height: 36px;
            border-radius: 52px / 0 0 36px 36px;
            background: var(--bg);
        }

        .ear {
            position: absolute;
            z-index: 0;
            /* ----- */
            /* top: 20px; */
            top: 34px;
            /* ----- */
            left: 50%;

            /* ----- */
            /* width: 16px; */
            width: 17px;
            /* ----- */

            height: 70px;
            transform: translate(-42px, 0) rotate(10deg);
            transform-origin: 50% 0;
            border-radius: 50%;
            background: var(--h1);
        }

        .ear.right {
            /* ----- */
            /* transform: scale(-1, 1) translate(-26px, 0) rotate(10deg); */
            transform: scale(-1, 1) translateX(-25px) rotate(10deg);
            /* ----- */
        }

        .eye {
            position: absolute;
            z-index: 0;
            z-index: 2;
            top: 20px;
            left: 50%;
            width: 24px;
            height: 24px;
            transform: translate(-44px, 0) rotate(10deg);
            /* ----- */
            /* transform-origin: 50% 0; */
            /* border-radius: 12px / 13px 12px 12px 2px; */
            border-radius: 12px / 24px 13px 12px 2px;
            /* ----- */
            background: var(--bg);
            /* ----- */
            /* box-shadow: 1px 0px 0px 0px #000 inset; */
            box-shadow: 2px 0px 0 0px #000 inset, -1px 0 5px 2px #bbb;
            overflow: hidden;
            /* ----- */
        }

        .eye.right {
            transform: scale(-1, 1)translate(-21px, 0)rotate(10deg);
            /* ------ */
            /* box-shadow: 1px 0px 0px 0px #000 inset; */
            box-shadow: 2px 0px 0 0px #000 inset;
            /* ----- */
        }

        .birthmark {
            position: absolute;
            z-index: 1;
            /* ----- */
            /* top: 10px; */
            top: 18px;
            /* ----- */
            left: 50%;
            width: 30px;
            /* ----- */
            /* height: 36px; */
            height: 38px;

            /* transform: translate(15px, 0)rotate(-10deg); */
            transform: translate(14px, -10px) rotate(-14deg);

            /* border-radius: 15px / 17px 23px 2px 13px; */
            border-radius: 15px/ 20px 21px 3px 16px;
            /* ----- */

            background: var(--h1);
        }

        .pupil {
            /* ----- */
            position: absolute;
            /* top: 1px;
            left: 3px; */
            left: 5px;
            top: 3px;
            /* ----- */
            overflow: hidden;
            width: 26px;
            height: 26px;
            border-radius: 50%;
            background: #e79101;
            /* ----- */
            /* box-shadow: 0 0 8px 0 #000 inset; */
            box-shadow: 0 0 6px 0 #000 inset;
            /* ----- */
        }

        /* 眼球 */
        .pupil:before {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 18px;
            height: 18px;
            margin: -9px 0 0 -9px;
            content: '';
            border-radius: 50%;
            background: #000;
        }

        .pupil:after {
            position: absolute;
            /* ----- */
            /* top: 6px;
            left: 17px; */
            left: 3px;
            top: 7px;
            /* ----- */
            width: 5px;
            height: 5px;
            content: '';
            border-radius: 50%;
            background: #fff;
        }

        .nose {
             /* ----- */
            /* z-index: 1; */
            z-index: 3;
           
            /* top: 41px; */
            top: 42px;
            /* ----- */
            width: 62px;
            height: 32px;
            /* ----- */
            /* border-radius: 31px/ 10px 10px 22px 22px; */
            border-radius: 31px/12px 12px 20px 20px;
            /* ----- */
            background: #363035;
        }

        .nose:before {
            position: absolute;
            /* ----- */
            /* top: 1px; */
            top: 2px;
            /* ----- */
            left: 50%;
            display: block;
            /* ------ */
            /* width: 60px;
            height: 15px; */
            width: 58px;
            height: 10px;
            /* ------ */
            content: '';
            transform: translate(-50%, 0);
            border-radius: 30px /8px 8px 2px 2px;
            background: linear-gradient(30deg, #fff 0%, #fff 8%, #b1aeb1 15%, #b1aeb1 50%, #544d53 100%);
        }

        .nostril {
            position: absolute;
            top: 19px;
            left: 50%;
            width: 15px;
            height: 4px;
            transform: translate(-21px, 0)rotate(30deg);
            border-radius: 30px/ 10px 10px 22px 22px;
            background: linear-gradient(0deg, #000 0%, #363035 100%);
        }

        .nostril.right {
            /* ----- */
            /* transform: translate(-7px, 0)rotate(30deg)scale(-1, 1); */
            transform: scale(-1, 1) translateX(-7px) rotate(30deg);
            /* ----- */
        }

        .mouth {
            z-index: 1;
            top: 68px;
            width: 68px;
            /* ----- */
            /* height: 27px; */
            height: 24px;
            /* border-radius: 34px / 0px 0px 27px 27px; */
            border-radius: 34px/0px 0px 24px 24px;
            /* ----- */
            background: #671316;
            box-shadow: 0 0 4px 0 #000 inset;
        }

        .mouth:before {
            position: absolute;
            /* z-index: 1; */
            z-index:3;
            top: 0;
            /* ----- */
            /* left: 0; */
            left: 50%;
            transform: translate(-50%, 0);
            /* ----- */

            width: 68px;
            /* height: 8px; */
            height: 5px;
            content: '';
            border-radius: 34px/0px 0px 5px 5px;
            background: var(--bg);
        }

        .teen {
            position: absolute;
            /* top: 7px; */
            top: 5px;
            left: 50%;
            width: 8px;
            height: 3px;
            transform: translate(-8px, 0);
            /* ----- */
            /* border: radius 4px / 0px 0px 3px 3px; */
            border-radius: 4px / 0px 0px 3px 3px;
            z-index: 2;
            /* ----- */
            background: var(--bg);
        }

        .teen.right {
            /* transform: scale(-1, 1)translate(-8px, 0); */
            transform: scale(-1, 1) translateX(-1px);
            /* border-right: .5px solid #ddd; */
        }

        .tongue {
            z-index: 1;
            top: 0px;
            width: 34px;
            height: 14px;
            border-radius: 17px/ 0px 0px 7px 7px;
            background: #a2504f;
            box-shadow: 0 0 4px 0 #000 inset;
        }

        /* 牙齿部分 */
        .body {
            top: 89px;
            width: 66px;
            height: 70px;
            border-radius: 50%;
            background: var(--bg);
        }

        .arm {
            position: absolute;
            top: 5px;
            left: 50%;
            width: 26px;
            height: 40px;
            transform: translate(-43px, 0) rotate(21deg);
            border-radius: 13px /20px 0 14px 20px;
            background: var(--bg);
        }

        .arm:before {
            position: absolute;
            /* top: 14px; */
            top: 11px;
            /* right: 6px; */
            right: 9px;
            width: 5px;
            height: 20px;
            content: '';
            transform: rotate(-5deg);
            border-radius: 5px/10px 0px 0px 10px;
            box-shadow: -1px 0 0px 0 rgba(200 200 200, 0.5);
        }

        .arm.right {
            transform: scale(-1, 1) translate(-17px, 0)rotate(21deg);
        }

        .leg {
            position: absolute;
            top: 40px;
            left: 50%;
            width: 29px;
            height: 50px;
            transform: translate(-32px, 0);
            /* border: radius 15px / 5px 5px 15px 45px; */
            border-radius: 15px /5px 25px 25px 45px;
            /* background: linear-gradient(-85deg, #ddd 0%, #ddd 5%, #fff 16%, #fff 100%); */
            background: linear-gradient(-87deg, #ddd, #fff 20%, #fff 100%);

        }

        .leg.right {
            /* transform: scale(-1, 1)translate(-3px, 0); */
            transform: scale(-1, 1) translate(-4px, 0);
        }

        .foot {
            position: absolute;
            /* ----- */
            /* bottom: -8px; */
            bottom: -5px;
            /* left: 2px; */
            left: 50%;
            transform: translate(-20px, 0);
            /* ----- */
            width: 29px;
            height: 15px;
            /* border-radius: 15px/10px 10px 5px 5px; */
            border-radius: 15px /8px 8px 3px 3px;
            background: linear-gradient(-120deg, #ddd 0%, #ddd 10%, #fff 30%, #fff 100%);
        }

        .belly {
            z-index: 2;
            /* ----- */
            /* top: 34px; */
            top: 35px;
            /* ----- */
            width: 60px;
            height: 36px;
            border-radius: 30px/0px 0px 36px 36px;
            /* background: linear-gradient(0deg, #ddd 0%, #ddd 10%, #fff 30%, #fff 100%); */
            background: linear-gradient(0deg, #ddd 0%, #ddd 1%, #f9f9f6 18%, #f9f9f6 100%);
        }
    </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 class="birthmark"></div>
        <div class="eye">
            <div class="pupil"></div>
        </div>
        <div class="eye right">
            <div class="pupil"></div>
        </div>
        <div class="nose center">
            <div class="nostril"></div>
            <div class="nostril right"></div>
        </div>
        <div class="mouth center">
            <div class="teen"></div>
            <div class="teen right"></div>
            <div class="tongue center"></div>
        </div>
        <div class="body center">
            <div class="arm"></div>
            <div class="arm right"></div>
            <div class="leg">
                <div class="foot"></div>
            </div>
            <div class="leg right">
                <div class="foot"></div>
            </div>
            <!-- 加center类名 -->
            <div class="belly center"></div>
           
        </div>
    </div>
</body>
</html>

祝学习愉快！

2021-11-18 11:23:07

点开查看后面2条评论