10个非常实用的CSS技巧

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

一、文本选择颜色

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

css-1.gif

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

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

二、首字下沉

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

css-2.png

看上去还是这么回事。

三、平滑滚动

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

css-3.gif

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

css-4.gif

    
        
        
        
    

    

    
        第一屏
        第二屏
        第三屏
        第四屏

        

            
这是第一屏内容 
前端技术驿站
            
这是第二屏内容 
前端技术驿站
            
这是第三屏内容 
前端技术驿站
            
这是第四屏内容 
前端技术驿站
        
    

四、输入插入符号颜色

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

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

css-5.gif

五、投影

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

css-6.png

.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;
}

八、伪元素增大点击热区

    点击

九、IE盒子模型

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

box-sizing: border-box;

十、CSS实现换行

//不换行
white-space:nowrap;

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

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