超出显示省略号
超出显示省略号
单行
.inform_content {
width: 100px; /*记住设置宽度，有时候父元素有宽度不设置也行*/
white-space: nowrap;
overflow : hidden;
text-overflow: ellipsis; /*省略号*/
}
多行（有兼容性问题）：
.inform_content {
width: 100px; /*记住设置宽度，有时候父元素有宽度不设置也行*/
height: 100px; /*记住设置高度，有时候父元素有高度不设置也行*/
display: -webkit-box;
-webkit-line-clamp: 2; /*几行省略就几*/
-webkit-box-orient: vertical;
overflow : hidden;
}
菜鸟以前写的，上面都不生效可以试试这个！
.inform_content {
width: 100px; /*记住设置宽度，有时候父元素有宽度不设置也行*/
overflow : hidden;
text-overflow: ellipsis; /*省略号*/
display: -webkit-box;
-webkit-line-clamp: 2; /*几行省略就几*/
-webkit-box-orient: vertical;
/* 这个好像web上不用加 */
word-break: break-all;
}
文字描边效果（荧光） -- 阴影实现
文字描边效果（荧光） -- 阴影实现
text-shadow:0 0 5px #0065fd,1px 1px 1px #0065fd,-1px -1px 1px #0065fd,0 0 10px #0065fd,0 0 20px #0065fd;
中间粗两边细的线
中间粗两边细的线
width: 90%;
height: 1px;
background: linear-gradient(left, #fff -4%,#9C9C9C 50%,#fff 100%);
锥形渐变
锥形渐变
background-image:conic-gradient(from 45deg at 25% 25%, white, deepskyblue);
参考：MDN
以前实现半圆比较麻烦，需要使用border，现在不需要了！
以前半圆实现代码：
border-radius:245px 0 0;
width: 245px;
height: 245px;
background: #f00;
现在：
width: 245px;
height: 245px;
border-radius: 50%;
background-image:conic-gradient(red, red 120deg, transparent 120deg);
注意：
可能会有锯齿效果！
背景渐变
背景渐变
background-image: linear-gradient(-45deg, #3967FF, #B500FE);
文字渐变
文字渐变
background-image: linear-gradient(-45deg, #3967FF, #B500FE);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip:text;
color:transparent;
注意：
1、文字渐变不能和文字描边的 text-shadow: #fff 1px 0 0, #fff 0 1px 0, #fff -1px 0 0, #fff 0 -1px 0 方式共存
2、使用text-stroke方式也不是很好，对字体要求比较大
text-stroke
在线测试：www.w3cschool.cn/tools/index…
文字和背景颜色混合
文字和背景颜色混合
color: #fff
mix-blend-mode: difference
将每个像素点颜色和父元素进行混合！有很多取值，difference 是差值算法，由 rgb 各个数值相减获得，所以效果入下：
mix-blend-mode其他取值：
screen --》 可以做视频文字，前提是文字黑色，背景白色
不规则阴影
不规则阴影
filter:drop-shadow(10px 1px 1px rgba(0,0,0,0.5);
结果：
drop-shadow 其他取值：
- blur(?px) --》 模糊(模糊半径) 默认0
- hue-rotate(?deg) --》 色相环旋转度数(度数)
- contrast(?) --》 对比度(?) 默认1
- grayscale(?) -- 》为1时变成黑白色
设置背后像素过滤效果
设置背后像素过滤效果
background: rgba(255,255,255,.2);
backdrop-filter: blur(5px);
效果：
学习地址：
