CSS属性汇总--(7) border outline

CSS border 属性

         border 简写属性在一个声明设置所有的边框属性。

可以按顺序设置如下属性：

• border-width
• border-style
• border-color

        如果不设置其中的某个值，也不会出问题，比如 border:solid #ff0000; 也是允许的。

        Js语法： object.style.border="3px solid blue"

 

下面是一个例子：

< html >

< ! -- awwwb.com -- >
< head >
< style type ="text/css" >
p    
{
border: medium double rgb(250,0,255)
}
</style>
</head>

< body >
< p >Some text </p>
</body>


< ! -- awwwb.com -- >
</html>

运行结果如下：

         此外，border还支持对上下左右四边的边框进行单独设置：

         例如还有以下n个属性：

• border-bottom-width
• border-bottom-style
• border-bottom-color

• border-left-width
• border-left-style
• border-left-color

• border-top-width
• border-top-style
• border-top-color

• border-right-width
• border-right-style
• border-right-color

 

CSS outline 属性

          outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

注释：轮廓线不会占据空间，也不一定是矩形。

         outline 简写属性在一个声明中设置所有的轮廓属性。

可以按顺序设置如下属性：

• outline-color
• outline-style
• outline-width

如果不设置其中的某个值，也不会出问题，比如 outline:solid #ff0000; 也是允许的。

        Js语法： object.style.outline="#0000FF dotted thin"

 

       下面是outline-style的可选值：

1.  none：默认值，无轮廓
2. dotted：定义点状的轮廓
3. dashed：定义虚线轮廓
4. solid：定义实线轮廓
5. double：定义双线轮廓
6. groove：定义 3D 凹槽轮廓。此效果取决于 outline-color 值
7. ridge：定义 3D 凸槽轮廓。此效果取决于 outline-color 值
8. inset：定义 3D 凹边轮廓。此效果取决于 outline-color 值
9. outset：定义 3D 凸边轮廓。此效果取决于 outline-color 值

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

 

下面是一个小例子：

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html >


< head >
< style type ="text/css" >
p    
{
border:red solid thin;
outline:#00ff00 dotted thick;
}
</style>
</head>

< body >
< p > < b >注释： </b>只有在规定了 !DOCTYPE 时，Internet Explorer 8 （以及更高版本） 才支持 outline 属性。 </p>
</body>


</html>

显示结果如下：