css3学习内容

1. css3 column文档地址及经常使用样式

• MDN column地址
• 常用的几个样式
  column-gap 设置元素列之间的间隔大小
column-count 设置元素的列数
column-width CSS属性建议一个最佳列宽。 列宽是在添加另一列之前列将成为最大宽度。
break-inside: avoid; /* 这个是设置多列布局页面下的内容盒子如何中断，如果不加上这个，每列的头个元素就不会置顶，配合columns使用 */。

2. tranfrom 属性

• perspective属性

  • 多少像素的3D元素是从视图的perspective属性定义。这个属性允许你改变3D元素是怎样查看透视图。定义时的perspective属性，它是一个元素的子元素，透视图，而不是元素本身。
  • 语法 perspective: number|none;
  • transform:perspective(44rpx) rotateX(17deg); 制作梯形

• transform-origin 属性

  • 定义 transform-Origin属性允许您更改转换元素的位置。2D转换元素可以改变元素的X和Y轴。3D转换元素，还可以更改元素的Z轴。
  • 语法 transform-origin: x-axis y-axis z-axis;
    • x-axis 定义视图被置于 X 轴的何处。可能的值：
      • left
      • center
      • right
      • length
      • %
    • y-axis 定义视图被置于 Y 轴的何处。可能的值：
      • top
      • center
      • bottom
      • length
      • %
    • z-axis 定义视图被置于 Z 轴的何处。可能的值：
      • length

• 其他属性

  值	描述
  none	定义不进行转换。
  matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵。
  matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	定义 3D 转换，使用 16 个值的 4x4 矩阵。
  translate(x,y)	定义 2D 转换。
  translate3d(x,y,z)	定义 3D 转换。
  translateX(x)	定义转换，只是用 X 轴的值。
  translateY(y)	定义转换，只是用 Y 轴的值。
  translateZ(z)	定义 3D 转换，只是用 Z 轴的值。
  scale(x[,y]?)	定义 2D 缩放转换。
  scale3d(x,y,z)	定义 3D 缩放转换。
  scaleX(x)	通过设置 X 轴的值来定义缩放转换。
  scaleY(y)	通过设置 Y 轴的值来定义缩放转换。
  scaleZ(z)	通过设置 Z 轴的值来定义 3D 缩放转换。
  rotate(angle)	定义 2D 旋转，在参数中规定角度。
  rotate3d(x,y,z,angle)	定义 3D 旋转。
  rotateX(angle)	定义沿着 X 轴的 3D 旋转。
  rotateY(angle)	定义沿着 Y 轴的 3D 旋转。
  rotateZ(angle)	定义沿着 Z 轴的 3D 旋转。
  skew(x-angle,y-angle)	定义沿着 X 和 Y 轴的 2D 倾斜转换。
  skewX(angle)	定义沿着 X 轴的 2D 倾斜转换。
  skewY(angle)	定义沿着 Y 轴的 2D 倾斜转换。
  perspective(n)	为 3D 转换元素定义透视视图。

3. css函数有如下几种

• attr() 返回选择元素的属性值。
• calc() 允许计算 CSS 的属性值，比如动态计算长度值。
• linear-gradient() 创建一个线性渐变的图像
• radial-gradient() 用径向渐变创建图像。
• repeating-linear-gradient() 用重复的线性渐变创建图像。
• repeating-radial-gradient() 类似 radial-gradient()，用重复的径向渐变创建图像。

4. css3文字设置渐变

• 以下为html

<div>
  文字颜色为渐变色
</div>

• 以下为css样式

