CSS 轮廓

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

border(边框) 不同的是,它是元素边框之外绘制的,并且可能与其他内容重叠。同样,轮廓也不是元素尺寸的一部分元素的总宽度和高度不受轮廓线宽度的影响

outline
  • outline-style 设置轮廓的样式
  • outline-color 属性用于设置轮廓的颜色
  • outline-width 属性指定轮廓的宽度
  • outline-offset 属性在元素的轮廓与边框之间添加空间
  • outline 属性是用于设置以下各个轮廓属性的简写属性
当单独用outline 赋值时,它的赋值顺序为

outline: blue solid 2px; //颜色 样式 大小

定义实线的轮廓

实例:

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

定义点状的轮廓

定义虚线的轮廓

定义实线的轮廓

定义双线的轮廓

定义 3D 凹槽轮廓

定义 3D 凸槽轮廓

定义 3D 凹边轮廓

定义 3D 凸边轮廓

定义无轮廓

定义隐藏的轮廓

发表回复