CSS秘籍-高效样式技巧

- filter让图像变为黑白
- filter图像添加阴影
- filter图像高斯模糊
- filter图像曝光
- aspect-ratio设置从横比
- linear-gradient线性渐变
- 单行文本省略
- 多行文本省略
- [使用 :not()简化代码](#使用 :not()简化代码)
- text-shadow文本模糊
- pointer-events禁用鼠标事件
- calc()动态赋值
- vw实现字体大小变化
- font-display优化字体加载
- hyphens增加连字符
- body设置line-height
- text-align文本两端对齐
- writing-mode文字竖向排版
- user-select禁用文本选中复制
- ::selection自定义选择的颜色
- translate开启硬件加速
- text-transform大小写控制
- ::first-letter设置第一个字母
- word-spacing控制单词间距
- 自定义滚动条
- 伪元素显示链接url
- attrs()展示tooltips
- @keyframes实现打字机效果
- scroll-behavior页面平滑滚动
- :empty隐藏空元素
- [object-fit 控制图像适配性](#object-fit 控制图像适配性)
- flex水平垂直居中

持续更新ing...

filter让图像变为黑白

让你的彩色照片显示为黑白照片

html 复制代码

<img class="image1"
src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/dcf2ba9b17ef9b09020a67e42fa6cf28.jpg" alt="Ai绘图" />
<img class="image2"
src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/dcf2ba9b17ef9b09020a67e42fa6cf28.jpg" alt="Ai绘图" />

css 复制代码

.image1 {
    width: 200px;
    height: 200px;
    object-fit: cover;
}

.image2 {
    width: 200px;
    height: 200px;
    object-fit: cover;

    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
}

filter图像添加阴影

box-shadow是设置盒子阴影， filter: drop-shadow只针对一张无背景的图片。遵循给给定图片的 Alpha 通道。因此阴影是基于图片的内部形状，而不是显示在图片外面。

css 复制代码

.image1 {
    width: 200px;
    height: 200px;
    object-fit: cover;
}

.image2 {
    width: 200px;
    height: 200px;
    object-fit: cover;

    filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.5));
}

filter图像高斯模糊

box-shadow是设置盒子阴影， filter: drop-shadow只针对一张无背景的图片。

css 复制代码

.image1 {
    width: 200px;
    height: 200px;
    object-fit: cover;
}

.image2 {
    width: 200px;
    height: 200px;
    object-fit: cover;

    filter: blur(5px);
}

filter图像曝光

brightness() CSS函数将线性乘数应用于输入图像，使其看起来更亮或更暗。

css 复制代码

.image1 {
    width: 200px;
    height: 200px;
    object-fit: cover;
}

.image2 {
    width: 200px;
    height: 200px;
    object-fit: cover;

    filter: brightness(2);
}

aspect-ratio设置从横比

使用纵横比属性简化纵横比盒子的创建。

html 复制代码

<div>
    <img class="aspect-ratio-box1"
        src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/dcf2ba9b17ef9b09020a67e42fa6cf28.jpg"
        alt="Ai绘图" />
    <img class="aspect-ratio-box2"
        src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/dcf2ba9b17ef9b09020a67e42fa6cf28.jpg"
        alt="Ai绘图" />
    <img class="aspect-ratio-box3"
        src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/dcf2ba9b17ef9b09020a67e42fa6cf28.jpg"
        alt="Ai绘图" />
    <img class="aspect-ratio-box4"
        src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/dcf2ba9b17ef9b09020a67e42fa6cf28.jpg"
        alt="Ai绘图" />
</div>

css 复制代码

div {
    width: 500px;
    height: 500px;
}

.aspect-ratio-box1 {
    max-width: 200px;
    aspect-ratio: auto;
}

.aspect-ratio-box2 {
    max-width: 200px;
    aspect-ratio: 1/1;
}

.aspect-ratio-box3 {
    max-width: 200px;
    aspect-ratio: 4/3;
}


.aspect-ratio-box4 {
    max-width: 200px;
    aspect-ratio: 16/9;
}

linear-gradient线性渐变

html 复制代码

