
- CSS 教程
- CSS - 首页
- CSS - 路线图
- CSS - 简介
- CSS - 语法
- CSS - 选择器
- CSS - 导入
- CSS - 测量单位
- CSS - 颜色
- CSS - 背景
- CSS - 字体
- CSS - 文本
- CSS - 图片
- CSS - 链接
- CSS - 表格
- CSS - 边框
- CSS - 块级边框
- CSS - 内联边框
- CSS - 外边距
- CSS - 列表
- CSS - 内边距
- CSS - 光标
- CSS - 轮廓
- CSS - 尺寸
- CSS - 滚动条
- CSS - 块内元素
- CSS - 下拉菜单
- CSS - 可见性
- CSS - 溢出
- CSS - 清除浮动
- CSS - 浮动
- CSS - 箭头
- CSS - 调整大小
- CSS - 引号
- CSS - 排序
- CSS - 定位
- CSS - 连字符
- CSS - 悬停
- CSS - 显示
- CSS - 聚焦
- CSS - 缩放
- CSS - 位移
- CSS - 高度
- CSS - 连字符字符
- CSS - 宽度
- CSS - 不透明度
- CSS - z-index
- CSS - 底部
- CSS - 导航栏
- CSS - 覆盖层
- CSS - 表单
- CSS - 对齐
- CSS - 图标
- CSS - 图片库
- CSS - 注释
- CSS - 加载器
- CSS - 属性选择器
- CSS - 组合器
- CSS - 根元素
- CSS - 盒模型
- CSS - 计数器
- CSS - 剪裁
- CSS - 书写模式
- CSS - Unicode-bidi
- CSS - `min-content`
- CSS - `all`
- CSS - `inset`
- CSS - `isolation`
- CSS - `overscroll`
- CSS - `justify-items`
- CSS - `justify-self`
- CSS - `tab-size`
- CSS - `pointer-events`
- CSS - `place-content`
- CSS - `place-items`
- CSS - `place-self`
- CSS - `max-block-size`
- CSS - `min-block-size`
- CSS - `mix-blend-mode`
- CSS - `max-inline-size`
- CSS - `min-inline-size`
- CSS - `offset`
- CSS - `accent-color`
- CSS - `user-select`
- CSS 高级
- CSS - 网格
- CSS - 网格布局
- CSS - Flexbox
- CSS - 可见性
- CSS - 定位
- CSS - 层
- CSS - 伪类
- CSS - 伪元素
- CSS - `@`规则
- CSS - 文字效果
- CSS - 分页媒体
- CSS - 打印
- CSS - 布局
- CSS - 验证
- CSS - 图片精灵
- CSS - `!important`
- CSS - 数据类型
- CSS3 教程
- CSS3 - 教程
- CSS - 圆角
- CSS - 边框图片
- CSS - 多重背景
- CSS - 颜色
- CSS - 渐变
- CSS - 盒阴影
- CSS - `box-decoration-break`
- CSS - `caret-color`
- CSS - 文本阴影
- CSS - 文本
- CSS - 二维变换
- CSS - 三维变换
- CSS - 过渡
- CSS - 动画
- CSS - 多列
- CSS - `box-sizing`
- CSS - 提示框
- CSS - 按钮
- CSS - 分页
- CSS - 变量
- CSS - 媒体查询
- CSS - 函数
- CSS - 数学函数
- CSS - 遮罩
- CSS - 形状
- CSS - 样式图片
- CSS - 特效性
- CSS - 自定义属性
- CSS 响应式
- CSS RWD - 简介
- CSS RWD - 视口
- CSS RWD - 网格视图
- CSS RWD - 媒体查询
- CSS RWD - 图片
- CSS RWD - 视频
- CSS RWD - 框架
- CSS 工具
- CSS - px 到 em 转换器
- CSS - 颜色选择器和动画
- CSS 资源
- CSS - 有用资源
- CSS - 讨论
CSS - `border-block-start-style` 属性
CSS `border-block-start-style` 属性确定逻辑块起始边框样式,并根据元素的书写模式、方向和文本方向转换为物理边框样式。
语法
border-block-start-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit;
属性值
值 | 描述 |
---|---|
none |
指定没有边框。默认值。 |
hidden |
类似于 none ,但在表格元素的边框冲突解决中有所不同。 |
dotted |
指定点状边框。 |
dashed |
指定虚线边框。 |
solid |
指定实线边框。 |
double |
指定双线边框。 |
groove |
指定 3D 凹槽边框。效果取决于 `border-color` 值。 |
ridge |
指定 3D 脊状边框。效果取决于 `border-color` 值。 |
inset |
指定 3D 内嵌边框。效果取决于 `border-color` 值。 |
outset |
指定 3D 外凸边框。效果取决于 `border-color` 值。 |
inherit |
从父元素继承此属性。 |
CSS 块起始边框样式示例
以下示例解释了使用不同值的 `border-block-start-style` 属性。
无边框块起始边框样式
为了避免在块起始边框处出现边框,我们使用 none
值。在以下示例中,none
值已与 `border-block-start-style` 属性一起使用。
示例
<!DOCTYPE html> <html> <head> <style> .box { border: 2px solid black; padding: 10%; border-block-start-style: none; } </style> </head> <body> <h2> CSS border-block-start-style property </h2> <p class="box"> This shows the border-block-start-style property with none value. </p> </body> </html>
隐藏边框块起始边框样式
要在块起始处设置隐藏边框,我们使用 hidden
值。这使边框占据空间,但保持不可见。以下示例显示了此效果,并使用红色指示线突出显示隐藏边框。
示例
<!DOCTYPE html> <html> <head> <style> .container { width: 300px; padding: 10%; border: 2px solid black; position: relative; margin-bottom: 20px; } .none { border-block-start-width: 5px; border-block-start-style: none; border-block-start-color: transparent; } .hidden { border-block-start-width: 5px; border-block-start-style: hidden; border-block-start-color: transparent; } .indicator { background-color: red; height: 5px; width: 100%; position: absolute; top: 0; left: 0; } .show-indicator .indicator { display: block; } </style> </head> <body> <h2> CSS border-block-start-style property </h2> <div class="container none"> Border Block Start Style: none </div> <div class="container hidden show-indicator"> Border Block Start Style: hidden <div class="indicator"> </div> </div> </body> </html>
点状边框块起始边框样式
要在块起始边框处使用点状边框,我们使用 dotted
值。在以下示例中,dotted
值已与 `border-block-start-style` 属性一起使用。
示例
<!DOCTYPE html> <html> <head> <style> .box { border: 4px solid black; padding: 10%; border-block-start-style: dotted; } </style> </head> <body> <h2> CSS border-block-start-style property </h2> <p class="box"> This shows the border-block-start-style property with dotted value. </p> </body> </html>
虚线边框块起始边框样式
要在块起始边框处使用虚线边框,我们使用 dashed
值。在以下示例中,dashed
值已与 `border-block-start-style` 属性一起使用。
示例
<!DOCTYPE html> <html> <head> <style> .box { border: 4px solid black; padding: 10%; border-block-start-style: dashed; } </style> </head> <body> <h2> CSS border-block-start-style property </h2> <p class="box"> This shows the border-block-start-style property with dashed value. </p> </body> </html>
实线边框块起始边框样式
要在块起始边框处使用实线边框,我们使用 solid
值。在以下示例中,solid
值已与 `border-block-start-style` 属性一起使用。
示例
<!DOCTYPE html> <html> <head> <style> .box { border: 4px solid black; padding: 10%; border-block-start-style: solid; } </style> </head> <body> <h2> CSS border-block-start-style property </h2> <p class="box"> This shows the border-block-start-style property with solid value. </p> </body> </html>
双线边框块起始边框样式
要在块起始边框处使用双线边框,我们使用 double
值。在以下示例中,double
值已与 `border-block-start-style` 属性一起使用。
示例
<!DOCTYPE html> <html> <head> <style> .box { border: 6px solid black; padding: 10%; border-block-start-style: double; } </style> </head> <body> <h2> CSS border-block-start-style property </h2> <p class="box"> This shows the border-block-start-style property with double value. </p> </body> </html>
凹槽边框块起始边框样式
要在块起始边框处使用 3D 凹槽边框,我们使用 groove
值。此效果取决于 `border-color`。在以下示例中,groove
值已与红色边框颜色一起使用 `border-block-start-style` 属性。
示例
<!DOCTYPE html> <html> <head> <style> .box { border: 15px solid red; padding: 10%; border-block-start-style: groove; } </style> </head> <body> <h2> CSS border-block-start-style property </h2> <p class="box"> This shows the border-block-start-style property with groove value. </p> </body> </html>
脊状边框块起始边框样式
要在块起始边框处使用 3D 脊状边框,我们使用 ridge
值。此效果取决于 `border-color`。在以下示例中,ridge
值已与黄色边框颜色一起使用 `border-block-start-style` 属性。
示例
<!DOCTYPE html> <html> <head> <style> .box { border: 15px solid yellow; padding: 10%; border-block-start-style: ridge; } </style> </head> <body> <h2> CSS border-block-start-style property </h2> <p class="box">T This shows the border-block-start-style property with ridge value. </p> </body> </html>
内嵌边框块起始边框样式
要在块起始边框处使用 3D 内嵌边框,我们使用 inset
值。此效果取决于 `border-color`。在以下示例中,inset
值已与橙色边框颜色一起使用 `border-block-start-style` 属性。
示例
<!DOCTYPE html> <html> <head> <style> .box { border: 15px solid orange; padding: 10%; border-block-start-style: inset; } </style> </head> <body> <h2> CSS border-block-start-style property </h2> <p class="box"> This shows the border-block-start-style property with inset value. </p> </body> </html>
外凸边框块起始边框样式
要在块起始边框处使用 3D 外凸边框,我们使用 outset
值。此效果取决于 `border-color`。在以下示例中,outset
值已与绿色边框颜色一起使用 `border-block-start-style` 属性。
示例
<!DOCTYPE html> <html> <head> <style> .box { border: 20px solid green; padding: 10%; border-block-start-style: outset; } </style> </head> <body> <h2> CSS border-block-start-style property </h2> <p class="box"> This shows the border-block-start-style property with outset value. </p> </body> </html>
带有书写模式的块起始边框样式
书写模式会影响 `border-block-start-style` 属性,因为它决定了边框的方向。水平模式用于顶部和底部边框,垂直模式用于右侧和左侧边框。这些在以下示例中显示。
示例
<!DOCTYPE html> <html> <head> <style> #horizontal { border: 9px solid black; padding: 8%; writing-mode: horizontal-tb; border-block-start-style: dashed; } #vertical { border: 9px solid black; padding: 8%; writing-mode: vertical-rl; border-block-style:dashed; } </style> </head> <body> <h2> CSS border-block-start-style property </h2> <p id="horizontal"> This shows the border-block-start-style property with dashed style in horizontal mode. </p> <p id="vertical"> This shows the border-block-start-style property with dashed style in vertical mode. </p> </body> </html>
支持的浏览器
属性 | ![]() |
![]() |
![]() |
![]() |
![]() |
---|---|---|---|---|---|
`border-block-start-style` | 69.0 | 79.0 | 41.0 | 12.1 | 56.0 |