基础

css 属性

* {
  font-style: italic;
  letter-spacing: ; /* 字母间距 */
  word-spacing: ; /* 单词间距 */
  text-indent: ; /* 首行缩进 */
  opacity: .6; /* 透明度 */
  box-shadow: 0 3px 12px 5px red inset; /* x y 模糊半径 扩展半径 颜色 投影方式 */;
  text-shadow: 0 0 12px 5px red inset;
  background-image: linear-gradient(to left, red, blue); /**渐变 */
  background-image: radial-gradient(10px at center, red 0%, blue 50%, #333 100%);

  outline: none; /* input 激活状态的外边框 */
  background: #00FF00 url(bgimage.gif) no-repeat fixed top;
  background-color
  background-position /* 规定背景图像的位置 默认：0% 0%  top left  x% y%  10px 20px */
  background-size
  background-repeat
  background-origin /* 规定背景图片的定位区域 padding-box | border-box | content-box */
  background-clip /* 规定背景的绘制区域 border-box | padding-box | content-box */
  background-attachment /* 规定背景图像是否固定或者随着页面的其余部分滚动 默认值：scroll ｜fixed */
  background-image
}

css 过渡属性 transition

p {
  transition: width .5s ease-in;
}

css 动画 keyframes

@keyframes test {
  0% {
    background: red;
  }
  50% {
    background: blue;
  }
  100% {
    background: green;
  }
}
p {
  animation: test .5s ease-in infinite;
  animation-name
  animation-duration /* 规定完成动画所花费的时间 */
  animation-timing-function /* 规定动画的速度曲线 linear | ease | ease-in | ease-out | ease-in-out */
  animation-delay /* 规定在动画开始之前的延迟 */
  animation-iteration-count /* 规定动画应该播放的次数 n | infinite */
  animation-direction /* 规定是否应该轮流反向播放动画 normal | alternate(动画应该轮流反向播放) */
}

css 2d 转换

• 位移 p{ transform: translate(50px 100px); }
• 缩放 p{ transform: scale(0.8); }
• 旋转 p{ transform: rotate(20deg); transform-origin: center center; }
• 斜切 p{ transform: skew(20deg 25deg); }

一般情况下先位移后旋转，注意旋转中心点

css 选择器

p[class] {} /* 带 class 属性的所有 p 标签 */
p[class^=abc] {}  /* class 以 abc 开头的所有 p 标签 */
p[class$=abc] {}  /* class 以 abc 结尾的所有 p 标签 */
p[class*=abc] {}  /* class 包含 abc 的所有 p 标签 */
div+h3 {} /* 相邻兄弟选择器，div 后的第一个 h3 标签 */
div~h3 {} /* div同级后面的所有 h3 标签 */
#open:target {} /* 目标伪类，可修改点击时的 css 样式 */
input:disabled  {} /* 被禁用的 input 样式 */
input:checked {} /* 选中的 input 样式 */
div:first-child {} /* 匹配该元素父元素下的第一个 div */
div:nth-child(3) {}
p:only-child {} /* 匹配父元素只有一个 p 元素的 p 元素 */
input:not([type="submit"]) {} /* 所有 type 不为 submit 的 input 元素 */
p:not(:first-child) {}
p::selection {} /* 鼠标选中文本时的样式，只能改变背景色 */

css 使用第三方字体

1、使用第三方字体

@font-face{
  font-family: 'weiyang';
  src : url('../static/weiyangjianti.ttf');   /* 有坑，写相对路径，绝对路径没有效果 */
}

2、引用字体

div{
  font-family: 'weiyang';
  font-size: 16px;
}

3、在 vue中使用：在 app.vue 中引入 css 文件（这里是以 scss 语法格式引入的）

<style>
@import "./assets/font/font.css";   // 有坑，不加分号报错
</style>

css 单行文本溢出隐藏和多行文本溢出隐藏

div {
  width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
div {
  width: 150px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

解决鼠标在有溢出隐藏时才悬浮显示 tooltip 的思路，在鼠标移入时（onmouseenter），判断父容器（文字的父容器）的 scrollWidth / scrollHeight 和 clientWidth / clientHeight 的大小来决定是否显示 tooltip