修复主题斜角锯齿

in Typecho with 0 commentand 2993 read

修复斜角锯齿

由于主题自带的CSS创建的斜切角样式有锯齿问题且无法修复锯齿问题,于是删除了自带的斜角并适当修改了图片尺寸

删除斜角切片

.post-list-item-container .item-slant {
    position: absolute;
    z-index: 0;
    right: 0;
    bottom: 50px;
    left: 0;
    width: 110%;
    /* min-height: 100px; */
    -moz-transform:rotate(7deg) translateZ(0) translate(-10px,0px) skew(0deg,0deg);
    -webkit-transform: rotate(7deg)  translateZ(0)  skew(0deg,0deg) translate(-10px,0px);
    -o-transform:rotate(7deg) translateZ(0) translate(-10px,0px) skew(0deg,0deg);
    -ms-transform: rotate(7deg)  translateZ(0) skew(0deg,0deg) translate(-10px,0px);
    transform: rotate(7deg)  translateZ(0) skew(0deg,0deg) translate(-10px,0px);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    background-color: #fff
}

缩小图片高度

.post-list-item-container .item-thumb {
    position: relative;
    display: inherit;
    /* min-height: 250px; */
    min-height: 170px;
    -webkit-transition: -webkit-transform .5s ease,filter .5s ease;
    -moz-transition: -moz-transform .5s ease,filter .5s ease;
    transition: transform .5s ease,filter .5s ease;
    background-position: 50% 50%;
    background-size: cover
}
评论