<div class="gradient-box">
    这是一个带有线性渐变背景的盒子。
</div>

单行文本省略

css 复制代码

div {
    width: 100px;
    height: 100px;
    border: 1px solid gray;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

多行文本省略

css 复制代码

div {
    width: 100px;
    border: 1px solid gray;

    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

使用 :not()简化代码

css 复制代码

div>li {
    border: 1px solid black;
}

div>li:last-child {
    border: none;
}

等价于：

css 复制代码

div>li:not(:last-child) {
    border: 1px solid black;
}

text-shadow文本模糊

css 复制代码

div {
    color: transparent;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
}

pointer-events禁用鼠标事件

css 复制代码

div {
    pointer-events: none;
}

calc()动态赋值

html 复制代码

<div>
    <div class="pink"></div>
    <div class="grey"></div>
</div>

css 复制代码

div {
    width: 400px;
    border: 1px solid black;
}

.pink {
    background-color: pink;
    height: 100px;
    width: 100px;
}

.grey {
    background-color: grey;
    height: 100px;
    width: calc(100% - 100px * 2);
    ;
}

vw实现字体大小变化

根据视口宽度调整字体大小，实现更加响应式的排版。

css 复制代码

body {
    font-size: calc(16px + 1vw);
}

font-display优化字体加载

使用font-display: swap;属性提高网页字体性能，让自定义字体加载时显示备用字体。

css 复制代码

@font-face {
    font-family: 'your-font1';
    src: url('your-font2.woff2') format('woff2');
    font-display: swap;
}

hyphens增加连字符

通过使用hyphens属性允许自动连字符以提高文本的可读性。

html 复制代码

<div class="text-container">
    This is a very long sentence that needs to be wrapped properly with hyphens to improve readability.

    <p>Another example of a verylongwordwithoutspaces that should be broken down into multiple lines.</p>

    <p>And here is a third paragraph with a mix of short and long words, including: <span
            style="word-break: normal;">internationalization</span>.</p>
</div>

css 复制代码

.text-container {
    width: 300px;
    border: 1px solid #ccc;
    padding: 10px;
    hyphens: auto;
    /* 自动插入连字符 */
    word-wrap: break-word;
    /* 长单词自动换行 */
    -webkit-hyphens: auto;
    /* 对于旧版 Webkit 浏览器 */
    -moz-hyphens: auto;
    /* 对于 Firefox */
    -ms-hyphens: auto;
    /* 对于 IE */
}

body设置line-height

不需要分别给每个div、p标签设置line-height，可以直接给body设置line-height，这样文本元素可以直接继承设置的默认值。

css 复制代码

body {
  line-height: 1;
}

text-align文本两端对齐

设置前：
设置后：

html 复制代码

<div class="wrap">
    模拟很长的文字，模拟很长的文字，模拟很长的文字,模拟很长的文字，模拟很长的文字，模拟很长的文字,模拟很长的文字，模拟很长的文字，模拟很长的文字
</div>

css 复制代码

body {
    width: 300px;
    height: 300px;
    border: 1px solid #000;
}

.wrap {
    text-align: justify;
    /* ie6-8 */
    text-justify: distribute-all-lines;
    /* 单独设置最后一行的对齐方式 */
    text-align-last: left;
    -moz-text-align-last: justify;
    -webkit-text-align-last: justify;
}

writing-mode文字竖向排版

单列展示：

html 复制代码

<div class="wrap">
    模拟很长的文字，模拟很长的文字，模拟很长的文字,模拟很长的文字，模拟很长的文字，模拟很长的文字,模拟很长的文字，模拟很长的文字，模拟很长的文字
</div>

css 复制代码

body {
    width: 300px;
    height: 300px;
    border: 1px solid #000;
}


.wrap {
    /* 单列宽度 */
    width: 25px;
    /* 文本宽度 */
    line-height: 25px;
    font-size: 16px;
    /* 英文、标点自动换行 */
    word-wrap: break-word;
}

多列展示：

css 复制代码

body {
    width: 300px;
    height: 300px;
    border: 1px solid #000;
}


.wrap {
    line-height: 30px;
    text-align: justify;
    /* 从左向右 */
    writing-mode: vertical-lr;
    /* IE从左向右 */
    writing-mode: tb-lr;
    /* 从右向左 */
    /* writing-mode: vertical-rl;   */
    /* ie从右向左 */
    /* writing-mode: tb-rl;         */
}

user-select禁用文本选中复制

css 复制代码

div {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    /* 不可选中文本，不可复制 */
    user-select: none;
    /* 可以选中文本，可复制 */
    /* user-select: text; */
    /* 点击选中所有文本，可复制 */
    /* user-select: all; */
}

::selection自定义选择的颜色

自定义在网页上选择文本时的突出显示颜色。

html 复制代码

<div>
    这是一段测试文字。
</div>

css 复制代码

div {
    width: 200px;
    height: 200px;

}


div::selection {
    background-color: #f082e3;
    color: #000000;
}

translate开启硬件加速

在CSS中使用transform: translateZ(0);可以提示浏览器使用GPU（图形处理单元）来渲染元素，从而实现硬件加速。这对于复杂的动画或者需要频繁重绘和重排的元素来说，可能会带来性能上的提升，尤其是在移动设备上。硬件加速可以让页面元素的滚动、缩放和平滑过渡更加流畅。
will-change属性告诉浏览器这个元素很可能会改变，所以最好一开始就用硬件加速渲染它。
该操作需要谨慎使用，过渡使用会导致不必要的资源消耗和性能下降。

css 复制代码

.wrap {
    position: relative; /* 或者其他非static定位，可选 */
    overflow: hidden;   /* 避免重排其他元素，可选 */
    will-change: transform; /* 提示浏览器预期变化 */
    transform: translateZ(0); /* 启用硬件加速 */
}

text-transform大小写控制

html 复制代码

<div class="text1">Hello World!</div>
<div class="text2">Hello World!</div>
<div class="text3">Hello World!</div>
<div class="text4">Hello World!</div>

css 复制代码

body {
    width: 100px;
    height: 100px;
    border: 1px solid #000;
}

/* 所有字母变成大写 */
.text1 {
    text-transform: capitalize;
}

/* 所有字母变成小写 */
.text2 {
    text-transform: uppercase;
}

/* 所有字母首字母大写 */
.text3 {
    text-transform: lowercase;
}

/* 变成小型的大写字母 */
.text4 {
    font-variant: small-caps;
}

::first-letter设置第一个字母

使用first-letter为块级元素的第一个字母应用样式。

html 复制代码

<div>
    <p>This is a text used to test CSS styles with capitalized first letters</p>
</div>

css 复制代码

div {
    width: 200px;
    height: 100px;
}

p::first-letter {
    font-size: 2em;
    font-style: italic;
}

word-spacing控制单词间距

word-spacing属性控制字词间距，调整文本的紧凑度和可读性。

html 复制代码

<div>
    <p>This is a test text used to test the actual effect of the word spacing attribute</p>
</div>

css 复制代码

div {
    width: 200px;
    height: 100px;
}

p {
	word-spacing: 4px;
}

自定义滚动条

html 复制代码

<div class="scrollable-content">
    <p>这里是滚动的内容。</p>
    <p>这里是滚动的内容。</p>
    <p>这里是滚动的内容。</p>
    <p>这里是滚动的内容。</p>
    <p>这里是滚动的内容。</p>
    <p>这里是滚动的内容。</p>
    <p>这里是滚动的内容。</p>
    <p>这里是滚动的内容。</p>
    <p>这里是滚动的内容。</p>
</div>

css 复制代码

.scrollable-content {
    height: 200px;
    width: 200px;
    border: 1px solid #000;
    overflow-y: scroll;
    scrollbar-width: thin;
    scrollbar-color: #ff69b4 #fff3f8;
}

/* WebKit内核浏览器滚动条自定义 */
.scrollable-content::-webkit-scrollbar {
    width: 10px;
}

.scrollable-content::-webkit-scrollbar-track {
    background: #fff3f8;
    border-radius: 10px;
}

.scrollable-content::-webkit-scrollbar-thumb {
    background-color: #ff69b4;
    border-radius: 10px;
    border: 2px solid #fff3f8;
}

伪元素显示链接url

html 复制代码

<div>
    <a href="www.baidu.com" target="_blank">百度一下</a>
</div>

css 复制代码

div {
    border: 1px solid #ccc;
    padding: 10px;
    width: 300px;
    height: 300px;

}

a:after {
    content: " (" attr(href) ") ";
}

attrs()展示tooltips

我们使用 tooltip class 去标志哪个元素需要展示 tooltip 信息。然后为该元素添加你喜欢的样式，这个方便演示，我们使用了 dotted border-bottom 的样式。
接下来，我们创建一个 :before 伪元素，它将包含内容 content，指向特定的 attr()。这里指 attr(tooltip-data)。
接着，我们会创建一个 :hover 伪类，当用户鼠标移动道元素上时，它将设置 opacity 为 1。
此外，你可以包含自定义的样式。这取决于你设定的 tooltp 的数据，你也许需要调整其宽度或者边距。一旦你设定了 tooptip-data arrt() 类，你可以在你设计的其他部分应用。

html 复制代码

<p>
    Hover <span class="tooltip" tooltip-data="Tooltip Content">Here</span> to see the tooltip.
</p>
<p>
    You can also hover <span class="tooltip" tooltip-data="This is another Tooltip Content">here</span> to see
    another example.
</p>

css 复制代码

.tooltip {
    position: relative;
    border-bottom: 1px dotted black;
}

.tooltip:before {
    content: attr(tooltip-data);
    position: absolute;
    width: 250px;
    background-color: #2c2c2c;
    color: #fff;
    text-align: center;
    padding: 15px;
    line-height: 1.1;
    border-radius: 5px;
    z-index: 1;
    opacity: 0;
    transition: opacity .5s;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    font-size: 0.70em;
    visibility: hidden;
}

.tooltip:after {
    content: "";
    position: absolute;
    bottom: 75%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    opacity: 0;
    transition: opacity .5s;
    border-color: #000 transparent transparent transparent;
    visibility: hidden;
}

.tooltip:hover:before,
.tooltip:hover:after {
    opacity: 1;
    visibility: visible;
}

@keyframes实现打字机效果

通过 steps() 属性来实现分割文本的效果。首先，你必须指定 step() 中传入的数量，在这个例子中就是文本的长度。
接着，第二步，我们使用 @keyframes 去声明什么时候开始执行动画。

html 复制代码

<div class="typing">
    <div class="typing-effect">This is a typewriter effect implemented using CSS!</div>
</div>

css 复制代码

.typing {
    height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.typing-effect {
    width: 50ch;
    white-space: nowrap;
    overflow: hidden;
    border-right: 3px solid;
    font-family: monospace;
    font-size: 2em;
    animation: typing 2s steps(50), effect .5s step-end infinite alternate;
}

@keyframes typing {
    from {
        width: 0;
    }
}

@keyframes effect {
    50% {
        border-color: transparent;
    }
}

scroll-behavior页面平滑滚动

添加scroll-behavior：smooth到元素中<html>，使整个页面能够平滑滚动。

css 复制代码

html{  
    scroll-behavior: smooth;  
  }

:empty隐藏空元素

此选择器以空的<div>元素为目标并隐藏它们。

css 复制代码

div:empty {
    display: none;
}

object-fit 控制图像适配性

object-fit 控制替换元素(如<img>)的内容应该如何调整大小。
- contain：被替换的内容将被缩放，以在填充元素的内容框时保持其宽高比。
- cover：被替换的内容在保持其宽高比的同时填充元素的整个内容框。
- fill：被替换的内容正好填充元素的内容框。
- none：被替换的内容将保持其原有的尺寸。
- scale-down：内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些。

css 复制代码

img {
    width: 100px;
    height: 100px;
    object-fit: cover;
}

flex水平垂直居中

使用FlexBox可轻松地将内容在容器中水平和垂直居中。

css 复制代码

.container {
    display: flex;
    align-items: center;
    justify-content: center;
}