Xin's blog
ctrlwin
2021-03-23

CSS属性

# 1.scroll-behavior

当用户手动导航或者 CSSOM scrolling API 触发滚动操作时，CSS 属性 scroll-behavior 为一个滚动框指定滚动行为，其他任何的滚动，例如那些由于用户行为而产生的滚动，不受这个属性的影响。在根元素中指定这个属性时，它反而适用于视窗。

# 语法：

scroll-behavior: auto;
scroll-behavior: smooth;
1
2

# 值：

auto
1

滚动框立即滚动。

smooth
1

滚动框通过一个用户代理预定义的时长、使用预定义的时间函数，来实现平稳的滚动，用户代理应遵循其平台的约定，如果有的话。

例：

在需要滚动的地方加上scroll-behavior就能实现平滑滚动。

<a href="#">回到顶部</a>
1
   html,body {
     scroll-behavior: smooth;
   }
1
2
3

# 2.contain

# 介绍

css contain 属性允许开发者声明当前元素和它的内容尽可能的独立于 DOM 树的其他部分。这使得浏览器在重新计算布局、样式、绘图、大小或这四项的组合时，只影响到有限的 DOM 区域，而不是整个页面，可以有效改善性能。

这个属性在包含大量独立组件的页面非常实用，它可以防止某个小部件的 CSS 规则改变对页面上的其他东西造成影响。

# 语法

/* 关键词值 */
contain: none;

/* 等价于 contain: layout style paint size */
contain: strict;

/* 等价于 contain: layout style paint */
contain: content;

contain: size;
contain: layout;
contain: style;
contain: paint;

/* 支持指定多个关键词 */
contain: size paint;
contain: size layout paint;

/* 全局值 */
contain: inherit;
contain: initial;
contain: unset;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# 属性值

none

​ 表示元素将正常渲染，没有包含规则。

strict

​ 表示除了 style 外的所有的包含规则应用于这个元素。等价于 contain: size layout paint。

content

​ 表示这个元素上有除了 size 和 style 外的所有包含规则。等价于 contain: layout paint。

size

​ 表示这个元素的尺寸计算不依赖于它的子孙元素的尺寸。

layout

​ 表示元素外部无法影响元素内部的布局，反之亦然。

style

​ 表示那些同时会影响这个元素和其子孙元素的属性，都在这个元素的包含范围内。

paint

​ 表示这个元素的子孙节点不会在它边缘外显示。如果一个元素在视窗外或因其他原因导致不可见，则同样保证它的子孙节点不会被显示。

# 实例

.g-container {
    contain: paint; 
}
1
2
3

img

# 3.object-fit和object-position （CSS3）

# object-fit

它有5个值：

  • fill：默认，不保证保持原有的比例，内容拉伸填充整个内容容器。
  • contain：保持原有尺寸比例。内容被缩放。
  • cover：保持原有尺寸比例。但部分内容可能被剪切。
  • scale-down：保持原有尺寸比例。内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些。当尺寸比原图片尺寸小时，展示效果与contain效果相同；当尺寸比原图大时，效果与none相同。
  • none：保留原有元素内容的长度和宽度，也就是说内容不会被重置。

各个属性的表现如下：

image-20210226111309838image-20210226111533319image-20210226111634295

image-20210226111706270image-20210226111913358

image-20210226110507267

为什么图片都设置了宽高，实际效果却无视了这些声明？图片的实际大小或是变大或是变小了，而没有跟着容器走呢？

1.img是一个元素，且是替换元素；

2.一个图片，如果没有src，它依然是个替换元素，它在浏览器中的解析依然是正确的；

<img>
1

