คุณสมบัติ CSS Outline
ร่างเป็นลากเส้นรอบองค์ประกอบ - นอกชายแดน นี้สามารถใช้เพื่อให้องค์ประกอบ "stand out"
ซีเอสเอ outline คุณสมบัติระบุรูปแบบสีและความกว้างของร่าง
องค์ประกอบนี้มีขอบสีดำบางและร่างที่สองคือ 10px กว้างและสีเขียว
CSS Outline
outline เป็นสายที่ถูกวาดรอบองค์ประกอบ (นอกพรมแดน) เพื่อให้องค์ประกอบ "stand out"
อย่างไรก็ตาม outline คุณสมบัติแตกต่างจากคุณสมบัติชายแดน - เดอะ outline ไม่เป็นส่วนหนึ่งของมิติองค์ประกอบของ; องค์ประกอบของความกว้างทั้งหมดและความสูงไม่ได้รับผลกระทบจากความกว้างของเค้าร่าง
Outline รูปแบบ
outline-style คุณสมบัติระบุรูปแบบของเค้าร่าง
outline-style คุณสมบัติสามารถมีค่าใดค่าหนึ่งต่อไปนี้:
-
dotted- กำหนดร่างประ -
dashed- กำหนดร่างประ -
solid- กำหนดโครงร่างแข็ง -
double- กำหนดร่างคู่ -
groove- กำหนด 3D ร่องร่าง ผลกระทบที่เกิดขึ้นอยู่กับค่าโครงร่างสี -
ridge- กำหนดร่างยับ 3D ผลกระทบที่เกิดขึ้นอยู่กับค่าโครงร่างสี -
inset- กำหนดร่างภาพประกอบ 3 มิติ ผลกระทบที่เกิดขึ้นอยู่กับค่าโครงร่างสี -
outset- กำหนดร่างเริ่มแรก 3D ผลกระทบที่เกิดขึ้นอยู่กับค่าโครงร่างสี -
none- ไม่มีการระบุการร่าง -
hidden- กำหนดร่างที่ซ่อนอยู่
ตัวอย่างต่อไปนี้ชุดแรกขอบสีดำบาง ๆ แต่ละรอบ <p> องค์ประกอบแล้วมันแสดงให้เห็นที่แตกต่างกัน outline-style ค่า:
ตัวอย่าง
p {
border: 1px solid black;
outline-color: red;
}
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;}ผล:
A dotted outline.
A dashed outline.
A solid outline.
A double outline.
A groove outline. The effect depends on the outline-color value.
A ridge outline. The effect depends on the outline-color value.
An inset outline. The effect depends on the outline-color value.
An outset outline. The effect depends on the outline-color value.
ลองตัวเอง»  | หมายเหตุ: ไม่มีคุณสมบัติอื่น ๆ CSS ร่างอธิบายไว้ด้านล่างจะมีผลกระทบใด ๆ เว้นแต่ outline-style การตั้งค่าคุณสมบัติ! |
|---|
สีเค้าร่าง
outline-color ทรัพย์สินที่ใช้ในการตั้งค่าสีของเค้าร่าง
สีที่สามารถตั้งค่าได้โดย:
- ชื่อ - ระบุชื่อสีเช่นเดียวกับ "red"
- RGB - ระบุค่า RGB เช่น "rgb(255,0,0)"
- Hex - ระบุค่า hex เช่น "#ff0000"
- Invert - ดำเนินการกลับสี (ซึ่งทำให้มั่นใจได้ว่าร่างสามารถมองเห็นได้โดยไม่คำนึงถึงสีพื้นหลัง)
ตัวอย่าง
p
{
border: 1px solid black;
outline-style: double;
outline-color: red;
}ผล:
A colored outline.
เค้าโครงความกว้าง
outline-width คุณสมบัติระบุความกว้างของเค้าร่าง
ความกว้างสามารถกำหนดให้เป็นขนาดที่เฉพาะเจาะจง (ใน px, pt, cm, em , ฯลฯ ) หรือโดยใช้หนึ่งในสามของค่าที่กำหนดไว้ล่วงหน้า: บางปานกลางหรือหนา
ตัวอย่าง
p {border: 1px solid black;}
p.one
{
outline-style: double;
outline-color: red;
outline-width: thick;
}
p.two
{
outline-style: double;
outline-color: green;
outline-width: 3px;
}
ผล:
A thick outline.
A thinner outline.
Outline - ทรัพย์สินชวเลข
เพื่อตัดรหัสก็ยังเป็นไปได้ที่จะระบุทุกคุณสมบัติเค้าร่างของแต่ละบุคคลในสถานที่ให้บริการ
outline คุณสมบัติเป็นที่พักสำหรับคุณสมบัติของชวเลขเค้าร่างของแต่ละบุคคลต่อไปนี้:
-
outline-width -
outline-style(จำเป็น) -
outline-color
ทดสอบด้วยตัวเองด้วยการออกกำลังกาย!
การใช้สิทธิ 1 » ออกกำลังกาย 2 » ออกกำลังกาย 3 »
คุณสมบัติทั้งหมด CSS Outline
| คุณสมบัติ | ลักษณะ |
|---|---|
| outline | ทุกชุดคุณสมบัติเค้าร่างในการประกาศ |
| outline-color | ตั้งค่าสีของเค้าร่าง |
| outline-offset | ระบุช่องว่างระหว่างร่างและ EDGE หรือเส้นขอบของสิ่งนั้น ๆ |
| outline-style | ชุดรูปแบบของร่าง |
| outline-width | กำหนดความกว้างของร่าง |