样式

CSS / CSS3

布局、省略号、渐变、移动端适配与常用样式片段。 — 共 30 条

共 30 条代码片段

A. 效果类

CSS 单行文本超出显示省略号width: 200px; /* 宽度必须 */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
CSS 多行文本超出显示省略号display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; /* x 为行数，任意整数 */
overflow: hidden;
flexflex-shrink: 0; /* 比例不缩小 */

flex-grow: 0; /* 即使有剩余空间，比例不放大 */

flex-basis: width; /* 固定空间 */

flex-wrap: wrap; /* 换行，第一行在上方 */
CSS img 等比例自动缩放img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}
解决 img、background 缩小变模糊img,
.bg {
  image-rendering: -moz-crisp-edges;
  image-rendering: -o-crisp-edges;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  -ms-interpolation-mode: nearest-neighbor;
}
解决 img、background 放大变模糊img,
.bg {
  image-rendering: pixelated;
}
背景渐变background: -webkit-linear-gradient(top, #133907, #0a2b00);

background: linear-gradient(270deg, rgba(251, 148, 108, 1) 0%, rgba(227, 32, 49, 1) 100%);
文本渐变background: linear-gradient(to right, red, blue);
-webkit-background-clip: text;
color: transparent;
彩色文本渐变background-image: -webkit-linear-gradient(
  left,
  #3498db,
  #f47920 10%,
  #d71345 20%,
  #f7acbc 30%,
  #ffd400 40%,
  #3498db 50%,
  #f47920 60%,
  #d71345 70%,
  #f7acbc 80%,
  #ffd400 90%,
  #3498db
);
color: transparent;
-webkit-background-clip: text;
background-size: 200% 100%;
-webkit-animation: slide 2s infinite linear;
animation: slide 5s infinite linear;
悬挂缩进text-indent: -2em;
padding-left: 2em;
对齐两端文本text-align-last: justify;
左右栏高度一致.wrap {
  overflow: hidden;
}
.left {
  float: left;
  margin-bottom: -10000px;
  padding-bottom: 10000px;
}
.right {
  float: left;
  margin-bottom: -10000px;
  padding-bottom: 10000px;
}

B. 样式类

iPhone X/11/12 兼容<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,viewport-fit=cover">

/* 重点：viewport-fit=cover */
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
隐藏滚动条::-webkit-scrollbar {
  display: none;
}
禁止选中文本-webkit-touch-callout: none;
-webkit-user-select: none;
user-select: none;
鼠标不可点击样式cursor: not-allowed;
input focus/* focus */
border-color: #50c3f7;
box-shadow: 0 0 8px 0 rgba(80, 195, 247, 0.4);

/* error */
border-color: #f72d51 !important;
box-shadow: 0 0 8px 0 rgba(247, 45, 81, 0.4);
file 文件选择框样式input::-webkit-file-upload-button {
  /* ... */
}
placeholder 样式input::-webkit-input-placeholder {
  /* ... */
}
placeholder 颜色input {
  -webkit-text-fill-color: blue;
}
input placeholder 没有垂直居中问题input {
  line-height: normal;
}
input 光标颜色input {
  caret-color: red;
}
文本选中颜色::selection {
  background: #f00;
  color: #fff;
}
去掉手持设备点击时出现的透明层a,
button,
input {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
}
去掉移动端 input 输入框上方内阴影input,
textarea {
  -webkit-appearance: none;
}
增加滑动弹性-webkit-overflow-scrolling: touch;
高度自动计算height: calc(100vh - 0.88rem);

C. 动画类

keyframes 动画定义@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

D. 媒体查询

媒体查询定义@media screen and (max-width: 1600px) {
  /* ... */
}

@media screen and (max-width: 1440px) {
  /* ... */
}

@media screen and (max-width: 1366px) {
  /* ... */
}

@media screen and (max-width: 1280px) {
  /* ... */
}

@media screen and (max-width: 1024px) {
  /* ... */
}

E. 组件效果

Toast.mask-toast {
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background: #444;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 3px;
  padding: 15px 40px;
  color: #fff;
}