css-collection

CSS-tricks
6.7k 词

异形描边

使用SVG，设置viewBox、preserveAspectRatio='none'以及子的stroke、vector-effect='non-scaling-stroke'，转为base64设置为background，实现居中描边。
然后使用同样参数但无stroke有fill的SVG作为mask，消除外描边以及其被裁掉显示不理想的部分。

1
2
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='100%25' height='100%25' viewBox='0 0 580 143' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' fill='none' stroke='%23ffdda8' stroke-width='16' vector-effect='non-scaling-stroke' d='M78.326,139.366 C90.716,141.505 110.433,142.093 128.617,141.603 C161.287,143.123 191.119,142.023 191.119,142.023 C199.272,141.661 207.342,140.962 215.218,139.794 C233.509,137.078 246.589,130.641 266.593,130.523 C286.547,130.404 307.471,133.340 326.052,136.268 C347.272,139.610 366.526,144.987 389.952,141.867 C402.565,140.184 411.399,135.390 424.221,133.877 C455.068,130.238 487.094,139.306 516.083,131.468 C539.635,125.099 575.920,123.253 579.668,96.961 C581.080,87.060 553.300,85.336 560.647,74.918 C570.860,60.409 573.683,51.126 565.480,36.318 C557.944,22.740 519.649,13.001 486.294,12.150 C464.255,11.593 422.791,18.529 400.278,17.590 C349.616,15.477 299.576,-10.015 247.899,4.539 C229.344,9.765 189.216,9.079 164.348,11.064 C113.602,15.111 83.247,-7.420 26.718,37.158 C17.866,44.147 29.597,66.499 23.706,73.743 C17.431,81.455 0.413,87.064 1.912,95.984 C3.846,107.557 -4.270,109.893 7.241,115.259 C18.753,120.625 21.389,129.544 78.326,139.366 Z'/%3E%3Cpath fill-rule='evenodd' fill='none' stroke='%23ba383f' stroke-width='10' vector-effect='non-scaling-stroke' d='M78.326,139.366 C90.716,141.505 110.433,142.093 128.617,141.603 C161.287,143.123 191.119,142.023 191.119,142.023 C199.272,141.661 207.342,140.962 215.218,139.794 C233.509,137.078 246.589,130.641 266.593,130.523 C286.547,130.404 307.471,133.340 326.052,136.268 C347.272,139.610 366.526,144.987 389.952,141.867 C402.565,140.184 411.399,135.390 424.221,133.877 C455.068,130.238 487.094,139.306 516.083,131.468 C539.635,125.099 575.920,123.253 579.668,96.961 C581.080,87.060 553.300,85.336 560.647,74.918 C570.860,60.409 573.683,51.126 565.480,36.318 C557.944,22.740 519.649,13.001 486.294,12.150 C464.255,11.593 422.791,18.529 400.278,17.590 C349.616,15.477 299.576,-10.015 247.899,4.539 C229.344,9.765 189.216,9.079 164.348,11.064 C113.602,15.111 83.247,-7.420 26.718,37.158 C17.866,44.147 29.597,66.499 23.706,73.743 C17.431,81.455 0.413,87.064 1.912,95.984 C3.846,107.557 -4.270,109.893 7.241,115.259 C18.753,120.625 21.389,129.544 78.326,139.366 Z'/%3E%3C/svg%3E");
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='100%25' height='100%25' viewBox='0 0 580 143' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' fill='%23f00' stroke='none' vector-effect='non-scaling-stroke' d='M78.326,139.366 C90.716,141.505 110.433,142.093 128.617,141.603 C161.287,143.123 191.119,142.023 191.119,142.023 C199.272,141.661 207.342,140.962 215.218,139.794 C233.509,137.078 246.589,130.641 266.593,130.523 C286.547,130.404 307.471,133.340 326.052,136.268 C347.272,139.610 366.526,144.987 389.952,141.867 C402.565,140.184 411.399,135.390 424.221,133.877 C455.068,130.238 487.094,139.306 516.083,131.468 C539.635,125.099 575.920,123.253 579.668,96.961 C581.080,87.060 553.300,85.336 560.647,74.918 C570.860,60.409 573.683,51.126 565.480,36.318 C557.944,22.740 519.649,13.001 486.294,12.150 C464.255,11.593 422.791,18.529 400.278,17.590 C349.616,15.477 299.576,-10.015 247.899,4.539 C229.344,9.765 189.216,9.079 164.348,11.064 C113.602,15.111 83.247,-7.420 26.718,37.158 C17.866,44.147 29.597,66.499 23.706,73.743 C17.431,81.455 0.413,87.064 1.912,95.984 C3.846,107.557 -4.270,109.893 7.241,115.259 C18.753,120.625 21.389,129.544 78.326,139.366 Z'/%3E%3C/svg%3E");
已归档

左轮布局(x)

效果是子元素沿弧线分布，圆盘会随新元素出现旋转一格。

