2020-09-10 ·前端·CSS

整理一些css样式

渐变文字 

span {
  background: linear-gradient(360deg, #97e9ff 0%, #ffffff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

span {
  background: linear-gradient(360deg, #97e9ff 0%, #ffffff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

文字阴影 

p {
  text-shadow: 0 0 12px rgba(24, 230, 255, 0.63);
}

p {
  text-shadow: 0 0 12px rgba(24, 230, 255, 0.63);
}

适应多种情况的自动换行 

p {
  word-break: keep-all;
  word-wrap: break-word;
  white-space: pre-wrap;
}

p {
  word-break: keep-all;
  word-wrap: break-word;
  white-space: pre-wrap;
}

单行超出内容省略 

p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

小天才的margin呢 

.iconfont + .iconfont {
  margin-left: 10px;
}
/* 任意两个连续的 `iconfont` 类中后面一个添加 `margin-left` 属性 */

.iconfont + .iconfont {
  margin-left: 10px;
}
/* 任意两个连续的 `iconfont` 类中后面一个添加 `margin-left` 属性 */

平滑滚动 （直接修改offsetTop都能平滑滚动） 

.container {
  scroll-behavior: smooth;
}

.container {
  scroll-behavior: smooth;
}

fit-content

firefox 的 width fit-content 目前还需要加前缀

div {
  width: fit-content;
  width: -moz-fit-content;
}

div {
  width: fit-content;
  width: -moz-fit-content;
}

问题来源： 在居中 el-form的时候，可以使用这个，加上margin: 0 auto就可以实现居中

居中 

div {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}

div {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}

返回