CSS技巧
目录
1.引入外部字体
2.svg修改：
3.显示文字行数：
4.局部滚动：
5.background复合写法：
6.less混入：
手动：
或者：自动加载目标less：
7. ~ 选择器：
8.img、input和其他的单标签没有after和before伪元素：
9.object-fit：
9.:last-child、:last-of-type
10.css让文字竖的排版的方法：
11.页面滚动：
12.自定义鼠标指针样式：
13.修改选中文本样式：
14.首字母样式（scss）：
15.文字两端对齐：
16.让背景只显示在文字上：
17.隐藏丑丑的滚动条：
18.自定义滚动条样式：
1.引入外部字体
一、font-family属性的作用与用法？
font-family属性就是可以用css代码设置页面上文字显示的字体样式，
font-family属性可以定义多个值（字体），用逗号隔开。如果浏览器不支持第一个字体，则会尝试下一个，直到有一个可识别的。
.demo{font-family:"微软雅黑";}html代码：
我是一段测试文字这样在demo盒子里的所有文字都会以微软雅黑的字体样式显示。
二、CSS怎么引入外部字体？
@font-face允许您在网页中使用电脑中没有安装的字体，完全摆脱安全字体的限制。只需将字体包安装在服务器上，当用户加载网页时，字体包会自动下载到用户机器上，保证字体能够正确渲染。
1）在CSS中引入字体并给外部字体自定义一个名称
@font-face{
/*font-properties*/
font-family:'fontName';
src:url('加载外部字体文件的文件地址');
font-weight: normal;
font-style: normal;
}font-family定义字体的名字，接下来的src是加载字体文件的位置，之所有有多个url就是因为浏览器兼容问题。
2）使用刚刚定义的字体
div{
font-family:用户自定义的字体名称;
}
2.svg修改：
3.显示文字行数：
// 一行
white-space: nowrap;
overflow:hidden;
text-overflow: ellipsis;
// 两行
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;4.局部滚动：
- 列表1
- 列表2
- 列表3
- 列表4
- 列表5
5.background复合写法：
background: #000 url(../images/logo.png) no-repeat left center / cover;
参数说明
background-color 背景色
background-image 背景图
background-repeat 是否重复显示
background-position / background-size 背景图片位置 / 背景图片大小
注意：background-size是CSS3的属性
它要与background-position配合使用，中间有一个斜杠分隔符
6.less混入：
手动：
待混入的less：
// 鼠标经过上移阴影动画
.hoverShadow () {
transition: all .5s;
&:hover {
transform: translate3d(0, -3px, 0);
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}
}混入上方写好的less：
或者：自动加载目标less：
终端运行：vue add style-resources-loader
- 安装完毕后会在
vue.config.js中自动添加配置，如下：module.exports = { pluginOptions: { 'style-resources-loader': { preProcessor: 'less', patterns: [] } } } - 把你需要注入的文件配置一下后，重启服务即可。
+const path = require('path')
module.exports = {
pluginOptions: {
'style-resources-loader': {
preProcessor: 'less',
patterns: [
+ path.join(__dirname, './src/assets/styles/variables.less'),
+ path.join(__dirname, './src/assets/styles/mixins.less')
]
}
}
}7. ~ 选择器：
这是 CSS3 element1~element2 选择器。定义和用法：
element1~element2 选择器 element1 之后出现的所有 element2。
两种元素必须拥有相同的父元素，但是 element2 不必直接紧随 element1。
8.img、input和其他的单标签没有after和before伪元素：
因为单标签本身不能有子元素,所以不能通过input::before来写一些图标之类的内容，即使写了样式也不会生效
9.object-fit：
object-fit 一般用于 img 和 video 标签，一般可以对这些元素进行保留原始比例的剪切、缩放或者直接进行拉伸等。
值：
- fill: 默认，不保证保持原有的比例，内容拉伸填充整个内容容器。
- contain:保持原有尺寸比例。内容被缩放。
- cover:保持原有尺寸比例。但部分内容可能被剪切。
- none:保留原有元素内容的长度和宽度，也就是说内容不会被重置。
- scale-down:保持原有尺寸比例。内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些。
9.:last-child、:last-of-type
ul li:last-child {}
先找到父元素，找到所有的子元素，找到最后一个，判断是不是li，是就是选中，不是就是无效选择器；
ul li:last-of-type {}
先找到父元素，找到所有的类型为li的元素，选中最后一个
10.css让文字竖的排版的方法：
使用writing-mode属性
writing-mode 属性定义了文本在水平或垂直方向上如何排布。
语法：
writing-mode:vertical-rl | vertical-lr | lr-tb | tb-rl-
vertical-rl：垂直方向自右而左的书写方式。即 top-bottom-right-left -
vertical-lr：垂直方向内内容从上到下，水平方向从左到右 -
lr-tb：从左向右，从上往下； -
tb-rl：从上往下，从右向左。
11.页面滚动：
html{
overflow-y: scroll;
}12.自定义鼠标指针样式：
html{
cursor: url(../../assets/images/point.ico),auto;
}注意只能是.cur和.ico格式
13.修改选中文本样式：
::selection {
background: hotpink;
color: #ffffff;
}14.首字母样式（scss）：
.question {
&:first-letter {
font-size: 6vw;
}
}15.文字两端对齐：
text-align: justify;
text-align-last: justify;16.让背景只显示在文字上：
background-clip: text;
-webkit-background-clip: text;
color: transparent;
17.隐藏丑丑的滚动条：
scrollbar-width: none; /* firefox */
-ms-overflow-style: none; /* IE 10+ */
&::-webkit-scrollbar { // chrome safari
display: none;
}18.自定义滚动条样式：
html{
&::-webkit-scrollbar {// 整体设置
width: 6px;
background-color: red;
border-radius: 5px;
}
&::-webkit-scrollbar-track {// 滚动轨道
border-radius: 5px;
}
&::-webkit-scrollbar-thumb {// 可拖动的指示条
background-color: aqua;
border-radius: 5px;
}
}19.修改自带input样式input:-internal-autofill-selected为透明色
input:-internal-autofill-selected {
-webkit-text-fill-color: #FFFFFF !important;
transition: background-color 5000s ease-in-out 0s !important;
}