GH BLOGS

Appearance

提示

记录常用并且记不住的css段,用于拷贝粘贴

文字显示三行超出隐藏显示省略号 ​

font属性连写 ​

font-style font-variant font-weight font-size/line-height font-family

font-size和font-family的值是必需的。如果缺少了其他值，默认值将被插入，如果有默认值的话。

background样式连写 ​

background: color url() repeat attachment position / size

css
/* 一行代码实现背景图片自适应视口并且不拉伸 */
background: url(../img/bg.png) no-repeat center / cover;
/* 一行代码实现背景图片自适应视口并且不拉伸 */
background: url(../img/bg.png) no-repeat center / cover;

动画 ​

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

动画名称 执行时间 何如完成一周期 等待多久开始 执行次数 是否反向 动画结束时用到样式 指定动画是否正在运行或已暂停。

css
div {
    animation: myfirst 5s;
    -webkit-animation: myfirst 5s; /* Safari 与 Chrome */
}

@keyframes myfirst {
    0% {
        background: red;
    }
    25% {
        background: yellow;
    }
    50% {
        background: blue;
    }
    100% {
        background: green;
    }
}
div {
    animation: myfirst 5s;
    -webkit-animation: myfirst 5s; /* Safari 与 Chrome */
}

@keyframes myfirst {
    0% {
        background: red;
    }
    25% {
        background: yellow;
    }
    50% {
        background: blue;
    }
    100% {
        background: green;
    }
}

媒体查询 ​

css
/* 屏幕宽度在0 - 300像素之间的样式 */
@media screen and (max-width: 300px) {
    body {
        background-color: lightblue;
    }
}

/* 屏幕宽度在800 - 1200像素之间的样式 */
@media screen and (min-width: 800px) and (max-width: 1200px) {
    body {
        background-color: lightblue;
    }
}
/* 屏幕宽度在0 - 300像素之间的样式 */
@media screen and (max-width: 300px) {
    body {
        background-color: lightblue;
    }
}

/* 屏幕宽度在800 - 1200像素之间的样式 */
@media screen and (min-width: 800px) and (max-width: 1200px) {
    body {
        background-color: lightblue;
    }
}

文字渐变 ​

函数 ​

单位 ​

vw、vh、vmax、vmin

  1. 1vw 等于1/100的视口宽度 （Viewport Width）
  2. 1vh 等于1/100的视口高度 （Viewport Height）
  3. vmin — vmin 的值是当前 vw 和 vh 中较小的值
  4. vmax — vw 和 vh 中较大的值

文字间隙 ​

less
.text{
  letter-spacing: 5px;
}
.text{
  letter-spacing: 5px;
}

响应式标识 ​

  • xs 0px - 576px
  • md 576px - 768px
  • lg 768px - 992px
  • xl 992px - 1200px
  • xxl >= 1600px

鼠标的cursor属性 ​

css背景渐变动画 & 文字混合模式 ​

缝边边框 ​

多重边框 ​

毛玻璃效果 ​

css
.test {
    width: 150px;
    height: 100px;
    backdrop-filter: blur(10px);
    box-shadow: 0 0 30px 10px #0000004d;
    border-radius: 8px;
}
.test {
    width: 150px;
    height: 100px;
    backdrop-filter: blur(10px);
    box-shadow: 0 0 30px 10px #0000004d;
    border-radius: 8px;
}

相框 ​

浏览器控制台console.log样式 ​

js
console.log("%c哈哈", 'color:red');
console.log("%c哈哈", 'color:red');

编译器终端console.log样式 ​

js
  console.log(
    "\x1b[31m%s\x1b[0m",
    "\n当前处于开发测试阶段，还会有大量更新，仅供参考，请勿用于实际项目！\n"
  );
// \x1b[31m 表示颜色,改变数值即改变颜色 %s 表示插入第二个参数的占位符 \x1b[0m 表示颜色只在一句生效

console.log('\x1b[36m%s\x1b[0m', '我是青色文字','颜色还原默认');
console.log('\x1b[33m', '我是黄色文字','我还是黄色文字');
  console.log(
    "\x1b[31m%s\x1b[0m",
    "\n当前处于开发测试阶段，还会有大量更新，仅供参考，请勿用于实际项目！\n"
  );
