คุณสมบัติ outline-style
คุณสมบัติ outline-style กำหนดสไตล์
ของเส้นขอบภายนอก - เส้นขอบที่ไม่ใช้พื้นที่
ใน layout
ไวยากรณ์
selector {
outline-style: value;
}
ค่า
| ค่า | คำอธิบาย |
|---|---|
solid |
เส้นทึบ |
dotted |
เส้นขอบแบบจุด |
dashed |
เส้นขอบแบบขีดประ |
ridge |
เส้นขอบแบบนูนขึ้น |
double |
เส้นขอบแบบคู่
เพื่อให้เห็นเอฟเฟกต์ ความหนาของเส้นขอบต้องมีอย่างน้อย 3px
|
groove |
เส้นขอบแบบเว้า |
inset |
เส้นขอบแบบถูกกดลงไป |
outset |
เส้นขอบแบบนูนออกมา |
none |
ไม่มีเส้นขอบ |
ค่าเริ่มต้น: none
ตัวอย่าง . ค่า solid
<div id="elem"></div>
#elem {
outline-width: 1px;
outline-style: solid;
outline-color: black;
width: 300px;
height: 100px;
}
:
ตัวอย่าง . ค่า dotted
<div id="elem"></div>
#elem {
outline-width: 1px;
outline-style: dotted;
outline-color: black;
width: 300px;
height: 100px;
}
:
ตัวอย่าง . ค่า dashed
<div id="elem"></div>
#elem {
outline-width: 1px;
outline-style: dashed;
outline-color: black;
width: 300px;
height: 100px;
}
:
ตัวอย่าง . ค่า ridge
<div id="elem"></div>
#elem {
outline-width: 3px;
outline-style: ridge;
outline-color: black;
width: 300px;
height: 100px;
}
:
ตัวอย่าง . ค่า double
<div id="elem"></div>
#elem {
outline-width: 3px;
outline-style: double;
outline-color: black;
width: 300px;
height: 100px;
}
:
ตัวอย่าง . ค่า groove
<div id="elem"></div>
#elem {
outline-width: 3px;
outline-style: groove;
outline-color: black;
width: 300px;
height: 100px;
}
:
ตัวอย่าง . ค่า inset
<div id="elem"></div>
#elem {
outline-width: 3px;
outline-style: inset;
outline-color: black;
width: 300px;
height: 100px;
}
:
ตัวอย่าง . ค่า outset
<div id="elem"></div>
#elem {
outline-width: 3px;
outline-style: outset;
outline-color: black;
width: 300px;
height: 100px;
}
:
ดูเพิ่มเติม
-
คุณสมบัติ
outline-color,
ซึ่งกำหนดสีของเส้นขอบ -
คุณสมบัติ
outline-width,
ซึ่งกำหนดความหนาของเส้นขอบ -
คุณสมบัติ
outline,
ซึ่งเป็นคุณสมบัติแบบ shorthand สำหรับเส้นขอบ -
คุณสมบัติ
outline-offset,
ซึ่งกำหนดระยะออฟเซ็ตของเส้นขอบ