0

0

聊聊一些不为人所熟知的CSS属性名

PHPz

PHPz

发布时间:2023-04-21 11:24:08

|

752人浏览过

|

来源于php中文网

原创

css是一个强大而灵活的样式表语言,专门用于网页设计中对html和xml等标记语言的视觉呈现,令网页呈现更为美观、整洁,也更具有交互性。然而,尽管css属性模块已经有数百个标准化的属性名,但仍有许多属性名都不为人所知。

那么,本文将会介绍一些不为人所熟知的CSS属性名,这些属性名的特性和应用场景将被逐一揭示。

  1. overscroll-behavior
    这个属性定义了触摸设备滚动时元素的滚动行为,该属性包括auto、contain、none和unset四个属性值。

首先,auto是默认的行为,当用户达到滚动边界时,触摸设备会进行默认的滚动操作。而contain则是禁止了滚动区域的溢出,并保留了穿透滚动行为,意味着当用户触摸设备达到滚动边界时,页面的背景元素可以滚动。而none属性则禁止了整个页面的滚动行为,unset会使用元素的父级元素的属性值。

  1. clip-path
    clip-path属性允许开发人员在元素上定义一个不规则形状,该不规则形状通过定义路径来实现。这是实现可以打破传统矩形边界限制的一种方法。

clip-path属性定义了剪切路径函数(clip-path function),这个函数可以被定义为URL(指向SVG文件)或指定一个几何图形。如需指定具体形状,可以选择一些预定义的形状,如ellipse()、polygon()和inset()。

  1. object-position
    如果使用图片作为背景,通常应该使用background-position设置图片的位置。而对于内联图像,可以使用这个object-position属性实现相同的效果。

object-position允许元素中映射图像的位置进行调整,使用这个属性可以指定对象默认情况下应该显示的位置。通常,这个属性与元素的width或height属性配合使用,以便调整映射图像的位置(即对其进行剪裁)。

立即学习前端免费学习笔记(深入)”;

  1. mix-blend-mode
    mix-blend-mode可以用来控制两个元素的颜色混合方式。

例如,在两个元素之间放置一个文本蒙版时,可以使用mix-blend-mode混合一些颜色,并使它们在某些地方通过叠加运算来呈现出独特的效果。该属性包括各种属性值(如multiply、screen、overlay、darken、lighten等)。

Whimsical
Whimsical

Whimsical推出的AI思维导图工具

下载
  1. text-align-last
    text-align-last属性确定最后一行的文本对齐方式。

通常,文本使用文本对齐方式对齐元素的边界。但是,如果文本溢出到另一行,最后一行的文本对齐方式可能不同于整个文本块的对齐方式。这个属性允许开发人员指定最后一行的文本对齐方式。

  1. shape-outside
    利用这个CSS属性,可以为文本设置自适应的形状。例如,如果您想围绕图像或某些形状排列文本而不是使用传统的文本文本排列,这个属性就非常有用。

shape-outside支持四个形状函数,这些函数通过它们的类似SVG路径的语法指定自适应形状。这些形状包括circle(圆),ellipse(椭圆),polygon(多边形)和inset(矩形)。

  1. font-variant-ligatures
    当在Web上呈现直通脚本时,渲染仍然无法将具有多个字符组成的字符呈现得很好。

使用font-variant-ligatures属性可以让浏览器使用忽略掉特定字体形态的字形替换,以实现更好的渲染效果。这个属性包括全体半角字形替换、连字字形替换(ligatures)、数字字形替换、标点符号字形替换和注音字母替换。

总结
这里列举出的七个CSS属性名不是广为人知,但这并不意味着它们没有用处。实际上,了解这些属性名可以让你在开发网页时更加高效,同时让你的页面更加出色和完整。

在未来,随着互联网技术的发展和变化,新的属性名将会不断地涌现。所以,我们需要跟上时代进步的步伐,不断学习和尝试,才能成为一名优秀的前端工程师。

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
Java 桌面应用开发(JavaFX 实战)
Java 桌面应用开发(JavaFX 实战)

本专题系统讲解 Java 在桌面应用开发领域的实战应用,重点围绕 JavaFX 框架,涵盖界面布局、控件使用、事件处理、FXML、样式美化(CSS)、多线程与UI响应优化,以及桌面应用的打包与发布。通过完整示例项目,帮助学习者掌握 使用 Java 构建现代化、跨平台桌面应用程序的核心能力。

37

2026.01.14

php与html混编教程大全
php与html混编教程大全

本专题整合了php和html混编相关教程,阅读专题下面的文章了解更多详细内容。

19

2026.01.13

PHP 高性能
PHP 高性能

本专题整合了PHP高性能相关教程大全,阅读专题下面的文章了解更多详细内容。

37

2026.01.13

MySQL数据库报错常见问题及解决方法大全
MySQL数据库报错常见问题及解决方法大全

本专题整合了MySQL数据库报错常见问题及解决方法,阅读专题下面的文章了解更多详细内容。

19

2026.01.13

PHP 文件上传
PHP 文件上传

本专题整合了PHP实现文件上传相关教程,阅读专题下面的文章了解更多详细内容。

16

2026.01.13

PHP缓存策略教程大全
PHP缓存策略教程大全

本专题整合了PHP缓存相关教程,阅读专题下面的文章了解更多详细内容。

6

2026.01.13

jQuery 正则表达式相关教程
jQuery 正则表达式相关教程

本专题整合了jQuery正则表达式相关教程大全,阅读专题下面的文章了解更多详细内容。

3

2026.01.13

交互式图表和动态图表教程汇总
交互式图表和动态图表教程汇总

本专题整合了交互式图表和动态图表的相关内容,阅读专题下面的文章了解更多详细内容。

45

2026.01.13

nginx配置文件详细教程
nginx配置文件详细教程

本专题整合了nginx配置文件相关教程详细汇总,阅读专题下面的文章了解更多详细内容。

9

2026.01.13

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号