CSS 有很多令人欣喜的小技巧航瞭，可以讓我們的頁面效果更加美麗诫硕，現(xiàn)在，就讓我們來看看工作中非常實(shí)用的 CSS 技巧吧刊侯。
一章办、文本選擇顏色
當(dāng)我們選中網(wǎng)頁上的文字時(shí)，通常的效果是藍(lán)底白字滨彻，其實(shí)藕届，底色和字體顏色是可以改變的。
css-1.gif
我們可以使用偽元素來實(shí)現(xiàn)這種效果：
::selection {
background-color: red;
color: gold;
}
二亭饵、首字下沉
首字下沉休偶，是否似曾相識呢？哦辜羊，是在以前學(xué) word 軟件文字排版的時(shí)候踏兜。在一些報(bào)紙上經(jīng)常都會看見首字下沉的效果，其他文字圍繞在它周圍八秃。
css-2.png
看上去還是這么回事碱妆。
三、平滑滾動(dòng)
通過錨點(diǎn)昔驱，我們可以滾動(dòng)到網(wǎng)頁特定的位置疹尾，原始的錨點(diǎn)跳轉(zhuǎn)是沒有過渡效果的。注意滾動(dòng)條：
css-3.gif
通過 CSS scroll-behavior 屬性可以讓滾動(dòng)變得更加絲滑舍悯。
css-4.gif
<!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">這是第一屏內(nèi)容 </br>前端技術(shù)驛站</section>
<section id="part2">這是第二屏內(nèi)容 </br>前端技術(shù)驛站</section>
<section id="part3">這是第三屏內(nèi)容 </br>前端技術(shù)驛站</section>
<section id="part4">這是第四屏內(nèi)容 </br>前端技術(shù)驛站</section>
</div>
</body>
</html>
四航棱、輸入插入符號顏色
caret-color 屬性可以讓我們自定義 input 框閃爍的光標(biāo)睡雇，是不是很神奇鴨
.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);
}
六秕豫、自定義滾動(dòng)條
我們可以修改滾動(dòng)條的樣式，滾動(dòng)條變得更加炫酷。
.container::-webkit-scrollbar {
/*滾動(dòng)條整體樣式*/
width: 10px;
/*高寬分別對應(yīng)橫豎滾動(dòng)條的尺寸*/
height: 1px;
}
.container::-webkit-scrollbar-thumb {
/*滾動(dòng)條里面小方塊*/
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 {
/*滾動(dòng)條里面軌道*/
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
border-radius: 10px;
background: #ededed;
}
七混移、禁用用戶選擇
如果你不想讓用戶選中頁面上的文字祠墅，就可以用這個(gè)特性了。
.container {
user-select: none;
}
八歌径、偽元素增大點(diǎn)擊熱區(qū)
<style type="text/css">
.btn::before {
content:"";
position:absolute;
top:-10px;
right:-10px;
bottom:-10px;
left:-10px;
}
</style>
<body>
<button class="btn" type="button">點(diǎn)擊</button>
</body>
九毁嗦、IE盒子模型
很多情況下都需要應(yīng)用到IE盒子模型的特性，讓元素的寬度回铛、高度包含border和padding狗准。
box-sizing: border-box;
十、CSS實(shí)現(xiàn)換行
//不換行
white-space:nowrap;
//自動(dòng)換行
word-wrap: break-word;
word-break: normal;
//強(qiáng)制換行
word-break:break-all;
