【js随机数】///////////////////////////////////
{{Math.round(Math.random()*10+30)}}
【渐变】///////////////////////////////////
线性渐变 - 从上到下（默认情况下）
background-image: linear-gradient(#e66465, #9198e5);
从左到右的线性渐变
background-image: linear-gradient(to right, red , yellow);
线性渐变 - 对角
background-image: linear-gradient(to bottom right, red, yellow);
径向渐变
background: radial-gradient(#f00,#ff0,#0f0);
【高度】///////////////////////////////////
//高度自适应
height: 200px!important;
min-height:200px ;
//自适应高度方法2:用屏幕的高度减去你页面顶部固定的高度。
height: calc(100vh - 120px); 注意减号两边需要各空一格
//自动换行：
word-wrap:break-word;
word-break:normal;
//强制换行：
word-break:break-all; 按字符截断换行 /* 支持IE和chrome，FF不支持*/
word-wrap:break-word; 按英文单词整体截断换行 /* 以上三个浏览器均支持 */
text-overflow: ellipsis; 超出宽度显示3个点
* 注意：单词换行需要父盒子为块级元素
//强制不换行：
white-space:nowrap;
//样式实现显示隐藏功能
.item>.btn{ visibilty:hidden }
.item:hover>.btn{ visibilty:visible }
//视频
================================================
//IE浏览器滚动条样式
body,div{
scrollbar-arrow-color:#12459c ; /*三角箭头的颜色*/
scrollbar-face-color: #12459c; /* 能拉动部分的颜色*/
scrollbar-shadow-color: #12459c;/* 能拉动部分的边框颜色*/
scrollbar-track-color: #052973; /* 立体滚动条背景颜色 */
}
//google滚动条样式
/* 设置滚动条的样式 */
::-webkit-scrollbar {
width: 5px!important;
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
border-radius: 10px;
background: rgba(31, 97, 198, 0.5);
-webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);
}
/* 内层滚动槽 */
::-webkit-scrollbar-track-piece {
width: 2px;
background: rgba(5, 41, 115, 1);
}
================================================
//固定位置
background-color:#1D69A9; width:100%; height:2.8em; margin:0 auto; overflow:hidden; position: fixed; bottom:0;
背景问题
================================================
//渐变
background-image: linear-gradient(-90deg, red, yellow);
//背景透明
background: transparent;
//视频背景透明
mix-blend-mode: screen;
//背景透明度
opacity:0.2;
//切角效果
方式一：background:linear-gradient(-135deg,transparent 27px, #58a 0);
方式二：
background:
linear-gradient(-45deg,transparent 15px, yellowgreen 0)bottom right,
linear-gradient(-135deg,transparent 15px, yellowgreen 0)top right,
linear-gradient(135deg,transparent 15px, yellowgreen 0)top left,
linear-gradient(45deg,transparent 15px, yellowgreen 0)bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
//折角效果
background:
radial-gradient(circle at bottom right,transparent 15px, #58a 0)bottom right,
radial-gradient(circle at top right,transparent 15px, #58a 0)top right,
radial-gradient(circle at top left,transparent 15px, #58a 0)top left,
radial-gradient(circle at bottom left,transparent 15px, #58a 0)bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
//阴影
box-shadow: 10px 10px 5px #888888;
================================================
//样式计算
height: calc(100% - 90px);
//图片加载出错替换成自己的图片
//定义了全局样式后，想改变同级别样式的样式
div{background: #0e387e; }
div.样式｛ background: #0e387e;｝//注意div和样式中间没有空格
//文本溢出时显示省略标记
word-break:keep-all;/* 不换行 */
white-space:nowrap;/* 不换行 */
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
超出两行或者多行，用省略号：
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
//带箭头的框
【动画】///////////////////////////////////
animation-fill-mode属性值：
none: 默认值，播放完动画后，画面停在起始位置
forwards: 播放完动画，停在animation定义的最后一帧
backwards: 如果设置了animation-delay，在开始到delay这段时间，画面停在第一帧。如果没有设置delay，画面是元素设置的初始值。
【动画-闪烁】///////////////////////////////////
.animation2 {
;-webkit-animation:twinkling 0.3s infinite ease-in-out;
animation:twinkling 0.3s infinite ease-in-out;
-webkit-animation-fill-mode:both;
animation-fill-mode:both;
}
@-webkit-keyframes twinkling {
0% {
opacity:0.5;
filter:alpha(opacity=20);
-webkit-transform:scale(1);
}
50% {
opacity:1;
filter:alpha(opacity=50);
-webkit-transform:scale(1.12);
}
100% {
opacity:0.5;
filter:alpha(opacity=20);
-webkit-transform:scale(1);
}
}@keyframes twinkling {
0% {
opacity:0.5;
filter:alpha(opacity=20);
-webkit-transform:scale(1);
}
50% {
opacity:1;
filter:alpha(opacity=50);
-webkit-transform:scale(1.12);
}
100% {
opacity:0.5;
filter:alpha(opacity=20);
-webkit-transform:scale(1);
}
}