CSS 轮廓
CSS轮廓是用于在元素周围绘制线条的属性,位于边框边缘的外围,可以起到突出元素的作用。轮廓的样式、颜色和宽度可以通过CSS outline属性进行规定,轮廓是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。
轮廓示例
1,在元素周围画线
轮廓(outline)是CSS中的一种属性,用于在元素周围绘制一条线,这条线位于元素的边框外部,可以突出元素。
以下是一个CSS轮廓的简单示例:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 200px;
height: 200px;
background-color: red;
outline: 5px solid green;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
在上述代码中,div
元素有一个200px的宽度和高度,红色的背景,以及一个5px宽、绿色的轮廓。这个轮廓将突出div
元素,使其在页面上更加显眼。轮廓的位置完全取决于边框的位置,也就是说,如果边框是变化的,轮廓也会相应地跟随变化。
2,设置轮廓的样式
轮廓的样式、宽度和颜色都可以通过CSS outline属性进行设置。以下是一个示例:
div {
outline-style: solid;
outline-width: 5px;
outline-color: green;
}
在这个示例中,div
元素的轮廓样式被设置为实线,轮廓宽度为5px,轮廓颜色为绿色。你可以将solid
替换为其他轮廓样式,如dotted
或dashed
。你也可以使用特定的颜色值来定义轮廓的颜色。
3,设置轮廓的颜色
轮廓的颜色可以通过CSS outline-color属性进行设置。以下是一个示例:
div {
outline-color: green;
}
在这个示例中,div
元素的轮廓颜色被设置为绿色。你可以使用特定的颜色值来定义轮廓的颜色,例如:red
、#333
、rgb(255,0,0)
等。
4,设置轮廓的宽度
轮廓的宽度可以通过CSS outline-width属性进行设置。以下是一个示例:
扫描二维码关注公众号,回复:
16804013 查看本文章
div {
outline-width: 5px;
}
在这个示例中,div
元素的轮廓宽度被设置为5像素。你可以使用具体的像素值、百分比值或关键字(如thin
、medium
或thick
)来定义轮廓的宽度。
CSS 轮廓属性
属性 | 说明 | 可能值 |
---|---|---|
outline-color | 设置轮廓的颜色 | 颜色名称(如 red)、十六进制颜色代码(如 #FF0000)、rgb值(如 rgb(255,0,0))或 rgba 值(如 rgba(255,0,0,0.5)) |
outline-style | 设置轮廓的样式 | solid(实线)、dotted(点线)、dashed(虚线)、double(双线)、groove(凹槽)、ridge(垄脊)、inset(内嵌)、outset(外凸)或 none(无轮廓) |
outline-width | 设置轮廓的宽度 | 像素值、百分比值或 thin、medium、thick 等关键字 |
outline-offset | 设置轮廓与元素边框之间的距离 | 像素值或正值百分比 |
outline | 一个声明中设置所有的轮廓属性 | 如outline: 2px solid red;,表示轮廓宽度为2像素、实线样式、红色 |