MDN

Css 实用属性

1. CSS 兼容写法

1、**-moz**代表 firefox 浏览器私有属性

2、**-ms**代表 ie 浏览器私有属性

3、**-webkit**代表 safari、chrome 私有属性

这些是为了兼容老版本的写法，比较新版本的浏览器都支持直接写：border-radius。

现在比较流行的一个概念就是：不太关键的样式，可以不考虑兼容，比如你说的圆角，并不影响内容的显示，如果客户浏览器太旧，就让他看到旧的方形效果就是，一定要看到新效果，只能建议客户升级浏览器。

2. ::before ::after 伪元素

https://developer.mozilla.org/zh-CN/docs/Web/CSS/::before

3. Object-fit 属性

img 和 viedo 标签独有的属性

4. CSS zoom 属性

zoom：1 

设置或检索对象的缩放比例，触发 IE 浏览器的 haslayout 属性，解决浮动，margin 重叠等一些问题。老版本使用

5. position:sticky

• 存在兼容问题，移动端一般都支持

• 当元素定位为 sticky 时，意味着该元素**top(必要属性)**为指定值时，position 会自动变为 fiexd 固定定位。

6. 字体阴影

text-shadow: X-offset(X轴偏移量) Y-offset(Y轴偏移量) Blur(模糊半径) Color(颜色);

.text-shaw {
  text-shadow: 0px 6px 1px #83acdb;
}

效果

[

](https://blog.csdn.net/qq_37582010/article/details/84633648)

7. CSS 比较函数

根据 CSS 规范，比较函数是关于比较多个值并取其一。这些 CSS 函数最大的作用就是可以为我们提供动态布局和更灵活设计组件方法。

Min() 函数

min() 函数支持一个或多个表达式，每个表达式之间使用逗号分隔，以最小的表达式的值作为返回值，可以使用 min() 为元素设置最大值。

例如：设置元素的最大宽度为 500px 。

.element {
  width: min(50%, 500px);
}

浏览器需要在 (50%, 500px) 取一个最小值，第一个值是指当前视口宽度的 50%。如果 50% 的计算大于 500px ，则取 500px ，反之取 50%。

假设当前视口宽度为 900px ，900px X 50% = 450px < 500px ,则元素的最终宽度为 450px 。

Max() 函数

max() 函数以最大值为返回值，语法跟 min() 函数类似。可以使用 max() 函数为元素设置最小值。

例如：设置元素的最小宽度为 500px。

.element {
  width: max(50%, 500px);
}

浏览器需要在 (50%, 500px) 取一个最大值，第一个值是指当前视口宽度的 50%。如果 50% 的计算小于 500px ，则取 500px ，反之取 50%。

假设当前视口宽度为 1200px ，1200px X 50% = 600px < 500px ,则元素的最终宽度为 600px 。

Clamp() 函数

clamp() 函数的作用是返回一个区间范围的值。

语法：clamp(MIN, VAL, MAX)

其中 MIN 表示最小值， VAL 表示首选值， MAX 表示最大值。意思是，如果 VAL 在 MIN 和 MAX 范围之间，则使用 VAL 作为函数返回值；如果 VAL 大于 MAX，则使用 MAX作为返回值；如果 VAL 小于 MIN ，则使用 MIN 作为返回值。

例如：有一个元素，最小宽度为 200px ，首选值为 50% ，最大值为 1000px 。

.element {
  width: clamp(200px, 50%, 1000px);
}

计算过程：

• 宽度永远不会低于 200px
• 首选值是 50% ，只有在视口宽度大于 200px 小于 1000px 时才有效
• 宽度不会超过 1000px 

8. 媒体查询

CSS3 @media  查询

列：如果文档宽度小于 300 像素则修改背景颜色(background-color):

@media screen and (max-width: 300px) {
  body {
    background-color: lightblue;
  }
}

9. 盒子阴影 box-shadow

/* x 偏移量 | y 偏移量 | 阴影颜色 */
box-shadow: 60px -16px teal;

/* x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影颜色 */
box-shadow: 10px 5px 5px black;

/* x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

/* 插页 (阴影向内) | x 偏移量 | y 偏移量 | 阴影颜色 */
box-shadow: inset 5em 1em gold;

/* 任意数量的阴影，以逗号分隔 */
box-shadow: 3px 3px red, -1em 0 0.4em olive;

/* 全局关键字 */
box-shadow: inherit;
box-shadow: initial;
box-shadow: unset;

[

](https://blog.csdn.net/qq_37582010/article/details/84633648)