画一条0.5px的直线

1
2
3
4
.line {
    height: 1px;
    transform: scale(0.5);
}

画一个三角形箭头朝上，鼠标放上后箭头朝下

1
2
3
4
5
6
7
8
9
10
11
12
13
.trigle-btn {
    width: 0;
    height: 0;
    padding: 0;
    border-width: 100px;
    border-style: solid;
    border-color: transparent transparent #999;
    transform-origin: center 75%;
    transition: transform .5s;
    &:hover {
        transform: rotate(180deg);
    }
}

实现元素吸底(固定显示在浏览器底部)

1
2
3
4
5
.bottom {
    position: fixed;
    width: 100%;
    bottom: 0; 
}

两列自适应布局(两列，左列宽度固定，右列宽度占满)

1
2
3
4
5
6
7
8
9
10
11
12
#div1 {
    width: 100px;
    display: inline-block;
    background-color: black;
}
#div2 {
    display: inline-block;
    position: absolute;
    left: 100px;
    right: 0px;
    background-color: red;
}

按钮鼠标悬停逐渐高亮

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
.menuButton {
  position: relative;
  transition-property: background-color, color;
  transition-duration: .5s;
  transition-timing-function: ease-out;
  text-align: left;
  background-color: grey;
  left: 5px;
  top: 5px;
  height: 26px;
  color: white;
  border-color: black;
  border-radius: 5px;
  font-family: sans-serif;
  text-decoration: none;
  box-shadow: 2px 2px 1px black;
  padding: 2px 4px;
  border: 1px solid black;
}

.menuButton:hover {
  position: relative;
  transition-property: background-color, color;
  transition-duration: .5s;
  transition-timing-function: ease-out;
  background-color:white;
  color:black;
  box-shadow: 2px 2px 1px black;
}

使用 flex 实现如下效果

1
2
3
4
5
<div class="container">
  <div class="item0"></div>
  <div class="item1"></div>
  <div class="item2"></div>
</div>
1
2
3
4
5
6
7
8
9
10
11
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.item0 {
  align-self: flex-start;
}
.item2 {
  align-self: flex-end;
}

执行如下代码 abc会是什么颜色？说明原因

abc

1
2
3
4
5
6
7
8
9
10
11
12
<style>
  #p1 {
    color: red;
  }
  p.container {
    color: blue;
  }
  .p {
    color: yellow;
  }
</style>
<p id="p1" class="container p">abc</p>

红色 和css选择器优先级有关 id > 类

如何給一个页面元素打码

高斯模糊
1
2
3
.filter {
    filter: blur(2px); /* 高斯模糊 */
}

如何将简体字显示为繁体字

繁体字
1
2
3
.font-variant-east-asian {
    font-variant-east-asian: traditional; 
}