位置:电子教程 > CSS入门到精通 (如果看不到内容请使用360浏览器) 推荐学习资源
CSS入门
CSS 基础样式
CSS 高级样式
语法应用:CSS 对齐
当前阅读教程:CSS入门到精通 > 轮廓样式 outline-style
阅读(22555525)      收藏       赞(5685)      分享
上一篇: 轮廓颜色outline-color 下一篇: 轮廓宽度 outline-width

浏览器支持

       表格中的数字表示支持该属性的第一个浏览器版本号

image.png

属性定义及使用说明

outline(轮廓)是绘制于元素周围的一条线,位于边框边缘的外围。

outline-style属性指定outline的样式。

默认值:

none

继承:

no

版本:

CSS2

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

规定应该从父元素继承轮廓样式的设置。

实例

代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>轮廓样式 outline-style</title>
<!--定义内部样式-->
<style>
     p{
             margin: 20px;  /*外边距*/
             border:1px solid red; /*边框*/
             outline-offset: 3px;    /*边框和轮廓的距离*/
              outline-width: 5px;
      }
     .dotted {outline-style: dotted}
     .dashed {outline-style: dashed}
     .solid {outline-style: solid}
     .double {outline-style: double}
     .groove {outline-style: groove}
     .ridge {outline-style: ridge}
     .inset {outline-style: inset}
     .outset {outline-style: outset}   
</style>    
</head>
<body>
     <p>A dotted outline</p>
     <p>A dashed outline</p>
     <p>A solid outline</p>
     <p>A double outline</p>
     <p>A groove outline</p>
     <p>A ridge outline</p>
     <p>An inset outline</p>
     <p>An outset outline</p>
 
     <p><b>注释:</b>只有在规定了 !DOCTYPE 时,Internet Explorer 8 (以及更高版本) 才支持 outline-style 属性。</p>
</body>
</html>
效果图

小白教程网www.2d5.net

image.png


上一篇: 轮廓颜色outline-color 下一篇: 轮廓宽度 outline-width
计算机毕业设计作品网      毕业设计文档网      小程序教程网       毕业设计资料网  |         毕业设计定制QQ:45157718(微信同号)(备注:毕设)