3.src指向的图片属于替换内容，注意，这个替换内容和这个img替换元素是壳子与内容的关系，两者是独立的。在CSS2.1时代，壳子的实际尺寸（如果没有CSS或HTML设置），则是跟随内容的实际尺寸，因此，网页加载的时候，我们会看到图片占据的高度从0到图片实际高度跳动的过程；如果壳子，也就是img有尺寸限制，则替换内容fill拉伸适应于 img替换元素的设定尺寸。总而言之，壳子与内容的尺寸永远是一样的。于是，我们就会误认为图片就是那个图片，唯一的存在，导致我们理解object-fit的特性表现出现了障碍。

4.在CSS3时代，object-fit的世界里，object-fit控制的永远是替换内容的尺寸表现，注意，是替换内容的尺寸表现，不是img替换元素。或者这么讲吧，我们对img设置：

width:240px;
height:180px;
1
2

实际上是控制img这个元素的，这个壳子的尺寸是100%撑满容器。上面截图的5个示例的图片实际上都是100%拉伸与容器的；之所以实际的图片内容没有拉伸，是因为受object-fit控制，object-fit控制了src对应的替换内容的尺寸，或者包含，或者覆盖。

5.img替换元素和src替换内容是两个独立体。img替换元素受到了CSS 宽高拉伸控制，src替换内容也受到了object-fit展示控制。

# 替换元素

其内容不受CSS视觉格式化模型（中文释义参见这里 (opens new window)）控制的元素，比如image, 嵌入的文档(iframe之类)或者applet。比如，img元素的内容通常会被其src属性指定的图像替换掉。替换元素通常有其固有的尺寸：一个固有的宽度，一个固有的高度和一个固有的比率。比如一幅位图有固有用绝对单位指定的宽度和高度，从而也有固有的宽高比率。另一方面，其他文档也可能没有固有的尺寸，比如一个空白的html文档。

CSS渲染模型不考虑替换元素内容的渲染。这些替换元素的展现独立于CSS。object, video, textarea, input也是替换元素，audio和canvas在某些特定情形下为替换元素。

使用CSS的content属性插入的对象是匿名替换元素。

# object-position

object-position一般用来设置图片的位置。默认值为：50% 50%，也就是居中显示。

第一个值为 x 坐标位置的值，第二个值为 y 坐标位置的值。表示的方式有：

object-position: 50% 50%;
object-position: right top;
object-position: left bottom;
object-position: 250px 125px;
1
2
3
4

例：

替换内容一直定位在容器的右下角：

object-position: 100% 100%;
1

替换元素相对于右下角20px 10px地方定位：

object-position: calc(100% - 20px) calc(100% - 10px);
1

# 4.pointer-events属性 （CSS3）

# 介绍

pointer-events是css3的一个属性，指定在什么情况下元素可以成为鼠标事件的target（包括鼠标的样式）

# 属性值

pointer-events属性有很多值，但是对于浏览器来说，只有auto和none两个值可用，其它的几个是针对SVG的(本身这个属性就来自于SVG技术)。

pointer-events: auto; /* 默认 */
pointer-events: none;
1
2
  • auto——效果和没有定义pointer-events属性相同，鼠标不会穿透当前层。在SVG中，该值和visiblePainted的效果相同。
  • none——元素永远不会成为鼠标事件的target（目标）。但是，当其后代元素的pointer-events属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶段触发父元素的事件侦听器。实际上默认就可以穿透当前层，因为pointer-events默认为auto

# 实例

1.防止透明元素和可点击元素重叠不能点击

​ 一些内容的展示区域，为了实现一些好看的 css 效果，当元素上方有其他元素遮盖，为了不影响下方元素的事件，给被遮盖的元素增加 pointer-events: none; 可以解决。

