文字阴影/边框阴影对比，HTML/Vue代码在线实时编辑、预览

HTML

格式化

支持Emmet，输入 p 后按 Tab键试试吧！

<head> ...

展开

</head>

<body>

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14

            
            - let hue = 335, max = 360;
- let s = min || 0;
- let e = max || max === 0 ? max : 100;
- let v = hue || hue === 0 ? hue : .5*(s + e);

body(style=`--hue: ${hue}`)
    header
        h1 文字阴影/边框阴影对比
        em (blur 模糊数值为阴影的一半)
    .rect-out: style.text-css .text-css { text-shadow: 0 0 8px hsl(var(--hue), 100%, 50%) }
    .rect-out: style.text-svg .text-svg { filter: drop-shadow(0 0 4px hsl(var(--hue), 100%, 50%)) }
    style.rect-css .rect-css { box-shadow: 0 0 8px hsl(var(--hue), 100%, 50%) }
    style.rect-svg .rect-svg { filter: drop-shadow(0 0 4px hsl(var(--hue), 100%, 50%)) }
    input(type='range' min=min value=hue max=max aria-label='control the hue')

编辑器加载中

</body>

SCSS

格式化

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

            
            html, body { display: grid }

html { height: 100% }

body {
    display: grid;
    grid-gap: 2em;
    place-content: center;
    background: #121212;
    color: hsl(var(--hue), 75%, 75%)
}

header { text-align: center }

h1 { font: 2em/ 1.5 oxanium, sans-serif }

em {
    color: tomato;
    font: italic 1em/ 1.5 gluten, cursive
}

style {
    display: block;
    font: 1.25em/ 2 ubuntu mono
}

[class*='rect'] {
    border: solid 2px #ababab;
    padding: .5em;
    border-radius: .5em;
    background: #212121
}

$track-h: 6px;
$thumb-d: 1.5em;

@mixin track {
    height: $track-h;
    border-radius: $track-h;
    background: #ababab
}

@mixin thumb($f: 0) {
    border: none;
    width: $thumb-d;
    aspect-ratio: 1;
    border-radius: 50%;
    background: hsl(var(--hue), 85%, 65%);
    
    @if($f > 0) {
        margin-top: calc(.5*(#{$track-h} - #{$thumb-d}));
    }
}

[type='range'] {
    &, &::-webkit-slider-thumb { appearance: none }
    
    background: transparent;
    font: inherit;
    
    &::-webkit-slider-runnable-track { @include track }
    &::-moz-range-track { @include track }
    
    &::-webkit-slider-thumb { @include thumb(1) }
    &::-moz-range-thumb { @include thumb }
}

编辑器加载中

格式化

            
                1

            
            addEventListener('input', e => document.body.style.setProperty('--hue', +e.target.value))

编辑器加载中