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);

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！