ThinkChat🤖让你学习和工作更高效,注册即送10W Token,即刻开启你的AI之旅 广告
# CSS outline 属性 ## 实例 设置 4 个边框的样式: ``` p { outline:#00FF00 dotted thick; } ``` ## 浏览器支持 所有浏览器都支持 outline 属性。 注释:如果规定了 !DOCTYPE,则 IE8 支持 outline 属性。 ## 定义和用法 outline (轮廓)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。 注释:轮廓线不会占据空间,也不一定是矩形。 outline 简写属性在一个声明中设置所有的轮廓属性。 可以按顺序设置如下属性: * outline-color * outline-style * outline-width 如果不设置其中的某个值,也不会出问题,比如 outline:solid #ff0000; 也是允许的。 | 默认值: | invert none medium | | --- | --- | | 继承性: | no | | --- | --- | | 版本: | CSS2 | | --- | --- | | JavaScript 语法: | _object_.style.outline="#0000FF dotted thin" | | --- | --- | ## 可能的值 | 值 | 描述 | | --- | --- | | _outline-color_ | 规定边框的颜色。参阅:[outline-color](pr_outline-color.asp "CSS outline-color 属性") 中可能的值。 | | _outline-style_ | 规定边框的样式。参阅:[outline-style](pr_outline-style.asp "CSS outline-style 属性") 中可能的值。 | | _outline-width_ | 规定边框的宽度。参阅:[outline-width](pr_outline-width.asp "CSS outline-width 属性") 中可能的值。 | | inherit | 规定应该从父元素继承 outline 属性的设置。 | ## TIY 实例 [在元素周围画线](/tiy/t.asp?f=csse_outline) 本例演示使用 outline 属性在元素周围画一条线。 ``` <!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> ``` ## 相关页面 CSS 教程:[CSS 轮廓](/css/css_outline.asp "CSS 轮廓") HTML DOM 参考手册:[outline 属性](/jsref/prop_style_outline.asp "HTML DOM outline 属性")