一、特效
模糊、投影
名称 | 代码 |
---|---|
外投影 | 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);
}
毛玻璃导航
-webkit-backdrop-filter: saturate(180%) blur(20px);
backdrop-filter: saturate(180%) blur(20px);
background-color: rgba(255,255,255,0.72);
Mark一下 说不定用的上hh