将flex布局调到适当方向，使用nth-child()或者nth-last-child()选择器，设定好每个子元素的偏移量，完成右侧的弧形分布，固定大小效果更理想。

左侧弹巢使用父元素上的静态伪元素作为背景，使用第一/最后一个子元素上的动态伪元素来播放旋转动画

（老板怎么都接不到客单啊，这些效果全都能做的啊）

祖宗元素contain: layout配合子元素position: fixed，使子元素越过父元素非static定位

（用来造奇怪的东西的办法x

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.father_n {
    contain: layout;
}

.father_1 {
    position: relative;
}

.child {
    position: fixed;
    left: 5px;
    top: 5px;
    width: 100%;
    height: 100%;
}

这样子，即使父元素.father_1为相对定位或绝对定位，子元素.child仍会越过父元素，作为祖宗元素.father_n的绝对定位。相当于父元素在使用相对定位或绝对定位时，对于子元素来说其可视为static定位。
应用场景：父元素需要非static定位设置位置，但子元素需要相对父元素的父元素进行定位、确定相对大小，而非父元素。（奇技淫巧用）

纯CSS实现文本外描边

一、透明text-stroke + 文本裁剪background

1
2
3
4
color:#000;
-webkit-text-stroke:3px transparent;
background:linear-gradient(90deg,red,orange,yellow,green,cyan,blue,purple) top left / 100% 100%;
-webkit-background-clip: text;
效果

效果完美，还能整些花活，但某些情况可能无法使用。
单用text-stroke，会同时产生内描边，这在一些情况下是不希望发生的，特别是描边比例过大时。
使用有透明text-stroke的文本裁剪背景，背景便填充在未被文本覆盖的stroke中，从而消除内描边。
（从b站源码里偷的x

二、多重模糊text-shadow

1
2
color:#000;
text-shadow:0 0 3px red,0 0 3px red,0 0 3px red,0 0 3px red,0 0 3px red,0 0 3px red,0 0 3px red,0 0 3px red,0 0 3px red,0 0 3px red,0 0 3px red,0 0 3px red,0 0 3px red,0 0 3px red,0 0 3px red,0 0 3px red,0 0 3px red,0 0 3px red,0 0 3px red,0 0 3px red,0 0 3px red,0 0 3px red,0 0 3px red,0 0 3px red,0 0 3px red,0 0 3px red,0 0 3px red,0 0 3px red,0 0 3px red,0 0 3px red,0 0 3px red,0 0 3px red,0 0 3px red,0 0 3px red;
效果

会出现边缘模糊，但兼容性好。
使用无偏移、带模糊半径的扩散text-shadow，从而产生外描边，但是边缘会产生模糊。

三、多向text-shadow

1
2
color:#000;
text-shadow:2px 0 red,-2px 0 red,0 2px red,0 -2px red,1.4px 1.4px red,1.4px -1.4px red,-1.4px 1.4px red,-1.4px -1.4px red;
效果

边缘锐利，但可产生部分瑕疵。
使用多向偏移的无模糊text-shadow，实现锐利边缘，但是在某些地方可能产生瑕疵，增加更多方向可能可以优化。
可以在这里生成css：StrokeGenerator

已归档

纯CSS更改单行文本的公共前缀

有时候要改文本，但只能用CSS，元素都被定死了。比如要把下面的CNY全部改成RMB：
可以规定元素大小，使用text-indent偏移首行文本开头，插值为前缀长度，设置任意间断，使间断落于公共前缀之后： 
1
2
3
4
5
6
7
#element {
    --prefix-width: 70px;
    --text-width: 150px;
    width: calc(var(--text-width) + var(--prefix-width));
    text-indent: var(--text-width);
    overflow-wrap: anywhere;
}
然后设置line-height为0或者往上偏移，再设置首行颜色为透明就好了： 
1
2
3
4
5
6
7
#element {
    line-height: 0;
}

#element::first-line {
    color: transparent;
}
加上前缀，偏移整体： 
1
2
3
4
5
6
7
8
9
10
11
12
#element::before {
    --prefix-width-new: 70px;
    content: "RMB";
    white-space: nowrap;
    position: absolute;
    right: calc(var(--text-width) + var(--prefix-width-new));
}

#element {
    position: relative;
    left: var(--prefix-width-new);
}
但是很不幸的是，这样就只能从左侧进行定位了。
全部的设置：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
#element {
    --prefix-width: 70px;
    --prefix-width-new: 70px;
    --text-width: 150px;
    width: calc(var(--text-width) + var(--prefix-width));
    text-indent: var(--text-width);
    overflow-wrap: anywhere;

    line-height: 0;
    
    position: relative;
    left: var(--prefix-width-new);
}

#element::first-line {
    color: transparent;
}

#element::before {
    content: "RMB";
    white-space: nowrap;
    position: absolute;
    right: calc(var(--text-width) + var(--prefix-width-new));
}