好用的css技巧

发表于

汇总开发中可使用的好用又简单的css技巧。

:active伪类与CSS数据上报

1
2
3
4
5
6
7
8
.button-1:active::after {
    content: url(./pixel.gif?action=click&id=button1);
    display: none;
}
.button-2:active::after {
    content: url(./pixel.gif?action=click&id=button2);
    display: none;
}

如果想要知道两个按钮的点击率，CSS就可以实现，无需通过JavaScript开发,当点击按钮的时候，相关行为数据就会上报给服务器，这种上报就算把JavaScript禁用掉也无法阻止，方便快捷，特别适合A/B测试

:empty 伪类

div元素为空就会匹配:empty伪类，呈现出虚线框

1
<div class="cs-empty"></div>
1
2
3
4
5
.cs-empty:empty{
    width: 120px;
    padding: 20px;
    border: 10px dashed;
}

虚线框

隐藏空元素

在动态列表之类，如果没有加载出来前，会因为margin之类的存在大量空白，可通过该方式隐藏

1
2
3
.cs-module:empty {
    display: none;
}

字段缺失智能提示

1
2
3
4
5
6
7
8
9
10
<dl>
    <dt>姓名：</dt>
    <dd>张三</dd>
    <dt>性别：</dt>
    <dd></dd>
    <dt>手机：</dt>
    <dd></dd>
    <dt>邮箱：</dt>
    <dd></dd>
</dl>
1
2
3
4
dd:empty::before {
    content: '暂无';
    color: gray;
}

虚线框

数据为空提示

搜索数据为空时之类的场景可以使用

1
2
3
4
5
6
7
.cs-module:empty::before{
    content: '没有搜索结果'；
    display: block;
    line-height: 300px;
    text-align: center;
    color: gray;
}

:only-child伪类

1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- 1. 只有加载图片 -->
<div class="cs-loading">
    <img src="./loading.png" class="cs-loading-img">
</div>
<!-- 2. 只有加载文字 -->
<div class="cs-loading">
    <p class="cs-loading-p">正在加载中...</p>
</div>
<!-- 3. 加载图片和加载文字同时存在 -->
<div class="cs-loading">
    <img src="./loading.png" class="cs-loading-img">
    <p class="cs-loading-p">正在加载中...</p>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
.cs-loading {
    height: 150px;
    position: relative;
    text-align: center;
    /* 与截图无关，截图示意用 */
    border: 1px dotted;
}
/* 图片和文字同时存在时在中间留点间距 */
.cs-loading-img {
    width: 32px; height: 32px;
    margin-top: 45px;
    vertical-align: bottom;
}
.cs-loading-p {
    margin: .5em 0 0;
    color: gray;
}
/* 只有图片的时候居中绝对定位 */
.cs-loading-img:only-child {
    position: absolute;
    left: 0; right: 0; top: 0; bottom: 0;
    margin: auto;
}
/* 只有文字的时候行号近似垂直居中 */
.cs-loading-p:only-child {
    margin: 0;
    line-height: 150px;
}

onlychild

三角形

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/** 正三角 */
.triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 25px 40px 25px;
  border-color: transparent transparent rgb(245, 129, 127) transparent;
}
/** 倒三角 */
.triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 40px 25px 0 25px;
  border-color:  rgb(245, 129, 127) transparent transparent transparent;
}

虚线效果

具体的虚线的颜色和间距都可以通过repeating-linear-gradient生成的条纹背景去调整

css

