边框(Border) 和 轮廓(Outline) 属性

时间：2023-03-08 17:02:56

border 复合属性。设置对象边框的特性。

标签定义及使用说明

如果上述值缺少一个没有关系，例如border：＃FF0000;是允许的。

  • 默认值: not specified
  • 继承: no
  • JavaScript 语法: object object.style.border="3px solid blue"

属性值

border-width 指定边框的宽度

border-style 指定边框的样式

border-color 指定边框的颜色

inherit 指定应该从父元素继承border属性值

相关

  • border-bottom 复合属性。设置对象底部边框的特性。
  • border-left 复合属性。设置对象左边边框的特性。
  • border-right 复合属性。设置对象右边边框的特性。
  • border-top 复合属性。设置对象顶部边框的特性。

border-color 置或检索对象的边框颜色。

相关

  • border-bottom-color 设置或检索对象的底部边框颜色。
  • border-left-color 设置或检索对象的左边边框颜色。
  • border-right-color 设置或检索对象的右边边框颜色。
  • border-top-color 设置或检索对象的顶部边框颜色

border-style 设置或检索对象的边框样式。

属性定义及使用说明

border-style属性设置一个元素的四个边框的样式。此属性可以有一到四个值。

border-style:dotted solid double dashed;

默认值: not specified

继承: no

JavaScript 语法: object 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 规定应该从父元素继承边框样式。

相关

  • border-bottom-style 设置或检索对象的底部边框样式。
  • border-left-style 设置或检索对象的左边边框样式。
  • border-top-style 设置或检索对象的顶部边框样式。
  • border-right-style 设置或检索对象的右边边框样式。

border-width 设置或检索对象的边框宽度。

相关

  • border-bottom-width 设置或检索对象的底部边框宽度。
  • border-top-width 设置或检索对象的顶部边框宽度。
  • border-right-width 设置或检索对象的右边边框宽度。
  • border-left-width 设置或检索对象的左边边框宽度。

outline 复合属性。设置或检索对象外的线条轮廓。

outline-color 设置或检索对象外的线条轮廓的颜色。

outline-style 设置或检索对象外的线条轮廓的样式。

outline-width 设置或检索对象外的线条轮廓的宽度。

border-bottom-left-radius 设置或检索对象的左下角圆角边框。提供2个参数，2个参数以空格分隔，每个参数允许设置1个参数值，第1个参数表示水平半径，第2个参数表示垂直半径，如第2个参数省略，则默认等于第1个参数

border-bottom-right-radius 设置或检索对象的右下角圆角边框。

border-image 设置或检索对象的边框样式使用图像来填充。

border-image-outset 规定边框图像超过边框的量。

border-image-repeat 规定图像边框是否应该被重复（repeated）、拉伸（stretched）或铺满（rounded）。

border-image-slice 规定图像边框的向内偏移。

border-image-source 规定要使用的图像，代替 border-style 属性中设置的边框样式。

border-image-width 规定图像边框的宽度。

border-radius 设置或检索对象使用圆角边框。

border-top-left-radius 定义左上角边框的形状。

border-top-right-radius 定义右下角边框的形状。

box-decoration-break 规定行内元素被折行

box-shadow 向方框添加一个或多个阴影。

定义和用法

默认值： none

继承性： no

语法

box-shadow: h-shadow v-shadow blur spread color inset;

注释：box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。

  • h-shadow 必需。水平阴影的位置。允许负值。
  • v-shadow 必需。垂直阴影的位置。允许负值。
  • blur 可选。模糊距离。从阴影尺寸范围向外模糊多少距离逐渐变淡
  • spread 可选。阴影的尺寸。 默认为0和元素大小相同，当为10px时，在原大小上长宽扩大10px。
  • color 可选。阴影的颜色。请参阅 CSS 颜色值。
  • inset 可选。将外部阴影 (outset) 改为内部阴影。spread：距离边框的阴影大小，0时为无。blur:依然为spread到消失的距离，不过是变成向内了。h-shadow\v-shadow为显示的阴影水平和垂直偏移距离，当spread为0时阴影是存在的，只是在元素以外的不显示，偏移后就出现了。

例子

box-shadow: 10px 10px 5px 5px #888888;

相关文章