CSS 有很多令人欣喜的小技巧，可以让我们的页面效果更加美丽，现在，就让我们来看看工作中非常实用的 CSS 技巧吧。

一、文本选择颜色

当我们选中网页上的文字时，通常的效果是蓝底白字，其实，底色和字体颜色是可以改变的。

image

我们可以使用伪元素来实现这种效果：

::selection {
    background-color: red;
    color: gold;
}

二、首字下沉

首字下沉，是否似曾相识呢？哦，是在以前学 word 软件文字排版的时候。在一些报纸上经常都会看见首字下沉的效果，其他文字围绕在它周围。

image

看上去还是这么回事。

三、平滑滚动

通过锚点，我们可以滚动到网页特定的位置，原始的锚点跳转是没有过渡效果的。注意滚动条：

image

通过 CSS scroll-behavior 属性可以让滚动变得更加丝滑。

image

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title></title>
    </head>

    <style type="text/css">
        html {
            scroll-behavior:smooth;
        }
        section {
            height: 500px;
            text-align: center;
            color: #fff;
        }
        section:nth-child(even) {
            background-color: red;
        }
        section:nth-child(odd) {
            background-color: gold;
        }
    </style>

    <body>
        <a href="#part1">第一屏</a>
        <a href="#part2">第二屏</a>
        <a href="#part3">第三屏</a>
        <a href="#part4">第四屏</a>

        <div class="container">
            <section id="part1">这是第一屏内容 </br>前端技术驿站</section>
            <section id="part2">这是第二屏内容 </br>前端技术驿站</section>
            <section id="part3">这是第三屏内容 </br>前端技术驿站</section>
            <section id="part4">这是第四屏内容 </br>前端技术驿站</section>
        </div>
    </body>
</html>

四、输入插入符号颜色

caret-color 属性可以让我们自定义 input 框闪烁的光标，是不是很神奇鸭

.form-input {
    width: 130px;
    height: 26px;
    padding-left: 10px;
    border-radius: 6px;
    caret-color: gold;
}

image

五、投影

给透明背景图片加背景，感觉很厉害的样子。两行 CSS 样式九搞定咯：

image

.img-container img {
    width: 200px;
    object-fit: cover;
    filter: drop-shadow(30px 10px 6px gold);
}

六、自定义滚动条

我们可以修改滚动条的样式，滚动条变得更加炫酷。

.container::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 10px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
}

.container::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    background-color: skyblue;
    background-image: -webkit-linear-gradient(45deg,
        rgba(255, 255, 255, 0.2) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.2) 50%,
        rgba(255, 255, 255, 0.2) 75%,
        transparent 75%,
        transparent);
}

.container::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    background: #ededed;
}

七、禁用用户选择

如果你不想让用户选中页面上的文字，就可以用这个特性了。

.container {
    user-select: none;
}

八、伪元素增大点击热区

<style type="text/css">
    .btn::before {
        content:"";
        position:absolute;
        top:-10px;
        right:-10px;
        bottom:-10px;
        left:-10px;
    }
</style>
<body>
    <button class="btn" type="button">点击</button>
</body>

九、IE盒子模型

很多情况下都需要应用到IE盒子模型的特性，让元素的宽度、高度包含border和padding。

box-sizing: border-box;

十、CSS实现换行

//不换行
white-space:nowrap;

//自动换行
word-wrap: break-word;
word-break: normal;

//强制换行
word-break:break-all;

原文地址：http://www.cnblogs.com/Sultan-ST/p/16850815.html

1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！ 2. 分享目的仅供大家学习和交流，请务用于商业用途! 3. 如果你也有好源码或者教程，可以到用户中心发布，分享有积分奖励和额外收入！ 4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！ 5. 如有链接无法下载、失效或广告，请联系管理员处理！ 6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！ 7. 如遇到加密压缩包，默认解压密码为"gltf",如遇到无法解压的请联系管理员！ 8. 因为资源和程序源码均为可复制品，所以不支持任何理由的退款兑现，请斟酌后支付下载 声明：如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性