
CSS border-style 属性
发布日期:2021-05-07 19:17:31
浏览次数:11
分类:技术文章
本文共 1169 字,大约阅读时间需要 3 分钟。
实例
设置 4 个边框的样式:
p { border-style:solid; }
浏览器支持
IE | Firefox | Chrome | Safari | Opera |
---|---|---|---|---|
所有浏览器都支持 border-style 属性。
注释:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit" 或 "hidden"。
定义和用法
border-style 属性用于设置元素所有边框的样式,或者单独地为各边设置边框样式。
只有当这个值不是 none 时边框才可能出现。
例子 1
border-style:dotted solid double dashed;
- 上边框是点状
- 右边框是实线
- 下边框是双线
- 左边框是虚线
例子 2
border-style:dotted solid double;
- 上边框是点状
- 右边框和左边框是实线
- 下边框是双线
例子 3
border-style:dotted solid;
- 上边框和下边框是点状
- 右边框和左边框是实线
例子 4
border-style:dotted;
- 所有 4 个边框都是点状
默认值: | not specified |
---|---|
继承性: | no |
版本: | CSS1 |
JavaScript 语法: | object.style.borderStyle="dotted double" |
可能的值
值 | 描述 |
---|---|
none | 定义无边框。 |
hidden | 与 "none" 相同。不过应用于表时除外,对于表,hidden 用于解决边框冲突。 |
dotted | 定义点状边框。在大多数浏览器中呈现为实线。 |
dashed | 定义虚线。在大多数浏览器中呈现为实线。 |
solid | 定义实线。 |
double | 定义双线。双线的宽度等于 border-width 的值。 |
groove | 定义 3D 凹槽边框。其效果取决于 border-color 的值。 |
ridge | 定义 3D 垄状边框。其效果取决于 border-color 的值。 |
inset | 定义 3D inset 边框。其效果取决于 border-color 的值。 |
outset | 定义 3D outset 边框。其效果取决于 border-color 的值。 |
inherit | 规定应该从父元素继承边框样式。 |
描述
最不可预测的边框样式是 double。它定义为两条线的宽度再加上这两条线之间的空间等于 border-width 值。不过,CSS 规范并没有说其中一条线是否比另一条粗或者两条线是否应该是一样的粗,也没有指出线之间的空间是否应当比线粗。所有这些都有用户代理决定,创作人员对这个决定没有任何影响。
TIY 实例
本例演示如何设置四边框样式。
本例演示如何在元素的各边设置不同的边框。
相关页面
CSS 教程:
HTML DOM 参考手册:
发表评论
最新留言
初次前来,多多关照!
[***.217.46.12]2025年03月22日 23时16分39秒
关于作者

喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
(模拟数组)Java 求解螺旋矩阵 II
2019-03-04
Burpsuite-02-设置JVM内存大小与解决页面显示文字乱码错误
2019-03-04
Python学习:字符串
2019-03-04
计算几何(旁切圆) - Ex-circles - UVA 11731
2019-03-04
DP - Tickets - HDU - 1260
2019-03-04
phpStudy for Linux (lnmp+lamp一键安装包)
2019-03-04
【安卓学习笔记】JAVA基础Lesson9-对象的转型
2019-03-04
本校暑假训练营11_Python数据分析入门7-网络1
2019-03-04
本校暑假训练营12_Python数据分析入门7-网络2
2019-03-04
数据库SQL实战3_获取所有非manager的员工emp_no
2019-03-04
LeetCode7_数组双指针_有序数组元素去重、数组移除指定元素
2019-03-04
Tomcat启动过程连接部分-(下)
2019-03-04
JVM篇-结合源码分析垃圾收集器的类型
2019-03-04
RT -Thread Studio开发环境下使用W5500做TCP客户端
2019-03-04
Warning: The core is locked up的解决办法
2019-03-04
奔涌吧 后浪!!! 哔哩哔哩 何冰
2019-03-04
【JVM系列】JDK 内置工具
2019-03-04