眼球穿透眼边阴影问题？

<style>
		body{
			background: #ffc400;
		}
		:root{
			--h1:#1b2f90;
			--bg:#f9f9f6;
		}
		.dog{
			width: 300px;
			height: 400px;
			position: relative;
			
		}
		.center{
			position: absolute;
			left: 50%;
			transform: translate(-50%,0);
			z-index: 1;
		}
		.forehead{
			width: 102px;
			height: 48px;
			background: var(--bg);  /*调用 css变量*/
			position: absolute;
			left: 50%;
			transform: translate(-50%,0);
			border-radius: 51px / 40px 40px 8px 8px;
			z-index: 1;
		}
		.face{
			width: 110px;
			height: 68px;
			background: var(--bg);
			border-radius: 50%;
			z-index: 1;
		}
		.chin{
			width: 104px;
			height: 36px;
			background: var(--bg);
			border-radius: 52px / 0px 0px 36px 36px;
			top: 45px;
			z-index: 1;
		}
		.ear{
			width: 16px;
			height: 70px;
			background: var(--h1);
			border-radius: 50%;
			position: absolute;
			left: 45%;
			top: 35px;
			transform-origin: 50% 0;
			transform: translate(-25px,0) rotate(10deg);
			z-index: 0;
		}
		.ear.right{
			transform: scale(-1,1) translate(-45px,0) rotate(15deg);
		}
		.birthmark{
			width: 30px;
			height: 36px;
			background: var(--h1);
			border-radius: 15px / 15px 28px 4px 18px;
			position: absolute;
			z-index: 1;
			left: 50%;
			top: 34px;
			transform: translate(20px,-19px) rotate(-5deg);
		}
		.eye{
			width: 24px;
			height: 24px;
			background: var(--bg);
			border-radius: 12px 12px 13px 0px;
			position: absolute;
			z-index:1;
			left: 52%;
			top:24px;
			transform-origin: 50% 0;
			transform: translate(-48px,0) rotate(21deg);
			box-shadow: 1px 0px 1px #000 inset, -5px -1px 5px 0px #ddd;
			overflow: hidden;
		}
		.eye.right{
			transform: scale(-1,1) translate(-14px,0) rotate(15deg);
			box-shadow: 1px 0px 1px #000 inset;
		}
		.pupil{
			width: 26px;
			height: 26px;
			background: #e79101;
			border-radius: 50%;
			position: absolute;
			left: -1px;
			top: -2px;
			box-shadow: 0 0 8px #000 inset;
			z-index: 0;
		}
		.pupil:before{
			content: "";
			width: 18px;
			height: 18px;
			background: #000;
			border-radius: 50%;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%,-50%);
		}
		.pupil:after{
			content: "";
			width: 5px;
			height: 5px;
			background: rgba(255,255,255,1);
			border-radius: 50%;
			position: absolute;
			left: 3px;
			top: 9px;
			
		}
		
	</style>
	<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>
	</body>

会飞的铁蛋 2018-01-14

源自：CSS3实现汉克狗案例 2-5 汉克狗的眼球

收起

1回答

怎么都被占用了呢回答被采纳获得+3积分 2018-01-15 10:57:35

这个是没办法通过设置层级改变的，因为阴影效果是通过定义眼睛的大盒子设置的，给大盒子设置层级，里面的子元素层级都会一直改变，给子元素设置层级，它始终是子元素，不会低于父元素的层级。这个效果可以参照老师的方式写，巧妙运用overflow:hidden；让我们的视觉看上去就像是眼球在下面一样。祝学习愉快！

收起回答