css 使用技巧一

该系列所有的技巧都来至于 《css揭秘》 提取码：9x8n

背景与边框

1. 半透明边框

background-clip: border-box;

.wrapper {
  width: 50px;
  height: 50px;
  border: 10px solid hsla(0, 0%, 100%, .5);
  background: rgb(230, 59, 82);
  background-clip: border-box;
}

效果：

2. 多重边框

box-shadow，接受'，'进行分割

box-shadow: 0 0 0 10px pink, 0 0 0 20px rgb(235, 130, 144), 0 0 0 30px rgb(230, 59, 82);

3. 背景定位

background-position + background-origin （设置定位参考源）

.wrapper {
  width: 100px;
  height: 100px;
  padding: 10px;
  background: url('./images/test.jpg') no-repeat pink right bottom;
  background-size: 60px 60px;
  background-origin: content-box; /*  */
}

效果

4. 边框内圆角

border-radius + outline(利用其不跟随 border-radius 的特性) + box-shadow(填充 outline 与 border 之间的空隙)

.box9 {
  width: 100px;
  height: 50px;
  border-radius: 1.5em;
  outline: 10px solid rgb(230, 59, 82);
  box-shadow: 0 0 0 10px rgb(230, 59, 82);
  background-color: pink;
}

效果

5. 条纹背景

5-1 横条纹

linear-gradient + background-size

如果有文字信息，那么每一行文字的 line-height 与 background-size 的高度保持一致就行了

.box10 {
  width: 100px;
  height: 100px;
  background: linear-gradient(pink 50%, rgb(230, 59, 82) 0); /* 支持以'，'分割, 如果后面取的只小于前面的值，那么默认取前面的最大值 */
  background-size: 100% 20px; /* 控制每一组条纹的高度 */
}

效果

5-2 任意角度条纹

repeating-linear-gradient

.wrapper {
  width: 100px;
  height: 100px;
  background: repeating-linear-gradient(45deg, pink, rgb(230, 59, 82) 30px);
}

效果

6. 复杂的背景图案

6-1 围棋网格

linear-gradient

.wrapper {
  width: 100px;
  height: 100px;
  background: pink;
  background-image:
    linear-gradient(rgb(230, 59, 82) 1px, transparent 0), /* 上面 */
    linear-gradient(90deg, rgb(230, 59, 82) 1px, transparent 0);/* 左面 */
  background-size: 20px 20px;
}

效果

6-2 桌布风格

linear-gradient

.wrapper {
  width: 110px;
  height: 110px;
  background: white;
  background-image: linear-gradient(90deg, rgba(200, 0, 0, .5) 50%, transparent 0), linear-gradient(rgba(200, 0, 0, .5) 50%, transparent 0);
  background-size: 20px 20px;
}

效果

6-3 波点图

radial-gradient + background-position

.wrapper {
  width: 100px;
  height: 100px;
  background: pink;
  background-image: radial-gradient(rgb(228, 77, 97) 30%, transparent 0),
    radial-gradient(rgb(235, 130, 144) 30%, transparent 0);
  background-size: 30px 30px;
  background-position: 0 0, 15px 15px; /* 用逗号分隔，对应上面设置的background-image */
}

效果

6-4 棋盘

linear-gradient + background-position 利用4个三角形进行拼接

.wrapper {
  width: 100px;
  height: 100px;
  background: pink;
  background-image: linear-gradient(45deg, rgb(228, 77, 97) 25%, transparent 0), linear-gradient(45deg, transparent 75%, rgb(228, 77, 97) 0),
    linear-gradient(45deg, rgb(165, 22, 41) 25%, transparent 0), linear-gradient(45deg, transparent 75%, rgb(165, 22, 41) 0);
  background-size: 30px 30px;
  background-position: 0 0, 15px 15px, 15px 15px, 30px 30px;
}

效果

7. 伪随机背景

将 background-size 的尺寸设置为质数，那么重复一次所需要的长度至少为 41px * 61px * 83px

.wrapper {
  width: 100px;
  height: 100px;
  background: hsl(20, 40%, 90%);
  background-image: linear-gradient(90deg, #fb3 11px, transparent 0), linear-gradient(90deg, #ab4 23px, transparent 0),
    linear-gradient(90deg, #655 41px, transparent 0);
  background-size: 41px 100%, 61px 100%, 83px 100%;
}

8. 图像边框

8-1 图片作为背景

background-clip + background-origin

.wrapper {
  width: 100px;
  height: 100px;
  /* padding: 1em; */
  border: 1em solid transparent;
  background: linear-gradient(white, white) padding-box, url(./images/test.jpg) border-box 0 / cover;
}

效果

8-2 信封

repeating-linear-gradient设置间接条纹

.wrapper {
  width: 100px;
  height: 100px;
  border: .5em solid transparent;
  background: linear-gradient(white, white) padding-box,
    /* 设置背景 */
  repeating-linear-gradient(-45deg,
    red 0, red 12.5%,
    transparent 0, transparent 25%,
    #58a 0, #58a 37.5%,
    transparent 0, transparent 50%) 0 0 / 2em 2em border-box;
}

效果

8-3 蚂蚁线

原理与信封一样，边框设置为1px

/* 引入动画 */
@keyframes ants {
  to {
    background-position: 100%
  }
}

.wrapper {
  width: 100px;
  height: 100px;
  padding: 1em;
  border: 1px solid transparent; /* 设置边框为1px */
  background:
    linear-gradient(white, white) padding-box,
    repeating-linear-gradient(-45deg,
      black 0, black 25%, white 0, white 50%) 0 / .6em .6em;
  animation: ants 3s linear infinite;
}

效果