css - 一个div包含两个块 div旋转之后两个块之间就会出现间距为什么
本文介绍了css - 一个div包含两个块 div旋转之后两个块之间就会出现间距为什么的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
眼睛的地方不旋转就没有间距
旋转
是因为像素成锯齿状了么怎么解决呢
<div class="container">
<div class="face">
<div class="earleft ear"></div>
<div class="earright ear"></div>
<!-- <div class="facecicle1"></div>-->
<div class="eye">
<div class="eye1">
<div class="eyeline eyelineleft"></div>
<div class="eyeball eyeballleft">
<div class="eyebg1">
<div class="ball"></div>
</div>
<div class="eyebgb"></div>
</div>
</div>
<div class="eye2">
<div class="eyeline eyelineright"></div>
<div class="eyeball eyeballright">
<div class="eyebg2">
<div class="ball"></div>
</div>
<div class="eyebgb"></div>
</div>
</div>
</div>
</div>
</div>
body {
background: #373737;
}
.face {
width: 200px;
height: 200px;
border-radius: 0px 0px 33px 33px;
background: #212121;
margin-top: 132px;
border: 10px solid #221715;
}
.face .facecicle1 {
width: 140px;
height: 140px;
background: #666;
border: 140px;
}
.ear {
width: 32px;
height: 33px;
border-radius: 33px 30px 0 0;
border: 10px solid #221715;
border-bottom: none;
background: #212121;
}
.earleft {
margin-top: -43px;
margin-left: -10px;
}
.earright {
margin-top: -43px;
margin-left: 158px;
}
.eye {
width: inherit;
height: 40px;
margin-top: 100px;
}
.eye .eye1 {
width: 50%;
height: auto;
float: left;
transform: rotate(20deg);
}
.eye .eye2 {
width: 50%;
height: auto;
float: left;
transform: rotate(-20deg);
}
.eye .eyeline {
width: 65px;
height: 10px;
background: #221715;
border-radius: 5px;
float: left
}
.eye .eyeline.eyelineleft {
margin-left: 15px;
}
.eye .eyeline.eyelineright {
float: right;
margin-right: 15px;
}
.eye .eyeball {
width: 30px;
height: 15px;
border-radius: 0 0 30px 30px;
border: 10px solid #221715;
background: #fff;
overflow: hidden;
border-top: none;
}
.eye .eyeball.eyeballleft {
margin-left: 21px;
}
.eye .eyeball.eyeballright {
margin-left: 30px;
}
.eye .eyeball .ball {
width: 6px;
height: 6px;
border-radius: 6px;
margin-left: 13px;
background: #221715;
}
.eye .eyeball .eyebg1 {
background: grey;
}
.eye .eyeball .eyebg2 {
background: grey;
}
.eye .eyeball .eyebgb {}
解决方案
.eye .eyeball{
background: -webkit-linear-gradient(top,#221715 1px,#fff 1px);
}
这篇关于css - 一个div包含两个块 div旋转之后两个块之间就会出现间距为什么的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文