<!--CSS-->
.layer{
backround: linear-gradient(180deg, #fff, transparent);

}
.j-pro{
poninter-events: none;
}
<!--HTML-->
<ul>
    <li class="layer j-pro"></li>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
</ul>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 5.clip-path （CSS3）

# 介绍

CSS3 SVG的clip-path属性，使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。

# 语法

/* Keyword values */
clip-path: none;

/* <clip-source> values */
clip-path: url(resources.svg#c1);

/* <geometry-box> values */
clip-path: margin-box;
clip-path: border-box;
clip-path: padding-box;
clip-path: content-box;
clip-path: fill-box;
clip-path: stroke-box;
clip-path: view-box;

/* <basic-shape> values */
clip-path: inset(100px 50px);
clip-path: circle(50px at 0 100px);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
clip-path: path('M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z');

/* Box and shape values combined */
clip-path: padding-box circle(50px at 0 100px);

/* Global values */
clip-path: inherit;
clip-path: initial;
clip-path: unset;
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

<clip-source>

​ 用 <url>表示剪切元素的路径

<basic-shape>

​ 一种形状，其大小和位置由<几何盒>值定义。如果没有指定几何框，则边框将用作参考框

<geometry-box>

​ 如果同 <basic-shape> 一起声明，它将为基本形状提供相应的参考框盒。通过自定义，它将利用确定的盒子边缘包括任何形状边角（比如说，被** border-radius** 定义的剪切路径）。几何框盒可以有以下的值中的一个：

  • margin-box

    使用 margin box 作为引用框。

  • border-box

    使用 border box 作为引用框。

  • padding-box

    使用 padding box 作为引用框。

  • content-box

    使用 content box 作为引用框。

  • fill-box

    利用对象边界框作为引用框。

  • stroke-box

    使用笔触边界框（stroke bounding box）作为引用框

  • view-box

    使用最近的 SVG 视口（viewport）作为引用框。如果viewBox 属性被指定来为元素创建 SVG 视口，引用框将会被定位在坐标系的原点，引用框位于由 viewBox 属性建立的坐标系的原点，引用框的尺寸用来设置 viewBox 属性的宽高值。

none

不创建的剪切路径。

# 实例

.clip-path {
    width: 256px;
    height: 191px;
    background-color: #217295;
    transition: 0.4s cubic-bezier(1, -1, 0, 2);
    -webkit-clip-path: circle(180px at 128px 95px);
    clip-path: circle(180px at 128px 95px);
}

.clip-path:hover {
    -webkit-clip-path: circle(95px at 128px 95px);
    clip-path: circle(95px at 128px 95px);
}
1
2
3
4
5
6
7
8
9
10
11
12
13

hover矩形变成圆的效果

# 6.-webkit-box-reflect （CSS3）

-webkit-box-reflect可以用来设置倒影特效（火狐和IE暂不支持该属性）；

# 用法

-webkit-box-reflect: [ above | below | right | left ]? <length>? <image>?
1

-webkit-box-reflect最多可以由3部分组成，分别如下：

  • 方位

    可以是下面4个值中的1个，above,below,left,right，分别表示上下左右。如果不是使用类似inherit等全局关键字，则此方位值是不能缺省的。

  • 偏移大小

    倒影和原始元素偏移距离。可以是数值，也可以是百分比值。如果是百分比值，则百分比大小是相对于元素自身尺寸计算的。和transform中translate的百分比计算是一致的。

  • 遮罩图片

    对元素倒影的遮罩控制。语法类似于background-image。

# 实例

实例1：

/* 1.下倒影 */
-webkit-box-reflect: below;

/* 2.右倒影 */
-webkit-box-reflect: right;

/* 3.右倒影 同时有偏移 */
-webkit-box-reflect: right 10px;

/* 4.下倒影同时有遮罩（线性渐变） */
-webkit-box-reflect: below 0 linear-gradient(transparent, white);

/* 5.下倒影同时有遮罩（使用png图片） */
-webkit-box-reflect: below 0 url(shuai2.png);
1
2
3
4
5
6
7
8
9
10
11
12
13
14

image-20210104105916381image-20210104105932366

实例2：

/* html */
<div class="divb">Text</div>

/* css */
 color: rgb(237, 125, 49);
-webkit-box-reflect: below -14px linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.13) 40%, rgb(255, 255, 255));
1
2
3
4
5
6

