CSS 边框和轮廓属性-KeepStudy

CSS 边框和轮廓属性

| 属性 | 描述 | CSS |
|-----|-----|-----|
| border | 复合属性。设置对象边框的特性。 | 1 |
| border-color | 置或检索对象的边框颜色。 | 1 |
| border-style | 设置或检索对象的边框样式。 | 1 |
| border-width | 设置或检索对象的边框宽度。 | 1 |
| border-left | 复合属性。设置对象左边边框的特性。 | 1 |
| border-left-color | 设置或检索对象的左边边框颜色。 | 1 |
| border-left-style | 设置或检索对象的左边边框样式。 | 1 |
| border-left-width | 设置或检索对象的左边边框宽度。 | 1 |
| border-right | 复合属性。设置对象右边边框的特性。 | 1 |
| border-right-color | 设置或检索对象的右边边框颜色。 | 1 |
| border-right-style | 设置或检索对象的右边边框样式。 | 1 |
| border-right-width | 设置或检索对象的右边边框宽度。 | 1 |
| border-top | 复合属性。设置对象顶部边框的特性。 | 1 |
| border-top-color | 设置或检索对象的顶部边框颜色 | 1 |
| border-top-style | 设置或检索对象的顶部边框样式。 | 1 |
| border-top-width | 设置或检索对象的顶部边框宽度。 | 1 |
| border-bottom | 复合属性。设置对象底部边框的特性。 | 1 |
| border-bottom-color | 设置或检索对象的底部边框颜色。 | 1 | 
| border-bottom-style | 设置或检索对象的底部边框样式。 | 1 |
| border-bottom-width | 设置或检索对象的底部边框宽度。 | 1 |
| outline | 复合属性。设置或检索对象外的线条轮廓。 | 2
| outline-color | 设置或检索对象外的线条轮廓的颜色。 | 2
| outline-style | 设置或检索对象外的线条轮廓的样式。 | 2
| outline-width | 设置或检索对象外的线条轮廓的宽度。 | 2
| border-bottom-left-radius | 设置或检索对象的左下角圆角边框。提供2个参数，2个参数以空格分隔，每个参数允许设置1个参数值，第1个参数表示水平半径，第2个参数表示垂直半径，如第2个参数省略，则默认等于第1个参数 | 3 |
| border-bottom-right-radius | 设置或检索对象的右下角圆角边框。 | 3 |
| border-image | 设置或检索对象的边框样式使用图像来填充。 | 3 |
| border-image-outset | 规定边框图像超过边框的量。 | 3 |
| border-image-repeat | 规定图像边框是否应该被重复（repeated）、拉伸（stretched）或铺满（rounded）。 | 3 |
| border-image-slice | 规定图像边框的向内偏移。 | 3 |
| border-image-source | 规定要使用的图像，代替 border-style 属性中设置的边框样式。 | 3 |
| border-image-width | 规定图像边框的宽度。 | 3 |
| border-radius | 设置或检索对象使用圆角边框。 | 3 |
| border-top-left-radius | 定义左上角边框的形状。 | 3 |
| border-top-right-radius | 定义右上角边框的形状。 | 3 |
| box-decoration-break | 规定行内元素被折行 | 3 |
| box-shadow | 向方框添加一个或多个阴影。 | 3 |

## border、border-top、border-bottom、border-left、border-right属性
- JavaScript 语法:	object object.style.border="3px solid blue"
- 实例：
```css
/* 边框样式 */
border: solid;
/* 边框宽度 | 边框样式 */
border: 2px dotted;
/* 边框样式 | 边框颜色 */
border: outset #f33;
/* 边框宽度 | 边框样式 | 边框颜色 */
border: medium dashed green;
/* 全局值 */
border: inherit;
border: initial;
border: unset;
```

## border-color、border-bottom-color、border-top-color、border-right-color属性
- JavaScript 语法:object object.style.borderColor="#FF0000 blue"
- JavaScript 语法:object object.style.borderBottomColor="blue"
- 属性值
    - color：指定背景颜色
    - transparent：指定边框的颜色应该是透明的。这是默认
    - inherit：指定边框的颜色，应该从父元素继承
- 实例

