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

 border 属性
 缩写边框属性设置在一个声明中所有的边框属性。
可以设置的属性分别（按顺序）：border-width, border-style,和border-color.
如果上述值缺少一个没有关系，例如border：＃FF0000;是允许的。
JavaScript 语法: object object.style.border="3px solid blue"

border-bottom 属性;
border-bottom缩写属性设置一个声明中所有底部边框属性。
可以设置的属性分别（按顺序）：border-bottom-width, border-bottom-style,和border-bottom-color.
如果上述值缺少一个没有关系，例如border-bottom：＃FF0000;是允许的
JavaScript 语法: object object.style.borderBottom="3px solid blue"
设置底部边框样式：
p {
border-style:solid;
border-bottom:thick dotted #ff0000;}

border-bottom-color 属性
border-bottom-color 设置元素的下边框的颜色。
只能定义纯色，而且只有当边框的样式是一个非 none 或 hidden 的值时边框才可能出现。
注释：请始终把 border-style 属性声明到 border-color 属性之前。元素必须在您改变其颜色之前获得边框。
JavaScript 语法： object.style.borderBottomColor="blue"
设置下边框的颜色：
p{
  border-style:solid;
  border-bottom-color:#ff0000;}
可能的值
color_name 规定颜色值为颜色名称的边框颜色（比如 red）。
hex_number 规定颜色值为十六进制值的边框颜色（比如 #ff0000）。
rgb_number 规定颜色值为 rgb 代码的边框颜色（比如 rgb(255,0,0)）。
transparent 默认值。边框颜色为透明。
inherit     规定应该从父元素继承边框颜色。

border-bottom-style 属性
border-bottom-style属性设置元素底部边框样式。
JavaScript 语法: object object.style.borderBottomStyle="dotted"
设置底部边框样式：
p {
border-style:solid;
border-bottom-style:dotted;}
属性值
none 指定无边框
hidden 与"none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
dotted 指定点状边框
dashed 指定虚线边框
solid 指定实线边框
double 指定一个双边框
groove 定义双线。双线的宽度等于 border-width 的值
ridge 定义三维菱形边框。其效果取决于 border-color 的值
inset 定义三维凹边框。其效果取决于 border-color 的值
outset 定义三维凸边框。其效果取决于 border-color 的值
inherit 指定应该从父元素继承边框样式

border-bottom-width 属性
border-bottom-width属性设置元素的底部边框宽度。
注意务必先声明border-style属性才可以设置border-bottom-width属性。元素必须有边框，你才可以改变宽度。
JavaScript 语法: object object.style.borderBottomWidth="thick"
属性值
thin 定义细的下边框
medium 默认值。定义中等的下边框
thick 定义粗的下边框
length 允许您自定义下边框的宽度
inherit 规定应该从父元素继承边框宽度

border-color 属性
border-color属性属性设置四条边框的颜色,此属性可设置 1 到 4 种颜色。
border-color 属性是一个简写属性，可设置一个元素的所有边框中可见部分的颜色，或者为 4 个边分别设置不同的颜色。请看下面的例子：
实例
设置四个边框颜色：
p{
border-style:solid;
border-color:#ff0000 #0000ff;}
实例:
border-color:红，绿，蓝,粉红色;
上边框是红色
右边框是绿色
底部边框是蓝
左边框是粉红色
border-color：红，绿，蓝;
上边框是红色
左，右边框是绿色
底部边框是蓝
border-color：红，绿;
顶部和底部边框是红色
左右边框是绿色
border-color：红色;
所有四个边框是红色
注意：请始终把 border-style 属性声明到 border-color 属性之前。元素必须在您改变其颜色之前获得边框。
JavaScript 语法: object object.style.borderColor="#FF0000 blue"
属性值
color     指定背景颜色。在CSS颜色值查找颜色值的完整列表
transparent 指定边框的颜色应该是透明的。这是默认
inherit     指定边框的颜色，应该从父元素继承

border-left 属性
实例
设置左边框的样式：
p {
border-style:solid;
border-left:thick double #ff0000;}
border-left 简写属性把左边框的所有属性设置到一个声明中。
可以按顺序设置如下属性： border-left-width, border-left-style, and border-left-color.
如果不设置其中的某个值，也不会出问题，比如 border-left:solid #ff0000; 也是允许的。
JavaScript 语法： object.style.borderLeft="3px solid blue"
border-left-color 设置或检索对象的左边边框颜色。
border-left-style 设置或检索对象的左边边框样式。
border-left-width 设置或检索对象的左边边框宽度。

border-right 属性
实例
设置右边框的样式：
p{
  border-style:solid;
  border-right:thick double #ff0000;}
border-right 简写属性把右边框的所有属性设置到一个声明中。
可以按顺序设置如下属性：
border-right-width
border-right-style
border-right-color
如果不设置其中的某个值，也不会出问题，比如 border-right:solid #ff0000; 也是允许的。
JavaScript 语法： object.style.borderRight="3px solid blue"
可能的值
border-right-width 规定右边框的宽度。参阅：border-right-width 中可能的值。
border-right-style 规定右边框的样式。参阅：border-right-style 中可能的值。
border-right-color 规定右边框的颜色。参阅：border-right-color 中可能的值。
inherit 规定应该从父元素继承 border-right 属性的设置。

 border-style 属性
实例
设置四个边框的样式：
p{
border-style:solid;}
border-style属性设置一个元素的四个边框的样式。此属性可以有一到四个值。
实例:
border-style:dotted solid double dashed;
上边框是点状
右边框是实线
下边框是双线
左边框是虚线
border-style:dotted solid double;
上边框是点状
右边框和左边框是实线
下边框是双线
border-style:dotted solid;
上边框和下边框是点状
右边框和左边框是实线
border-style:dotted;
所有4个边框都是点状
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-top 属性
实例
设置上边框的样式：
p {
border-style:solid;
border-top:thick double #ff0000;}
border-top 简写属性把上边框的所有属性设置到一个声明中
可以按顺序设置如下属性： border-top-width, border-top-style, and border-top-color.
如果不设置其中的某个值，也不会出问题，比如 border-top:solid #ff0000; 也是允许的。
JavaScript 语法： object.style.borderTop="3px solid blue"
border-top-color 设置或检索对象的顶部边框颜色
border-top-style 设置或检索对象的顶部边框样式。
border-top-width 设置或检索对象的顶部边框宽度。

border-width 属性
实例
设置四个边框的宽度：
p{
border-style:solid;
border-width:15px;}
border-width属性设置一个元素的四个边框的宽度。此属性可以有一到四个值。
实例:
border-width:thin medium thick 10px;
上边框是细边框
右边框是中等边框
下边框是粗边框
左边框是 10px 宽的边框
border-width:thin medium thick;
上边框是细边框
右边框和左边框是中等边框
下边框是粗边框
border-width:thin medium;
上边框和下边框是细边框
右边框和左边框是中等边框
border-width:thin;
所有4个边框都是细边框
JavaScript 语法： object.style.borderWidth="thin thick"
属性值
thin 定义细的边框。
medium 默认。定义中等的边框。
thick 定义粗的边框。
length 允许您自定义边框的宽度。
inherit 规定应该从父元素继承边框宽度。

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

outline-color 属性
实例
设置一个虚线轮廓的颜色：
p {
outline-style:dotted;
outline-color:#00ff00;}
outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围。
outline-color属性指定轮廓颜色。
注意： 请始终在 outline-color 属性之前声明 outline-style 属性。元素只有获得轮廓以后才能改变其轮廓的颜色。
JavaScript 语法： object.style.outlineColor="#00FF00"
提示和注释
outline是围绕元素。它是围绕元素的边距。但是，它是来自不同的边框属性。
outline不是元素尺寸的一部分，因此元素的宽度和高度属性不包含轮廓的宽度。
属性值
color 指定轮廓颜色。在CSS颜色值寻找颜色值的完整列表。
invert 默认。执行颜色反转（逆向的颜色）。可使轮廓在不同的背景颜色中都是可见。
inherit 规定应该从父元素继承轮廓颜色的设置。

outline-style 属性
实例
设置outline的样式：
p {outline-style:dotted;}
outline（轮廓）是绘制于元素周围的一条线，位于边框边缘的外围。
outline-style属性指定outline的样式。
JavaScript 语法： object.style.outlineStyle="dotted"
提示和注释
outline是围绕元素。它是围绕元素的边距。但是，它是来自不同的边框属性。
outline不是元素尺寸的一部分，因此元素的宽度和高度属性不包含轮廓的宽度。
属性值
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 属性
实例
设置轮廓的宽度：
p {
outline-style:dotted;
outline-width:5px;}
outline（轮廓）是绘制于元素周围的一条线，位于边框边缘的外围。
outline-width指定轮廓的宽度。
注意： 请始终在outline-wicth属性之前声明outline-style属性。元素只有获得轮廓以后才能改变其轮廓的宽度。
JavaScript 语法： object.style.outlineWidth="thin"
提示和注释
outline是围绕元素。它是围绕元素的边距。但是，它是来自不同的边框属性。
outline不是元素尺寸的一部分，因此元素的宽度和高度属性不包含轮廓的宽度。
属性值
thin 规定细轮廓。
medium 默认。规定中等的轮廓。
thick 规定粗的轮廓。
length 允许您规定轮廓粗细的值。
inherit 规定应该从父元素继承轮廓宽度的设置。

CSS3 border-bottom-left-radius 属性
实例
为div元素的右下角添加圆角边框：
div{
border:2px solid;
border-bottom-left-radius:2em;}
border-right-radius属性定义右下角边框的形状。
提示: 这个属性允许你添加元素的圆角边框！
JavaScript 语法: object object.style.borderBottomRightRadius="5px"
语法
border-bottom-left-radius: length|% [length|%];
注意：border-right-radius属性的两个长度或百分比值定义了椭圆的四分之一外边框的边缘角落的形状。第一个值是水平半径，第二个是垂直半径。如果省略第二个值，它是从第一个复制。如果任一长度为零，角落里是方的，不圆润。水平半径的百分比是指边界框的宽度，而垂直半径的百分比是指边界框的高度。
length 定义右下角的形状。
% 使用%定义右下角的形状。
border-bottom-right-radius 设置或检索对象的右下角圆角边框。

border-image 设置或检索对象的边框样式使用图像来填充。
CSS3 border-image-outset 属性
实例
设置border-img-outset属性：
div{
border-image-source: url(border.png);
border-image-outset: 30 30;}
border-image-outset用于指定在边框外部绘制 border-image-area 的量
JavaScript 语法: object.style.borderImageOutset="30 30"
语法
border-image-outset: length|number;
注意： border-image-outset用于指定在边框外部绘制 border-image-area 的量。包括上下部和左右部分。如果第四个值被省略，它和第二个是相同的。如果也省略了第三个，它和第一个是相同的。如果也省略了第二个，它和第一个是相同的。不允许border-im-outset拥有负值。
length  

number 代表相应的border-width 的倍数

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 向方框添加一个或多个阴影。