10个非常实用的CSS技巧

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

一、文本选择颜色

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

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

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

二、首字下沉

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

看上去还是这么回事。

三、平滑滚动

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

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

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

五、投影

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

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

posted @ 2022-11-02 13:53 SultanST 阅读(49) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

· CSS面试题

· 26个CSS超实用技巧

· 19 个实用的 CSS 技巧！

· 20个很有很有很有用的CSS技巧

阅读排行：
· 全程不用写代码，我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· .NET10 - 预览版1新功能体验（一）

公告

苟有恒,何必三更眠五更起;最无益,莫过一日暴十日寒

昵称： SultanST
园龄： 8年6个月
粉丝： 1
关注： 0

+加关注

2025年3月

日

一

二

三

四

五

六

Sultan-ST

10个非常实用的CSS技巧

一、文本选择颜色

二、首字下沉

三、平滑滚动

四、输入插入符号颜色

五、投影

六、自定义滚动条

七、禁用用户选择

八、伪元素增大点击热区

九、IE盒子模型

十、CSS实现换行

公告

搜索

常用链接

最新随笔

积分与排名

随笔分类

随笔档案

阅读排行榜

评论排行榜

推荐排行榜

最新评论

	<!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>

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

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

	<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>

	//不换行
	white-space:nowrap;

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

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