```css
border-color:红，绿，蓝,粉红色;
上边框是红色
右边框是绿色
底部边框是蓝
左边框是粉红色

border-color：红，绿，蓝;
上边框是红色
左，右边框是绿色
底部边框是蓝

border-color：红，绿;
顶部和底部边框是红色
左右边框是绿色

border-color：红色;
所有四个边框是红色
```

## border-style、border-bottom-style、border-top-style、border-left-style、border-right-style 属性
- 属性值
    - 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：规定应该从父元素继承边框样式。
- 实例

```css
border-style:dotted solid double dashed;
上边框是点状
右边框是实线
下边框是双线
左边框是虚线

border-style:dotted solid double;
上边框是点状
右边框和左边框是实线
下边框是双线

border-style:dotted solid;
上边框和下边框是点状
右边框和左边框是实线

border-style:dotted;
所有4个边框都是点
```

## border-width、border-top-width、border-bottom-width、border-right-width、border-left-width属性
- JavaScript 语法：	object.style.borderWidth="thin thick"
- 属性值
    - thin：定义细的边框。
    - medium：默认。定义中等的边框。
    - thick：定义粗的边框。
    - length：允许您自定义边框的宽度。
    - inherit：规定应该从父元素继承边框宽度。
- 实例

```css
border-width:thin medium thick 10px;
上边框是细边框
右边框是中等边框
下边框是粗边框
左边框是 10px 宽的边框

border-width:thin medium thick;
上边框是细边框
右边框和左边框是中等边框
下边框是粗边框

border-width:thin medium;
上边框和下边框是细边框
右边框和左边框是中等边框

border-width:thin;
所有4个边框都是细边框
```

## outline 属性
- outline（轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
- outline简写属性在一个声明中设置所有的轮廓属性。
- 可以设置的属性分别是（按顺序）：outline-color, outline-style, outline-width
- 如果不设置其中的某个值，也不会出问题，比如 outline:solid #ff0000; 也是允许的。
- JavaScript 语法：object.style.outline="#0000FF dotted thin"
- 属性值
    - outline-color：规定边框的颜色。
    - outline-style：规定边框的样式。
    - outline-width：规定边框的宽度。
    - inherit：规定应该从父元素继承 outline 属性的设置。

## outline-color 属性
- JavaScript 语法：object.style.outlineColor="#00FF00"
-  请始终在 outline-color 属性之前声明 outline-style 属性。元素只有获得轮廓以后才能改变其轮廓的颜色。
- 属性值
    - color：指定轮廓颜色。
    - invert：默认。执行颜色反转（逆向的颜色）。可使轮廓在不同的背景颜色中都是可见。
    - inherit：规定应该从父元素继承轮廓颜色的设置。

## outline-style 属性
- JavaScript 语法：object.style.outlineStyle="dotted"
- 属性值
    - none：默认。定义无轮廓。
    - dotted：定义点状的轮廓。
    - dashed：定义虚线轮廓。
    - solid：定义实线轮廓。
    - double：定义双线轮廓。双线的宽度等同于 outline-width 的值。
    - groove：定义 3D 凹槽轮廓。此效果取决于 outline-color 值。
    - ridge：定义 3D 凸槽轮廓。此效果取决于 outline-color 值。
    - inset：定义 3D 凹边轮廓。此效果取决于 outline-color 值。
    - outset：定义 3D 凸边轮廓。此效果取决于 outline-color 值。
    - inherit：规定应该从父元素继承轮廓样式的设置。

## outline-width 属性
- JavaScript 语法：object.style.outlineWidth="thin"
- 属性值
    - thin：规定细轮廓。
    - medium：默认。规定中等的轮廓。
    - thick：规定粗的轮廓。
    - length：允许您规定轮廓粗细的值。
    - inherit：规定应该从父元素继承轮廓宽度的设置。

## border-image 属性
- 语法：border-image: source slice width outset repeat|initial|inherit;
- 属性值：
    - border-image-source：用于指定要用于绘制边框的图像的位置
    - border-image-slice：图像边界向内偏移
    - border-image-width：图像边界的宽度
    - border-image-outset：用于指定在边框外部绘制 border-image-area 的量
    - border-image-repeat：用于设置图像边界是否应重复（repeat）、拉伸（stretch）或铺满（round）。
