前端代码 分享网站,自己做的网站买域名多少钱,养老网站备案必须做前置审批吗,中企动力西安分公司CSS轮廓
轮廓是在元素周围绘制的一条线#xff0c;在边框之外#xff0c;以凸显元素。
CSS拥有如下轮廓属性#xff1a;
outline-styleoutline-coloroutline-widthoutline-offsetoutline
注意#xff1a;轮廓与边框不同。不同之处在于#xff1a;轮廓是在元素边框之外…CSS轮廓
轮廓是在元素周围绘制的一条线在边框之外以凸显元素。
CSS拥有如下轮廓属性
outline-styleoutline-coloroutline-widthoutline-offsetoutline
注意轮廓与边框不同。不同之处在于轮廓是在元素边框之外绘制的并且可能与其他内容重叠。同样轮廓也不是元素尺寸的一部分元素的总宽度和高度不受轮廓线宽度的影响。 CSS轮廓样式
outline-sytle 属性指定轮廓的样式并可设置如下值
dotted - 定义点状的轮廓。dashed - 定义虚线的轮廓。solid - 定义实线的轮廓。double - 定义双线的轮廓。groove - 定义3D凹槽轮廓。ridge - 定义3D凸曹轮廓。inset - 定义3D凹边轮廓。outset - 定义3D凸边轮廓。none - 定义无轮廓。hidden - 定义隐藏的轮廓。
举例
p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;} 注意除非设置了outline-style属性否则其他轮廓属性都不会有任何作用。 CSS轮廓宽度
outline-width 属性指定轮廓的宽度并可设置如下值之一
thin通常为1pxmedium通常为3pxthick通常为5px特定尺寸以px、pt、cm、em计
举例
p.ex1 {border: 1px solid black;outline-style: solid;outline-color: red;outline-width: thin;
}p.ex2 {border: 1px solid black;outline-style: solid;outline-color: red;outline-width: medium;
}p.ex3 {border: 1px solid black;outline-style: solid;outline-color: red;outline-width: thick;
}p.ex4 {border: 1px solid black;outline-style: solid;outline-color: red;outline-width: 4px;
} CSS轮廓颜色
outline-color 属性用于设置轮廓的颜色。
可以通过以下方式设置染色
name - 指定颜色名 例如“redHEX - 指定十六进制值 例如”#ff0000RGB - 指定RGB值 例如“rgb(255,0,0)HSL - 指定HSL值 例如”hsl(0,100%,50%)invert - 执行颜色反转无论是什么颜色背景都可确保轮廓可见
举例
p.ex3 {border: 2px solid black;outline-style: outset;outline-color: grey;
} CSS轮廓简写
outline 属性是用于设置以下各个轮廓属性的简写属性
outline-widthoutline-style(必需outline-color
从上面的列表中outline属性可指定一个、两个或三个值。值的顺序无关重要。
举例
p.ex1 {outline: dashed;}
p.ex2 {outline: dotted red;}
p.ex3 {outline: 5px solid yellow;}
p.ex4 {outline: thick ridge pink;} CSS轮廓偏移
outline-offset属性在元素的轮廓与边框之间添加空间。元素及其轮廓之间的空间是透明的。
举例
p {margin: 30px;background: yellow;border: 1px solid black;outline: 1px solid red;outline-offset: 25px;
} 所有CSS轮廓属性
属性描述outline简写属性在一条声明中设置 outline-width、outline-style 以及 outline-color。outline-color设置轮廓的颜色。outline-offset指定轮廓与元素的边缘或边框之间的空间。outline-style设置轮廓的样式。outline-width设置轮廓的宽度。
