去年跟着 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用文本剪辑背景,用渐变背景作为颜色填充文本。

1
2
3
4
5
<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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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 —— 滚动角

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
/*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 👉 控制文本行数。

单行(一定要有宽度)

1
2
3
4
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

多行

1
2
3
4
5
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 画三角形

1
2
3
4
5
6
7
8
9
<Custom > {
width: 200px;
height: 200px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: green;
}

绝对定位元素居中(水平和垂直方向)

1
2
3
4
5
6
7
8
<Cuttom > {
width: 200px;
height: 200px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}

表格边框合并

1
2
3
4
5
6
7
8
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 标签去掉前面的点

1
2
3
4
5
li,
ol,
ul {
list-style-type: none;
}

将页脚Footer固定在网页底部

可参考以下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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后宽被撑开了

1
2
3
4
5
-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表示水平半径,后面的四个值则表示垂直半径,我们就是通过设置水平半径和垂直半径来绘制椭圆或者圆形,也可以绘制一些其他有弧度的图形。

☕欲知后事如何,

且听下回分解🍵


参考文章

  1. 那些你总是要用却又死活记不住的 css 属性
  2. css 文字颜色渐变的三种实现方式
  3. 颜色透明度 16 进制对照表
  4. css 图片填充的几种方式
  5. CSS 修改选中文本颜色与背景色
  6. 子Div使用Float后如何撑开父Div
  7. border-radius属性怎么使用-css教程

分享文章

  1. 弹性布局 flex 详解