div{
    background-image: -webkit-linear-gradient(90deg, #f35626, #feab3a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 60px;
}

5. 文本溢出显示省略号

• 单行文本溢出像是省略号

        .text_overflow {
          overflow: hidden;
          text-overflow:ellipsis;
          white-space: nowrap;
        }

• 多行文本溢出显示省略号

        .text_line{
          /*必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。*/
          display: -webkit-box;
           /*必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。*/
          -webkit-box-orient: vertical;
          /*限制在一个块元素显示的文本的行数。*/
          -webkit-line-clamp: 2;
          overflow: hidden;
          text-overflow: ellipsis;
        }

#### 滚动条 [滚动条设置参考](https://segmentfault.com/a/1190000012800450)

设置scrollbar的为CSS伪元素，对应上图的数字：

::-webkit-scrollbar              { /* 1 */ }
::-webkit-scrollbar-button       { /* 2 */ }
::-webkit-scrollbar-track        { /* 3 */ }
::-webkit-scrollbar-track-piece  { /* 4 */ }
::-webkit-scrollbar-thumb        { /* 5 */ }
::-webkit-scrollbar-corner       { /* 6 */ }
::-webkit-resizer                { /* 7 */ }

属性介绍：

::-webkit-scrollbar    //滚动条整体部分
::-webkit-scrollbar-button   //滚动条两端的按钮
::-webkit-scrollbar-track   // 外层轨道
::-webkit-scrollbar-track-piece    //内层轨道，滚动条中间部分（除去）
::-webkit-scrollbar-thumb //滚动条里面可以拖动的那个
::-webkit-scrollbar-corner   //边角
::-webkit-resizer   ///定义右下角拖动块的样式

// 一些伪类
:horizontal//适用于任何水平方向上的滚动条
:vertical//适用于任何垂直方向的滚动条
:decrement//适用于按钮和轨道碎片。表示递减的按钮或轨道碎片，例如可以使区域向上或者向右移动的区域和按钮
:increment//适用于按钮和轨道碎片。表示递增的按钮或轨道碎片，例如可以使区域向下或者向左移动的区域和按钮
:start//适用于按钮和轨道碎片。表示对象（按钮轨道碎片）是否放在滑块的前面
:end //适用于按钮和轨道碎片。表示对象（按钮轨道碎片）是否放在滑块的后面
:double-button//适用于按钮和轨道碎片。判断轨道结束的位置是否是一对按钮。也就是轨道碎片紧挨着一对在一起的按钮。
:single-button//适用于按钮和轨道碎片。判断轨道结束的位置是否是一个按钮。也就是轨道碎片紧挨着一个单独的按钮。
:no-button//表示轨道结束的位置没有按钮。
:corner-present//表示滚动条的角落是否存在。
:window-inactive//适用于所有滚动条，表示包含滚动条的区域，焦点不在该窗口的时候。

用法举例
::-webkit-scrollbar-track-piece:start {
   /* Select the top half (or left half) or scrollbar track individually */
}

::-webkit-scrollbar-thumb:window-inactive {
   /* Select the thumb when the browser window isn't in focus */
}

::-webkit-scrollbar-button:horizontal:decrement:hover {
   /* Select the down or left scroll button when it's being hovered by the mouse */
}

IE浏览器

6. 一行css为网页添加暗黑模式支持

html[theme='dark-mode'] {
	filter: invert(1) hue-rotate(180deg);
}

解析

filter CSS 属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像，背景和边框的渲染。（参考：MDN Web文档）
对于暗黑模式，将使用两个 filter ：invert 和 hue-rotate
invert：反转配色。黑色变为白色，白色变为黑色，所有颜色都是如此
hue-rotate：帮助我们处理所有其他非黑色和白色的颜色。将色相旋转180度，我们确保应用程序的颜色主题不会改变，而只是减弱其颜色。
这个方法的唯一缺点是，它还会反转应用程序中的所有图像。
因此，我们将对所有图像添加相同的规则，以逆转效果。

html[theme='dark-mode'] img{
    filter: invert(1) hue-rotate(180deg);
}

我们还将向HTML元素添加一个 transition ，以确保过渡不会过于花哨!

html {
    transition: color 300ms, background-color 300ms;
}

7. css去除滚动条

scrollbar-width: none; /* firefox */
-ms-overflow-style: none; /* IE 10+ */
::-webkit-scrollbar{
  display: none;
}