一个div包含两个块 div旋转之后两个块之间就会出现间距为什么

Question

眼睛的地方不旋转就没有间距

旋转

是因为像素成锯齿状了么怎么解决呢

<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 {}

Answer 1

.eye .eyeball{
    background: -webkit-linear-gradient(top,#221715 1px,#fff 1px);
}