100 个太多,但这九 个 Css 属性你必须要知道!

开发 前端
使用 mix-blend-mode 可以用来混合两个或多个图层的颜色。此属性将一个图层的颜色与其下方的图层的颜色混合,在屏幕上创建不同的视觉效果。它在处理背景、重叠元素和图像时特别有用。

01:外部形状控制

使用 shape-outside 属性控制定义文本如何环绕 HTML 元素。此属性对于浮动元素特别有用。定义的形状决定了文本围绕该元素的流动,使文本能够平滑地环绕非矩形形状。

图片图片

02:滚动捕捉类型

使用 scroll-snap-type 属性用于在滚动容器内实现对齐点之间的平滑过渡。此功能可确保用户滚动浏览页面时内容部分整齐对齐,从而提供更结构化的用户体验。此scroll-snap-type属性控制沿水平轴或垂直轴的滚动,并定义如何接合对齐点。

图片图片

03:图像渲染

使用 image-rendering 性用于确定应如何呈现图像。它告诉浏览器在缩放或调整图像大小时应使用哪种算法。此属性对于 Web 开发人员在放大或缩小图像时保持质量特别有用。

图片图片

04:混合模式

使用 mix-blend-mode 可以用来混合两个或多个图层的颜色。此属性将一个图层的颜色与其下方的图层的颜色混合,在屏幕上创建不同的视觉效果。它在处理背景、重叠元素和图像时特别有用。

图片图片

05:背景剪辑

使用 background-clip 属性决定如何剪裁背景。此属性控制背景是否延伸到内容框的边缘,或者是否被剪裁到内边距和边框区域。

图片图片

06:背景滤镜

使用 backdrop-filter 属性允许我们对元素后面的内容应用各种效果。它通常用于模糊背景、更改背景颜色或添加阴影

图片图片

07:背面可见性

使用 backface-visibility 属性决定元素在 3D 空间中旋转时其背面是否可见。如果背面不可见,浏览器就不会渲染它,从而提高性能

图片图片

08:文本强调

使用 text-emphasis 属性于强调文本块中的某些字符。

图片图片

09:禁止用户选择

使用 user-select 来管理用户是否可选择文本的事件。指定为 none 将无法选择

图片 图片

责任编辑:武晓燕 来源: 程序员Sunday
相关推荐

2012-04-09 13:16:20

DIVCSS

2024-04-09 16:24:18

Promise开发

2019-08-06 14:54:22

Hadoop数据集海量数据

2018-11-28 10:00:42

React组件前端

2023-05-12 14:49:47

CSS框架前端

2022-09-27 14:36:57

JavaScrip数组开发

2021-01-13 11:03:20

Python数据代码

2021-06-07 14:04:13

并发编程Future

2021-07-30 14:38:04

Python代码

2023-01-09 17:23:14

CSS技巧

2013-03-04 09:34:48

CSSWeb

2024-08-06 14:54:16

2023-12-23 11:15:25

2019-02-18 13:36:03

Redis数据库面试

2021-11-17 11:03:14

Python代码语法

2019-03-20 14:26:34

人工智能机器人AI

2024-05-20 09:27:00

Web 开发CSS

2022-02-09 16:25:34

区块链技术加密货币

2023-05-22 15:37:31

CSS元素JavaScript
点赞
收藏

51CTO技术栈公众号