css中新型的边框设置属性border-block

server/2024/12/23 20:20:47/

border-block 是 CSS 中的一个属性,主要用于在样式表中一次性设置元素的逻辑块向边框的属性值。这个属性是简写属性,可以同时设置 border-block-width、border-block-style 和 border-block-color。其中,border-block-start 用于设置元素的开始边界样式,而 border-block-end 用于设置元素的结束边界样式。在 CSS Grid 或 Flexbox 布局中,它尤其有用,因为它可以让你同时控制元素的顶部和底部边框,或者左侧和右侧边框,而无需分别指定 border-topborder-bottomborder-leftborder-right。以下是关于 border-block 属性的详细介绍:

1. 语法与属性值

css">/* 简写形式 */
border-block: <border-width> || <border-style> || <color>;
/* 单独分开属性 */
border-block-width: <border-width>;
border-block-style: <border-style>;
border-block-color: <color>;/* 不同方向分开形式 */
border-block-start: <border-width> || <border-style> || <color>;
border-block-end: <border-width> || <border-style> || <color>;/* 设置开始方向分开形式 */
border-block-start-width: <border-width>;
border-block-start-style: <border-style>;
border-block-start-color: <color>;/* 设置结束方向分开形式 */
border-block-end-width: <border-width>;
border-block-end-style: <border-style>;
border-block-end-color: <color>;
  • <border-width>:指定边框宽度,可以是具体的长度单位(如 px、em)、百分比、关键词(如 thin、medium、thick)或 initialinherit
  • <border-style>:定义边框样式,如 solid(实线)、dashed(虚线)、dotted(点状线)、double(双线)等,还包括 none(无边框)、hidden(隐藏边框)以及 initialinherit
  • <color>:指定边框颜色,可以是颜色名称、十六进制、RGB/RGBA、HSL/HSLA、关键字(如 transparent)或 currentColor

2. 工作原理

border-block 属性遵循 CSS 的物理盒模型,根据元素的书写模式(writing mode)确定边框的位置。在默认的水平书写模式(writing-mode: horizontal-tb)下:

  • border-block-start 对应于 border-top
  • border-block-end 对应于 border-bottom

当书写模式改变时,如设置为垂直模式(如 writing-mode: vertical-rlvertical-lr),border-block 的行为也会相应调整:

  • border-block-start 对应于 border-leftborder-right
  • border-block-end 对应于 border-rightborder-left

3. 使用示例

css">/* 简写形式,同时设置左右边框为 1px 宽度的实线红色边框 */
.example {border-block: 1px solid red;
}/* 长度形式,分别设置顶部和底部边框 */
.example {border-block-start: 2px dotted blue;border-block-end: 3px groove green;
}/* 分别设置边框宽度、样式和颜色 */
.example {border-block-width: thick;border-block-style: double;border-block-color: #333;
}

案例效果:https://jsrun.net/vJ5Kp/
4. 特性与优势

  • 响应式布局友好:在响应式设计中,当页面布局发生变化(如从水平变为垂直方向)时,使用 border-block 可以确保边框位置自动适应新的书写模式,无需额外编写媒体查询或更改其他样式。
  • 代码简洁:相比单独设置四个边框属性,border-block 可以减少重复代码,提高代码可读性和维护性。
  • 对齐控制:在 CSS Grid 或 Flexbox 布局中,border-block 有助于更精确地控制元素的对齐和间距,特别是在处理多列、多行布局时。

5. 注意事项

  • 浏览器兼容性:虽然 border-block 是 CSS Logical Properties and Values Level 1 规范的一部分,但并非所有浏览器都完全支持。在编写代码时,需要考虑兼容性问题,可能需要提供 fallback 方案或使用 autoprefixer 进行前缀处理。
  • 与传统边框属性的关系border-block 不会覆盖传统的 border-topborder-bottomborder-leftborder-rightborder 属性。如果同时设置了这些属性和 border-block,浏览器将按照层叠顺序(CSS specificity)决定最终应用的样式。

总结,border-block 属性为 CSS 开发者提供了更符合逻辑思维方式的边框控制方式,特别是在处理响应式布局和复杂网格、弹性布局时,能够简化代码、提升效率并增强布局的灵活性。但在实际应用中需关注浏览器兼容性,并合理结合传统边框属性进行样式设定。

兼容性:
在这里插入图片描述


http://www.ppmy.cn/server/19674.html

相关文章

免费ChatGPT合集——亲测免费

1、YesChat 无需登录 网址&#xff1a;YesChat-ChatGPT4V Dalle3 Claude 3 All in One Freehttps://www.yeschat.ai/ 2. 讯飞星火 要登录 讯飞星火大模型-AI大语言模型-星火大模型-科大讯飞 3.通义千问 要登录 通义我是通义&#xff0c;一个专门响应人类指令的…

Java去掉html标签

Java去掉html标签不需要正则&#xff0c;如果保存后不在前端回显原样式可以使用这个&#xff0c;否则不适用&#xff0c;使用的maven依赖如下&#xff1a; <dependency><groupId>org.jsoup</groupId><artifactId>jsoup</artifactId><version…

AtomGit 体验

AtomGit 体验 注册登录 直接可以通过其他应用授权登录AtomGit&#xff0c;登录后可以拥有基础的权限体验AtomGit所提供的功能。如果需要建立仓库和其他高级功能需要完善个人的手机号和邮箱 默认界面 非常清爽体验非常好&#xff0c;用户能够更加集中于所管理的仓库。 创建…

Cocos Creator 3D资源的导入与动画播放详解

在Cocos Creator中&#xff0c;导入和播放3D资源是非常重要的一部分&#xff0c;本文将详细介绍如何在Cocos Creator中导入3D资源并播放动画。 对惹&#xff0c;这里有一个游戏开发交流小组&#xff0c;大家可以点击进来一起交流一下开发经验呀&#xff01; 首先&#xff0c;…

移远通信再推系列高性能卫星、5G、GNSS及三合一组合天线

4月23日&#xff0c;全球领先的物联网整体解决方案供应商移远通信正式宣布&#xff0c;再次推出多款高性能天线产品&#xff0c;以进一步满足物联网市场对高品质天线产品的需求。 其中包括卫星天线YETN001L1A、三合一组合天线YEMA300QXA和YEMN302Q1A&#xff0c;外部5G天线YECN…

酷开科技用更包容的心态,将不同的内容形态注入酷开系统

纵观整个互联网的发展历程&#xff0c;我们经历从搜索时代到电子商务时代&#xff0c;再从社交网络时代到近几年兴起的兴趣网络时代。而在当下的兴趣网络时代&#xff0c;面对多元化、同质化的产品&#xff0c;价值文化成为品牌和消费者建立连接的关键。 酷开系统通过技术和服…

上位机图像处理和嵌入式模块部署(树莓派4b与视觉slam十四讲)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 实际使用中&#xff0c;树莓派4b是非常好的一个基础平台。本身板子价格也不是很贵&#xff0c;建议大家多多使用。之前关于vslam&#xff0c;也就是…

机器视觉3D视觉检测系统的优势

随着科技的飞速发展&#xff0c;机器视觉技术已经成为现代工业生产中不可或缺的一部分。特别是3D视觉检测系统&#xff0c;其优势日益凸显&#xff0c;为各行业的质量控制和生产自动化提供了强大的支持。本文将探讨机器视觉3D视觉检测系统的优势&#xff0c;并分析其在实际应用…