- JavaScript 语法:	object.style.borderImage="url(border.png) 30 30 round"
- 实例：
```css
#borderimg { 
    -webkit-border-image: url(border.png) 30 round; /* Safari 3.1-5 */
    -o-border-image: url(border.png) 30 round; /* Opera 11-12.1 */
    border-image: url(border.png) 30 round;
}
```

## border-image-outset 属性
- JavaScript 语法:	object.style.borderImageOutset="30 30"
-  border-image-outset用于指定在边框外部绘制 border-image-area 的量。包括上下部和左右部分。如果第四个值被省略，它和第二个是相同的。如果也省略了第三个，它和第一个是相同的。如果也省略了第二个，它和第一个是相同的。不允许border-im-outset拥有负值。
- 属性值：
    - length：设置边框图像与边框（border-image）的距离，默认为0。
    - number：代表相应的 border-width 的倍数

## border-image-repeat 属性
- JavaScript 语法:object.style.borderImageRepeat="round"
- 属性值
    - stretch：默认值。拉伸图像来填充区域	
    - repeat：平铺（repeated）图像来填充区域。
    - round：类似 repeat 值。如果无法完整平铺所有图像，则对图像进行缩放以适应区域。
    - space：类似 repeat 值。如果无法完整平铺所有图像，扩展空间会分布在图像周围
    - initial：将此属性设置为默认值。
    - inherit：从父元素中继承该属性。

## border-image-slice 属性
- JavaScript 语法:object.style.borderImageSlice="50% 50%"
- 属性值：
    - number：数字表示图像的像素（位图图像）或向量的坐标（如果图像是矢量图像）
    - %：百分比图像的大小是相对的：水平偏移图像的宽度，垂直偏移图像的高度
    - fill：保留图像的中间部分

## border-image-width 属性
- 属性值：
    - number：表示相应的border-width 的倍数
    - %：边界图像区域的大小：横向偏移的宽度的面积，垂直偏移的高度的面积
    - auto：如果指定了，宽度是相应的image slice的内在宽度或高度

## border-radius 属性
- JavaScript 语法:	object object.style.borderRadius="5px"
- 语法：border-radius: 1-4 length|% / 1-4 length|%;
    - 每个半径的四个值的顺序是：左上角，右上角，右下角，左下角。如果省略左下角，右上角是相同的。如果省略右下角，左上角是相同的。如果省略右上角，左上角是相同的。

## border-bottom-left-radius 属性
- JavaScript 语法:object object.style.borderBottomRightRadius="5px"
- 语法：border-bottom-left-radius: length|% [length|%];
- 注意：注如果您设置了两个值，第一个用于下边框，第二个用于左边框。 如果省略第二个值，则从第一个值复制。 当其中一个值为 0 时，圆角将不被设置，这时这个角将展示为直角。

## border-bottom-right-radius 属性
- JavaScript 语法:object object.style.borderBottomRightRadius="5px"
- 语法：border-bottom-right-radius: length|% [length|%];
- 注意： border-right-radius属性的两个长度或百分比值定义了椭圆的四分之一外边框的边缘角落的形状。第一个值是水平半径，第二个是垂直半径。如果省略第二个值，它是从第一个复制。如果任一长度为零，角落里是方的，不圆润。水平半径的百分比是指边界框的宽度，而垂直半径的百分比是指边界框的高度。border-top-left-radius、border-top-right-radius同。

## border-top-left-radius 属性
- JavaScript 语法:object object.style.borderTopLeftRadius="5px"
- 语法：border-top-left-radius: length|% [length|%];

## border-top-right-radius 属性
- JavaScript 语法:object object.style.borderTopRightRadius="5px"
- 语法：border-top-right-radius: length|% [length|%];

## box-shadow 属性
- JavaScript 语法:object.style.boxShadow="10px 10px 5px #888888"
- 语法：box-shadow: h-shadow v-shadow blur spread color inset;
- 注意：boxShadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表，每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。
- 属性值
    - h-shadow：必需的。水平阴影的位置。允许负值
    - v-shadow：必需的。垂直阴影的位置。允许负值
    - blur：可选。模糊距离
    - spread：可选。阴影的大小
    - color：可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
    - inset：可选。从外层的阴影（开始时）改变阴影内侧阴影

顶部

CSS属性

目录

相关推荐