image-20210104110755330

# 注意

  1. 倒影不占据尺寸空间，是和outline, box-shadow一样的那种真正意义上的不占据空间尺寸。

  2. 倒影支持百分比，且时根据元素自身尺寸计算的。尺寸计算的方位是根据你的倒影方向自动识别的。比如说，你的倒影方向是below或above，则偏移百分比是根据原始元素的高度想计算的，如你的倒影方向是left或right，则根据元素的宽度来计算；

  3. 使用遮罩图片的时候，倒影的偏移值是不能缺省的。如果没有偏移，请使用0占位。

  4. 遮罩的最终效果与颜色无关，也就是你使用linear-gradient(transparent, white)和linear-gradient(transparent, black)的效果是一模一样的，关键在于是否透明以及透明度是多少。实色遮罩的结果就是透明，透明遮罩的结果就是暴露原始色值。

  5. 遮罩图片也可以直接是图片，语法同background-image。但是有个需要注意的是，当图片应用于倒影遮罩的时候，这个图片自身也会被（因倒影）而翻转。比方说上面demo最后一个例子，遮罩出了一个“帅”字，而这个原始的“帅”文字图片是这样的：

    “帅”字

# 7.-webkit-text-stroke （CSS3）

CSS属性为文本字符指定了宽和颜色 .。它是-webkit-text-stroke-width 和-webkit-text-stroke-color属性的缩写。

/* 宽度和颜色属性 */
-webkit-text-stroke: 4px navy;

/* 全局属性 */
-webkit-text-stroke: inherit;
-webkit-text-stroke: initial;
-webkit-text-stroke: unset;
1
2
3
4
5
6
7

# 语法

/* 设置宽度和颜色 */
-webkit-text-stroke: <length> <color>;

/* 默认设置 */
-webkit-text-stroke: inherit/initial/unset;
1
2
3
4
5

# 实例

/* html */
<div class="div2">Text</div>

/* css */
-webkit-text-stroke: 2px blue;
1
2
3
4
5

image-20210104104027983

经过验证发现，text-stroke采用的是居中描边特性，这样的话会让真实文本的字重削弱了，因为会一半的描边宽度会盖住文本区域，为了不削弱文字的字重，「我们想到了两个dom元素叠加的方法：第一个元素设置描边效果，第二个元素设置跟第一个元素一样的前景色，盖住底层元素的内描边。」 例如上图的实现如下：

/* html */
<div class="div2">Text</div>
<div class="div3">Text</div>

/* css */
.div2{-webkit-text-stroke: 2px blue;}
.div3{
    z-index:3;
    color: white;
    position: absolute;
    top: 0;
    left: 0;
}
1
2
3
4
5
6
7
8
9
10
11
12
13

image-20210104104357526

# 8.transform-origin （CSS3）

# 定义

transform-origin 属性用来设置 transform 变换的基点位置。默认情况下，基点位置为元素的中心点。

# 语法

transform-origin: x-axis y-axis z-axis

名称 值 描述
x-axis 位置（left、center、right）/ 百分数 / 数值 x 轴基点坐标
y-axis 位置（top、center、bottom）/ 百分数 / 数值 y 轴基点坐标
z-axis 数值 z 轴基点坐标

注意：当用数值设置基点位置时，必须带单位！

# 实例

使用位置设置变换基点代码如下：

.transform-origin-position {
    transform: rotate(45deg);
    transform-origin: left top;
}1234
1
2
3
4

不同位置信息效果如下（标红圈处为变换基点）：

left-top

img
在GitHub上编辑 (opens new window)
#css
上次更新: 2/23/2022, 5:36:03 PM

← CSS3之transition过渡→

最近更新
01
createElement函数创建虚拟DOM
 05-26
02
clipboard 剪切板属性
 05-26
03
vue的权限管理
 05-16
更多文章>
Theme by Vdoing | Copyright © 2021-2022 Xin | MIT License
×