一些配色及样式

CSS Demo

滚动条

scrollbar-gutter

div {
    scrollbar-gutter: stable both-edges;
}

auto：默认值。滚动条的行为由浏览器自动决定。 stable：指定滚动条应该保持固定的位置，不会隐藏或覆盖内容。 always：指定滚动条始终可见，即使没有滚动。 both-edges：滚动条应在容器的两侧都保持固定位置，不会覆盖内容（仅适用于 Chrome 浏览器，并需要使用 -webkit- 前缀）。这些属性值可以根据你的需求来选择。例如，如果你希望滚动条在无需滚动时也可见，可以使用 scrollbar-gutter: always;。如果你想确保滚动条不会遮挡内容，可以使用 scrollbar-gutter: stable both-edges;（需要 Chrome 浏览器和 -webkit- 前缀）。需要注意的是，scrollbar-gutter 目前仅在部分浏览器中支持，并且需要使用不同的前缀（如 -webkit-scrollbar-gutter、-moz-scrollbar-gutter 等）。在使用时，请务必进行兼容性测试并提供备用方案，以便在不支持该属性的浏览器中获得良好的用户体验。

::-webkit-scrollbar {
    background-color: transparent;
    width: 12px;
}
::-webkit-scrollbar-thumb {
    background-color: #e9eaec;
    border-radius: 8px;
    background-clip: content-box;
    border: 2px solid transparent;
}
body[scroll]::-webkit-scrollbar-thumb,
::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.5);
}

color

复制

#92989f

复制

#dadde0

复制

#e3e4e7

复制

#2e3338

复制

#313438

复制

#93989f

复制

#60656c

复制

#dee0e4

复制

#e9eaec

复制

#aeb2b7

复制

#1a7af8

复制

#ff2b00

复制

#16d9a8

复制

#f8f8f8

复制

#f2a200

复制

#fdebec

复制

#fbf3db

复制

#e7f3f8

复制

#edf3ec

复制

#f4f0f7

复制

#ffd5fe

复制

#ff8dc2

复制

#ff3e97

复制

#b7234c

复制

#dceb87

复制

#ffcce4

复制

#ffc660

复制

#87ceeb

复制

#fedcbd

复制

#deab8a

复制

#444693

复制

#817936

复制

#f7acbc

复制

#ef5b9c

复制

#7f7522

复制

#2b4490

复制

#feeeed

复制

#f47920

复制

#80752c

复制

#2a5caa

复制

#f05b72

复制

#905a3d

复制

#87843b

复制

#224b8f

复制

#f15b6c

复制

#8f4b2e

复制

#726930

复制

#003a6c

复制

#f8aba6

复制

#87481f

复制

#454926

复制

#102b6a

复制

#f69c9f

复制

#5f3c23

复制

#2e3a1f

复制

#426ab3

复制

#f58f98

复制

#6b473c

复制

#4d4f36

复制

#46485f

复制

#ca8687

复制

#faa755

复制

#b7ba6b

复制

#4e72b8

复制

#f391a9

复制

#fab27b

复制

#b2d235

复制

#181d4b

复制

#bd6758

复制

#f58220

复制

#5c7a29

复制

#1a2933

复制

#d71345

复制

#843900

复制

#bed742

复制

#121a2a

复制

#d64f44

复制

#905d1d

复制

#7fb80e

复制

#0c212b

复制

#d93a49

复制

#8a5d19

复制

#a3cf62

复制

#6a6da9

复制

#b3424a

复制

#8c531b

复制

#769149

复制

#585eaa

复制

#c76968

复制

#826858

复制

#6d8346

复制

#494e8f

复制

#bb505d

复制

#64492b

复制

#78a355

复制

#afb4db

复制

#987165

复制

#ae6642

复制

#abc88b

复制

#9b95c9

复制

#ac6767

复制

#56452d

复制

#74905d

复制

#6950a1

复制

#973c3f

复制

#96582a

复制

#cde6c7

复制

#6f60aa

复制

#b22c46

复制

#705628

复制

#1d953f

复制

#867892

复制

#a7324a

复制

#4a3113

复制

#77ac98

复制

#918597

复制

#aa363d

复制

#412f1f

复制

#007d65

复制

#6f6d85

复制

#ed1941

复制

#845538

复制

#84bf96

复制

#594c6d

复制

#f26522

复制

#8e7437

复制

#45b97c

复制

#694d9f

复制

#d2553d

复制

#69541b

复制

#225a1f

复制

#6f599c

复制

#b4534b

复制

#d5c59f

复制

#367459

复制

#8552a1

复制

#ef4136

复制

#cd9a5b

复制

#007947

复制

#543044

复制

#c63c26

复制

#cd9a5b

复制

#40835e

复制

#63434f

复制

#f3715c

复制

#b36d41

复制

#2b6447

复制

#7d5886

复制

#a7573b

复制

#df9464

复制

#005831

复制

#401c44

复制

#aa2116

复制

#b76f40

复制

#006c54

复制

#472d56

复制

#b64533

复制

#ad8b3d

复制

#375830

复制

#45224a

复制

#b54334

复制

#dea32c

复制

#274d3d

