一、特效
模糊、投影
| 名称 | 代码 |
|---|---|
| 外投影 | box-shadow: 0px 4px 4pxrgba(0, 0, 0, 0.25); |
| 内投影 | box-shadow: inset 1px 1px2px rgba(255, 255, 255, 0.25); |
| 图层模糊 | filter: blur(2px); |
| 高斯模糊 | backdrop-filter: saturate(180%) blur(20px); |
| 黑白 | filter: grayscale(1); |
滤镜
| 名称 | 代码 |
|---|---|
| 正常 - Normal | mix-blend-mode: normal; |
| 变暗 - Darken | mix-blend-mode: darken; |
| 正片叠底 - Multiply | mix-blend-mode: multiply; |
| 颜色加深 - Color Burn | mix-blend-mode: color-burn; |
| 变亮 - Lighten | mix-blend-mode: lighten; |
| 滤色 - Screen | mix-blend-mode: screen; |
| 颜色减淡 - Color Dodge | mix-blend-mode: color-dodge; |
| 叠加 - Overlay | mix-blend-mode: overlay; |
| 柔光 - Soft Light | mix-blend-mode: soft-light; |
| 强光 - Hard Light | mix-blend-mode: hard-light; |
| 差值 - Difference | mix-blend-mode: difference; |
| 排除- Exclusion | mix-blend-mode: exclusion; |
| 色相 - Hue | mix-blend-mode: hue; |
| 饱和度 - Saturation | mix-blend-mode: saturation; |
| 颜色 - Color | mix-blend-mode: color; |
| 明度 - Luminosity | mix-blend-mode: luminosity; |
| 查看效果 | |
二、鼠标
| 值 | 描述 |
|---|---|
| cursor | 需使用的自定义光标的 URL。 注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。 |
| 箭头 - default | 默认光标（通常是一个箭头） |
| 默认 - auto | 默认。浏览器设置的光标。 |
| 十字 - crosshair | 光标呈现为十字线。 |
| 小手 - pointer | 光标呈现为指示链接的指针（一只手） |
| 移动 - move | 此光标指示某对象可被移动。 |
| 禁止 - not-allowed | cursor:not-allowed; |
| 向右移动 - e-resize | 此光标指示矩形框的边缘可被向右（东）移动。 |
| 向上+向右移动 - ne-resize | 此光标指示矩形框的边缘可被向上及向右移动（北/东）。 |
| 向上+向左移动 - nw-resize | 此光标指示矩形框的边缘可被向上及向左移动（北/西）。 |
| 向上移动 - n-resize | 此光标指示矩形框的边缘可被向上（北）移动。 |
| 向下+向右移动 - se-resize | 此光标指示矩形框的边缘可被向下及向右移动（南/东）。 |
| 向下+向左移动 - sw-resize | 此光标指示矩形框的边缘可被向下及向左移动（南/西）。 |
| 向下移动 - s-resize | 此光标指示矩形框的边缘可被向下移动（南）。 |
| 向左移动 - w-resize | 此光标指示矩形框的边缘可被向左移动（西）。 |
| 文本 - text | 此光标指示文本。 |
| 忙 稍等 - wait | 此光标指示程序正忙（通常是一只表或沙漏）。 |
| 帮助 - help | 此光标指示可用的帮助（通常是一个问号或一个气球）。 |
| 使用：cursor: help; |
三、文字
常用属性
| 描述 | 值 |
|---|---|
| 首行缩进2字符 | text-indent:2em; (使用百分比：text-indent: 5%;) |
| 间距 | word-spacing: 30px; - word-spacing: 0.5em; |
| 去下划线 | text-decoration: none; |
| 不换行 | white-space: nowrap; |
| 按钮多点不选中 | onselectstart="return false;" style="-moz-user-select:none;" |
| 优雅的换行 | letter-spacing: .005em; |
| 英文大些 | text-transform: uppercase; |
| 连字符连接单词 | hyphens: none; （单词不打断换行留白）- hyphens: manual;（估计输入的连字符位置换行）- hyphens: auto;（根据文章换行位置自动添加连字符） |
彩色文字
color: #fff;
background: linear-gradient(135deg, #FF5C53 0%, #EF5C6E 25%, #A34DF3 49%, #905EFF 57%, #26CAFA 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;a 标签
a {
color: #0070c9;
}
a:hover, a:active, a:focus {
text-decoration: underline;
}
a:visited {
color: #003763;文字
多平台对比
| Android | iOS | Web |
|---|---|---|
| 10sp | 10pt | 0.625rem |
| 12sp | 12pt | 0.75rem |
| 14sp | 14pt | 0.875rem |
| 16sp | 16pt | 1rem |
| 18sp | 18pt | 1.125rem |
| 20sp | 20pt | 1.25rem |
| 22sp | 22pt | 1.375rem |
| 24sp | 24pt | 1.5rem |
| 60sp | 60pt | 3.75rem |
Web浏览器根据根元素大小计算REM（根em大小）。现代Web浏览器的默认值为16px，因此转换为SP_SIZE / 16 = rem。
四、图片
常用属性
| 描述 | 值 |
|---|---|
| 顶图 | background: url('https://huobi-1252264550.file.myqcloud.com/bit/banner/f96ede84-6218-4e13-97c4-6084d0191ebe.jpg') no-repeat center ; |
| 剧中 - 适应 | background: url(https://img-cdn.XXX.vip/sb_bjt.jpg) no-repeat; background-size: cover; background-position: 50%； |
五、Google Material效果
Google Material 鼠标移入卡牌
background-color: #fff;
box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
transition-property: box-shadow;
transition-duration: .25s;
transition-timing-function: linear;
border-radius: 2px;鼠标移入卡牌整行的链接文字时，背景色变化
a.cfc-info-card-item[_ngcontent-c56]:hover{
background-color: rgba(0,0,0,.04);
}
a.cfc-info-card-item[_ngcontent-c56] {
color: #000;
border: 0;
text-decoration: none;
transition: background-color .3s cubic-bezier(0.215, 0.61, 0.355, 1);
}抗锯齿
一般要给"加粗的文字"添加抗锯齿属性
b {
font-weight: 600;
-webkit-font-smoothing: antialiased;
}六、块块
整体缩放 / 360旋转
将配置区域的块块大小整体变为之前的0.72倍
transform: scale(0.72);
将块块进行360度旋转
transform: scale(-1);旋转
-ms-transform: rotate(36000deg);
-moz-transform: rotate(36000deg);
-webkit-transform: rotate(36000deg);
-o-transform: rotate(36000deg);
transition: all 240000ms linear;不错的顶部抬高块块
.divbg1{
background-image: linear-gradient(180deg,hsla(0,0%,100%,0) 50%,#fff),linear-gradient(70deg,#eaf5ff 32%,#f6fff8);
box-shadow: 0 3px 6px rgba(0,0,0,.05);
}
Mark一下 说不定用的上hh