1
2
3
4
.dotted-line{
    border: 1px dashed transparent;
    background: linear-gradient(white,white) padding-box, repeating-linear-gradient(-45deg,#ccc 0, #ccc .25em,white 0,white .75em);
}

文本超出省略号

单行省略

css

1
2
3
4
5
6
.single-ellipsis{
  width: 500px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

多行文本

css

1
2
3
4
5
6
7
8
.multiline-ellipsis {
  display: -webkit-box;
  word-break: break-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4; //需要显示的行数
  overflow: hidden;
  text-overflow: ellipsis;
}

扩展: -webkit-line-clamp 是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。

时间轴

css

1
2
3
4
5
6
<div class="timeline-content">
  <div v-for='(item, index) in timeLine' :key='index' class="time-line">
    <div :class="`state-${item.state} state-icon`"></div>
    <div class="timeline-title">{{item.title}}</div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
/** 时间轴 */
.timeline-content{
  display: flex;
  .time-line{
    padding: 10px 10px 10px 20px;
    position: relative;
    &::before{
      content: '';
      height: 1px;
      width: calc(100% - 34px);
      background: #EBEBEB;
      position: absolute;
      left: 24px;
      top: 0;
    }
  }
  .state-icon{
    width: 20px;
    height: 20px;
    position: absolute;
    top: -12px;
    left: 0;
  }
  .state-1{
    background: url('https://static.daojia.com/assets/project/tosimple-pic/fen-zu-7-copy-6bei-fen_1589266208621.png') no-repeat;
    background-size: cover;
  }
  .state-2{
    background: url('https://static.daojia.com/assets/project/tosimple-pic/12_1589266226040.png') no-repeat;
    background-size: cover;
  }
  .state-3{
    background: url('https://static.daojia.com/assets/project/tosimple-pic/fen-zu-7-copy-3_1589266140087.png') no-repeat;
    background-size: cover;
  }
}

calc()函数 用来计算css属性的值。

1
2
/** 属性：calc（expression）*/
宽度：calc（100％ - 34px）;

滚动条

css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
.scroll-container {
 height: 250px;
 border: 1px solid #ddd;
 padding: 15px;
 overflow: auto;
 .row {
   margin: 0;
   line-height: 1.5;
 }

 &::-webkit-scrollbar {
   width: 8px;
   background: white;
 }
 &::-webkit-scrollbar-corner, /* 滚动条角落 */
 &::-webkit-scrollbar-thumb,
 &::-webkit-scrollbar-track {
   border-radius: 4px;
 }
 &::-webkit-scrollbar-corner,
 &::-webkit-scrollbar-track {
   /* 滚动条轨道 */
   background-color: rgba(180, 160, 120, 0.1);
   box-shadow: inset 0 0 1px rgba(180, 160, 120, 0.5);
 }
 &::-webkit-scrollbar-thumb {
   /* 滚动条手柄 */
   background-color: #00adb5;
 }
}

卡卷效果

css

1
2
3
4
5
6
7
8
9
10
.coupon{
  width: 300px;
  height: 100px;
  position: relative;
  background: radial-gradient(circle at right bottom, transparent 10px, #ffffff 0) top right /50% 51px no-repeat,
    radial-gradient(circle at left bottom, transparent 10px, #ffffff 0) top left / 50% 51px no-repeat,
    radial-gradient(circle at right top, transparent 10px, #ffffff 0) bottom right / 50% 51px no-repeat,
    radial-gradient(circle at left top, transparent 10px, #ffffff 0) bottom left / 50% 51px no-repeat;
  filter: drop-shadow(2px 2px 2px rgba(0,0,0,.2));
}

阴影效果

css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
// 三角形阴影
.shadow-triangle{
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 50px 50px 50px;
    border-color: transparent transparent rgb(245, 129, 127) transparent;
    filter:drop-shadow(10px 0px 10px  rgba(238, 125, 55,0.5));
}

// 缺圆投影
.circle-square{
    width:100px;
    height:50px;
    line-height: 50px;
    background: radial-gradient(circle at bottom right, transparent 20px, rgb(245, 129, 127) 15px);
    filter: drop-shadow(2px 2px 2px rgba(238, 132, 66, 0.9));
}

// 气泡阴影
.tip {
    width: 100px;
    height: 30px;
    line-height: 30px;
    border: 1px solid rgb(245, 129, 127);
    border-radius: 4px;
    position: relative;
    background-color: #fff;
    filter: drop-shadow(0px 2px 4px rgba(245, 129, 127, 0.9));
    &::before {
      content: "";
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 0 10px 10px 10px;
      border-color: transparent transparent #fff transparent;
      position: absolute;
      top: -10px;
      left: 0;
      right: 0;
      margin: auto;
      z-index: 2;
    }
    &::after {
      content: "";
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 0 10px 10px 10px;
      border-color: transparent transparent rgb(245, 129, 127) transparent;
      position: absolute;
      top: -11px;
      left: 0;
      right: 0;
      margin: auto;
      z-index: 1;
    }
}

页面全部置灰

特殊时期，需要网站整体置灰时使用。

1
2
3
4
5
6
7
8
9
html {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: gray;
  filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}
------本文结束 感谢阅读------