// \x1b[31m 表示颜色,改变数值即改变颜色 %s 表示插入第二个参数的占位符 \x1b[0m 表示颜色只在一句生效

console.log('\x1b[36m%s\x1b[0m', '我是青色文字','颜色还原默认');
console.log('\x1b[33m', '我是黄色文字','我还是黄色文字');
颜色参考
js
Reset = "\x1b[0m"
Bright = "\x1b[1m"
Dim = "\x1b[2m"
Underscore = "\x1b[4m"
Blink = "\x1b[5m"
Reverse = "\x1b[7m"
Hidden = "\x1b[8m"

FgBlack = "\x1b[30m"
FgRed = "\x1b[31m"
FgGreen = "\x1b[32m"
FgYellow = "\x1b[33m"
FgBlue = "\x1b[34m"
FgMagenta = "\x1b[35m"
FgCyan = "\x1b[36m"
FgWhite = "\x1b[37m"

BgBlack = "\x1b[40m"
BgRed = "\x1b[41m"
BgGreen = "\x1b[42m"
BgYellow = "\x1b[43m"
BgBlue = "\x1b[44m"
BgMagenta = "\x1b[45m"
BgCyan = "\x1b[46m"
BgWhite = "\x1b[47m"
Reset = "\x1b[0m"
Bright = "\x1b[1m"
Dim = "\x1b[2m"
Underscore = "\x1b[4m"
Blink = "\x1b[5m"
Reverse = "\x1b[7m"
Hidden = "\x1b[8m"

FgBlack = "\x1b[30m"
FgRed = "\x1b[31m"
FgGreen = "\x1b[32m"
FgYellow = "\x1b[33m"
FgBlue = "\x1b[34m"
FgMagenta = "\x1b[35m"
FgCyan = "\x1b[36m"
FgWhite = "\x1b[37m"

BgBlack = "\x1b[40m"
BgRed = "\x1b[41m"
BgGreen = "\x1b[42m"
BgYellow = "\x1b[43m"
BgBlue = "\x1b[44m"
BgMagenta = "\x1b[45m"
BgCyan = "\x1b[46m"
BgWhite = "\x1b[47m"

css首行缩进 ​

css首字特殊样式 ​

css首字母大写 ​

css 文字描边 ​

css使外部字体 ​

css
/*注册*/
@font-face {
    font-family: font;
      /*引入字体文件*/
    src: url('./font.TTF');
}
.target{
    font-family: 'font';
}
/*注册*/
@font-face {
    font-family: font;
      /*引入字体文件*/
    src: url('./font.TTF');
}
.target{
    font-family: 'font';
}

css让某个子元素占据父元素的剩余高度 ​

  • 已知其他元素的高度
less
& > .col:nth-child(1) {
  div:nth-child(1) {
    background: red !important;
    height: 400px !important;
  }
  div:nth-child(2) {
    height: calc(100% - 400px);
  }
}
& > .col:nth-child(1) {
  div:nth-child(1) {
    background: red !important;
    height: 400px !important;
  }
  div:nth-child(2) {
    height: calc(100% - 400px);
  }
}
  • 不知其他元素的高度,flex实现
less
& > .col:nth-child(2) {
  display: flex;
  flex-direction: column;
  div:nth-child(2) {
    flex: 1;
  }
}
& > .col:nth-child(2) {
  display: flex;
  flex-direction: column;
  div:nth-child(2) {
    flex: 1;
  }
}
  • 不知其他元素的高度,grid实现
less
& > .col:nth-child(3) {
  div:nth-child(1) {
    background: red !important;
    height: 100px !important;
  }
  display: grid;
  grid-template-rows: 100px 200px auto;
}
& > .col:nth-child(3) {
  div:nth-child(1) {
    background: red !important;
    height: 100px !important;
  }
  display: grid;
  grid-template-rows: 100px 200px auto;
}

提示

三种情况父级高度均为固定值,父级高度可知可不知,第一种跟第三种需要知道其他子元素高度总和

css文字竖排 ​

css
div {
    writing-mode: tb-rl;
}
div {
    writing-mode: tb-rl;
}

Copyright © 2023 YGHHJS