复制

#411445

复制

#853f04

复制

#d1923f

复制

#375830

复制

#4b2f3d

复制

#840228

复制

#c88400

复制

#27342b

复制

#402e4c

复制

#7a1723

复制

#c37e00

复制

#65c294

复制

#c77eb5

复制

#a03939

复制

#c37e00

复制

#73b9a2

复制

#ea66a6

复制

#8a2e3b

复制

#e0861a

复制

#72baa7

复制

#f173ac

复制

#8e453f

复制

#ffce7b

复制

#005344

复制

#fffffb

复制

#8f4b4a

复制

#fcaf17

复制

#122e29

复制

#fffef9

复制

#892f1b

复制

#ba8448

复制

#293047

复制

#f6f5ec

复制

#6b2c25

复制

#896a45

复制

#00ae9d

复制

#d9d6c3

复制

#733a31

复制

#76624c

复制

#508a88

复制

#d1c7b7

复制

#54211d

复制

#6d5826

复制

#70a19f

复制

#f2eada

复制

#78331e

复制

#ffc20e

复制

#50b7c1

复制

#d3d7d4

复制

#53261f

复制

#fdb933

复制

#00a6ac

复制

#999d9c

复制

#f15a22

复制

#d3c6a6

复制

#78cdd1

复制

#a1a3a6

复制

#b4533c

复制

#c7a252

复制

#008792

复制

#9d9087

复制

#8a8c8e

复制

#84331f

复制

#dec674

复制

#94d6da

复制

#f47a55

复制

#74787c

复制

#b69968

复制

#afdfe4

复制

#c1a173

复制

#f15a22

复制

#5e7c85

复制

#7c8577

复制

#f3704b

复制

#dbce8f

复制

#76becc

复制

#72777b

复制

#da765b

复制

#ffd400

复制

#90d7ec

复制

#77787b

复制

#c85d44

复制

#ffd400

复制

#009ad6

复制

#4f5555

复制

#ae5039

复制

#ffe600

复制

#145b7d

复制

#6c4c49

复制

#6a3427

复制

#f0dc70

复制

#11264f

复制

#563624

复制

#8f4b38

复制

#fcf16e

复制

#7bbfea

复制

#3e4145

复制

#8e3e1f

复制

#decb00

复制

#33a3dc

复制

#3c3645

复制

#f36c21

复制

#cbc547

复制

#228fbd

复制

#464547

复制

#b4532a

复制

#6e6b41

复制

#2468a2

复制

#130c0e

复制

#b7704f

复制

#596032

复制

#2570a1

复制

#281f1d

复制

#de773f

复制

#525f42

复制

#2585a6

复制

#2f271d

复制

#c99979

复制

#5f5d46

复制

#1b315e

复制

#1d1626

border

右上角的标签

;

常见的归一化颜色色值

黑色： 1.0, 0.0, 0.0

transparent

R:G:B:

animation

CSS Filter

该 filter 转换工具为张鑫旭大佬的作品,此处是以 iframe 的形式嵌入，方便使用。

CSS Value

:root {
    $white: #fff;
    $black: #000;
    $gray: #92989f;
    $disable-gray: #dadde0;
    $deep-gray: #e3e4e7;
    $main-text: #2e3338;
    $text: #313438;
    $text-gray: #93989f;
    $dark-gray: #60656c;
    $light-gray: #dee0e4;
    $border: 1px solid #e9eaec;
    $placeholder-color: #aeb2b7;
    $blue: #1a7af8;
    $red: #ff2b00;
    $green: #16d9a8;
    $bg: #f8f8f8;
    $yellow: #f2a200;
}

一些配色

.purple-bg {
    background: linear-gradient(to right, #b5afe8 0%, #6076e8 100%);
    border-radius: 20px;
    box-shadow: 0 1px 10px rgba(96, 118, 232, 0.5) inset;
}

紫色配色

* {
    box-shadow: 0 1px 20px 0 rgba(0, 0, 0, 0.16);

    box-shadow: 0 1px 20px 0 rgba(112, 152, 204, 0.16);

    box-shadow: 0 3px 14px 0 rgba(26, 122, 248, 0.37); /*//偏蓝*/

    border: 1px solid #030911;
    border-bottom: 1px solid rgba(3, 9, 17, 0.08);
    border-radius: 0 8px 0 8px;
    background-color: rgba(49, 52, 56, 0.3);
}

CSS Animation

@keyframes upAndDown {
    0% {
        transform: translateY(6px);
    }
    100% {
        transform: translateY(-6px);
    }
}
.animation {
    animation: 4000ms ease-in-out 0s infinite alternate none running upAndDown;
}

资源引用等

iconfont

使用方法：

<script src=" //at.alicdn.com/t/font_1473319176_4914331.js"></script>
<style>
    .icon {
        width: 1em;
        height: 1em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
    }
</style>
<svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-xxx"></use>
</svg>

小程序中的使用参考 Times

CSS Demo​

滚动条​

scrollbar-gutter​

color​

常见的归一化颜色色值​

animation​

CSS Filter​

CSS Value​

一些配色​

CSS Animation​

资源引用等​

iconfont​