一、强制换行
word-break: break-all;
word-wrap: break-word;
white-space: pre-wrap;
二、不换行
white-space:nowrap;
text-overflow: ellipsis;
overflow: hidden;
三、神奇的滚动效果
body {
background-image: linear-gradient(to right top, #ffcc00 50%, #eee 50%);
background-size: 100% calc(100% - 100vh + 5px);
background-repeat: no-repeat;
}
body::after {
content: "";
position: fixed;
top: 5px;
left: 0;
bottom: 0;
right: 0;
background: #fff;
z-index: -1;
}
效果为:
动画效果官网
https://daneden.github.io/animate.css/
去掉元素溢出滚轮
::-webkit-scrollbar {
display: none;
}
滚轮增加颜色
::-webkit-scrollbar-thumb{
background-color: red;
}
鼠标小手效果
cursor:pointer;
将video视频标签占满属性
object-fit:fill;
忽略顶层元素
pointer-events: none;
取消忽略顶层元素
子元素忽略穿透效果
pointer-events: all;
图片变色
filter:brightness(200%);