那些实用且易忘的CSS小技巧

去年跟着 B 站 Pink 老师学过 CSS 基本语法，但平时美化博客时还是会遇到一些 CSS 相关问题，所以再此记录下。

让 a 标签铺满整个 div

有时候希望点击 div 同时跳转到对应链接，奈何 a 的大小取决于文本大小，但可使用以下方法来铺满整个父盒子，前提是 div 里只有 a 标签一个内容。

1
2
3

a {
  display: block;
}

文字颜色渐变

background: -webkit-linear-gradient(...)为文本元素提供渐变背景。

webkit-text-fill-color: transparent使用透明颜色填充文本。

webkit-background-clip: text用文本剪辑背景，用渐变背景作为颜色填充文本。

<Custom > {
  background-image: linear-gradient(45deg, #8a7cfb 50%, #633e9c);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

毛玻璃特效

1 2	background: #ffffffcc !important; backdrop-filter: saturate(160%) blur(10px);

input 输入框字体样式

placeholder

input::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: red;
}
input::-moz-placeholder {
  /* Firefox 19+ */
  color: red;
}
input:-ms-input-placeholder {
  /* IE 10+ */
  color: red;
}
input:-moz-placeholder {
  /* Firefox 18- */
  color: red;
}

focus 聚焦

1
2
3

input:focus {
  background-color: red;
}

取消 input 的边框

1 2	border: none; outline: none;

滚动条

scroll-track—— 滚动条轨道
scrollbar-thumb—— 滚动条滑块
scrollbar-button—— 滚动条按钮
scrollbar-corner—— 滚动角

/*css主要部分的样式*/
/定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸 / ::-webkit-scrollbar {
  width: 10px; /*对垂直流动条有效*/
  height: 10px; /*对水平流动条有效*/
}

/*定义滚动条的轨道颜色、内阴影及圆角*/
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: rosybrown;
  border-radius: 3px;
}

/*定义滑块颜色、内阴影及圆角*/
::-webkit-scrollbar-thumb {
  border-radius: 7px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #e8e8e8;
}

/*定义两端按钮的样式*/
::-webkit-scrollbar-button {
  background-color: cyan;
}

/*定义右下角汇合处的样式*/
::-webkit-scrollbar-corner {
  background: khaki;
}

文字超出隐藏并显示省略号

white-space 👉 处理元素空白，常用值有：nowrap 不换行，其他还有 pre-line、pre-wrap 等
word-break 👉 在合适的点断行。常用值有 break-all 可以在单词内换行，keep-all 只能在半角空格或连字符处换行。我们需要超出盒子部分就换行，所以用 break-all。
box-orient 👉 子元素如何排列。值有 vertical 和 horizontal，分别是垂直排列和水平排列。
line-clamp 👉 控制文本行数。

单行（一定要有宽度）

width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

多行

word-break: break-all;
display: -webkit-box; // 自适应布局
-webkit-line-clamp: 2; // 文本行数最多2行
-webkit-box-orient: vertical; // 子元素垂直排列
overflow: hidden; // 超出部分隐藏

控制 div 内的元素自动换行

1 2	word-wrap: break-word; // 允许长单词换行到下一行 word-break：break-all; // 在哪儿换行都行，在单词内换行都行

纯 CSS 画三角形

<Custom > {
  width: 200px;
  height: 200px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: green;
}

绝对定位元素居中（水平和垂直方向）

<Cuttom > {
  width: 200px;
  height: 200px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

表格边框合并

table,
tr,
td {
  border: 1px solid #131415;
}
table {
  border-collapse: collapse;
}

颜色透明度 16 进制对照表

比如：#FFFFFFE6，效果等同于 rgba(255, 255, 255, 0.9)

百分比	十六进制
100%	FF
90%	E6
80%	CC
70%	B3
60%	99
50%	80
40%	66
30%	4D
20%	33
10%	1A

图片填充方式

当图片比例不固定时，想要让图片自适应，一般都会用 background-size:cover/contain，但是这个只适用于背景图。

img 有个属性object-fit
object-fit：fill / contain / cover / none / scale-down;

object-fit参数	功能
fill	默认值。内容拉伸填满整个 content box, 不保证保持原有的比例
contain	保持原有尺寸比例。长度和高度中短的那条边跟容器大小一致，长的那条等比缩放，可能会有留白
cover	保持原有尺寸比例。宽度和高度中长的那条边跟容器大小一致，短的那条等比缩放。可能会有部分区域不可见
none	保持原有尺寸比例。同时保持替换内容原始尺寸大小
scale-down	保持原有尺寸比例,如果容器尺寸大于图片内容尺寸，保持图片的原有尺寸，不会放大失真；容器尺寸小于图片内容尺寸，用法跟 contain 一样

背景图片填充方式

参考文章：聊聊 CSS 背景图片的几种填充类型

修改选中文本颜色与背景色

使用 css3 ::selection属性，该属性用于匹配元素中被用户选中或处于高亮状态的部分，并且支持修改匹配元素的color, background, cursor,和outline属性

li、ol、ul 标签去掉前面的点

li,
ol,
ul {
  list-style-type: none;
}

可参考以下代码

html,
body {
    margin: 0;
    padding: 0;
}
#content {
    margin: 100px auto;
    padding: 25px;
    width: 1330px;
    min-height: calc(100vh - 300px);
}
#footer {
    width: 100%;
    height: 100px; /*脚部的高度*/
    background: #eee;
    clear: both; /*清除浮动*/
}

子div使用float后如何撑开父div

将父div也设置成浮动效果

处理div使用padding时宽高被撑开的问题

有时候设置宽为固定值，结果发现加了padding后宽被撑开了

-moz-box-sizing: border-box; /*Firefox3.5+*/
-webkit-box-sizing: border-box; /*Safari3.2+*/
-o-box-sizing: border-box; /*Opera9.6*/
-ms-box-sizing: border-box; /*IE8*/
box-sizing: border-box;

border-radius 完整用法

我们在平时看border-radius属性会看到它的语法如下所示

1	border-radius: 1-4 length\|% / 1-4 length\|%;

很多人可能不知道这是什么意思，其实这是border-radius的完整写法，我们平时写的就是像border-radius:20px;这种，其实完整的写法应该是：border-radius : 20px 20px 20px 20px / 20px 20px 20px 20px;，其中前面四个20px表示水平半径，后面的四个值则表示垂直半径，我们就是通过设置水平半径和垂直半径来绘制椭圆或者圆形，也可以绘制一些其他有弧度的图形。

☕欲知后事如何，

且听下回分解🍵