CSS日常随笔

记录：

一、多余省略号写法种类

单行省略号写法

@mixin ellipsis($width:200) {
	width: $width;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

多行省略号写法

@mixin ellipsisBasic($clamp:2) {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: $clamp;
}

sass@mixin合集写法

@mixin textOverFlow ($num:1) {
    @if($num==1) {
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }
    @else {
        overflow:hidden; 
        text-overflow:ellipsis;
        display:-webkit-box; 
        -webkit-box-orient:vertical;
        -webkit-line-clamp:$num;
    }
}

二、自动生成多后缀

@mixin prefix($declarations, $prefixes: ()) {
    @each $property,$value in $declarations {
        @each $prefix in $prefixes {
            #{'-' + $prefix + '-' + $property}: $value;
        }
        #{$property}: $value;
    }
}

使用方式

@include prefix((transition: left 0.3s), webkit moz o);

二、动画写法animation

@-webkit-keyframes flash {
    25%,
    75% {
        box-shadow: 0 0 3px #ffa800
    }
    0%,
    50%,
    100% {
        box-shadow: none
    }
}

@keyframes flash {
    25%,
    75% {
        box-shadow: 0 0 3px #ffa800
    }
    0%,
    50%,
    100% {
        box-shadow: none
    }
}

使用方式

-webkit-animation: flash 1.1s infinite linear;
animation: flash 1.1s infinite linear;

三、一些问题的小技巧解决方法

swipe轮播图设置了圆角，滑动时会变成直角再回到圆角（iosBug）

在父元素上加

overflow:hidden；
transform:translateY(0)

给元素加1px边框，在移动端可能会消失问题

transform: rotateZ(360deg);