HTML CSS outline 轮廓属性

HTML CSS outline 轮廓是在元素周围绘制的一条线,在边框之外,以凸显元素。

CSS 拥有如下轮廓属性:
outline-style
outline-color
outline-width
outline-offset
outline
注意:轮廓与边框不同!不同之处在于:轮廓是在元素边框之外绘制的,并且可能与其他内容重叠。同样,轮廓也不是元素尺寸的一部分;元素的总宽度和高度不受轮廓线宽度的影响。

CSS 轮廓样式
outline-style 属性指定轮廓的样式,并可设置如下值:

dotted – 定义点状的轮廓。
dashed – 定义虚线的轮廓。
solid – 定义实线的轮廓。
double – 定义双线的轮廓。
groove – 定义 3D 凹槽轮廓。
ridge – 定义 3D 凸槽轮廓。
inset – 定义 3D 凹边轮廓。
outset – 定义 3D 凸边轮廓。
none – 定义无轮廓。
hidden – 定义隐藏的轮廓。

下面展示一下不同轮廓的样式:

点状轮廓



虚线轮廓



实线轮廓



双线轮廓



凹槽轮廓。效果取决于 outline-color 值。



凸脊轮廓。效果取决于 outline-color 值。



凹边轮廓。效果取决于 outline-color 值。



凸边轮廓。效果取决于 outline-color 值。


如果你发现错误或有其他见解,请给www.zhuei.com留言,我们会尽快更新本文!

发表评论

邮箱地址不会被公开。 必填项已用*标注