CSS - โครงร่าง

โครงร่างคล้ายกับเส้นขอบมาก แต่ก็มีความแตกต่างที่สำคัญบางประการเช่นกัน -

โครงร่างไม่ใช้พื้นที่
โครงร่างไม่จำเป็นต้องเป็นรูปสี่เหลี่ยมผืนผ้า
โครงร่างจะเหมือนกันทุกด้าน คุณไม่สามารถระบุค่าที่แตกต่างกันสำหรับด้านต่างๆขององค์ประกอบ

NOTE - คุณสมบัติโครงร่างไม่รองรับโดย IE 6 หรือ Netscape 7

คุณสามารถตั้งค่าคุณสมบัติโครงร่างต่อไปนี้โดยใช้ CSS

outline-width คุณสมบัติถูกใช้เพื่อกำหนดความกว้างของโครงร่าง
outline-style คุณสมบัติถูกใช้เพื่อกำหนดลักษณะเส้นสำหรับโครงร่าง
outline-color คุณสมบัติถูกใช้เพื่อกำหนดสีของโครงร่าง
outline คุณสมบัติถูกใช้เพื่อตั้งค่าคุณสมบัติทั้งสามข้างต้นในคำสั่งเดียว

คุณสมบัติเค้าร่างกว้าง

คุณสมบัติoutline-widthระบุความกว้างของโครงร่างที่จะเพิ่มลงในกล่อง ค่าควรเป็นค่าความยาวหรือค่าบางค่าปานกลางหรือหนาเช่นเดียวกับแอตทริบิวต์ border-width

ความกว้างของพิกเซลศูนย์หมายความว่าไม่มีโครงร่าง

นี่คือตัวอย่าง -

<html>
   <head>
   </head>
   
   <body>
      <p style = "outline-width:thin; outline-style:solid;">
         This text is having thin outline.
      </p>
      <br />
      
      <p style = "outline-width:thick; outline-style:solid;">
         This text is having thick outline.
      </p>
      <br />
      
      <p style = "outline-width:5px; outline-style:solid;">
         This text is having 5x outline.
      </p>
   </body>
</html>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -

คุณสมบัติเค้าร่าง

คุณสมบัติโครงร่างระบุสไตล์ของเส้น (ทึบจุดหรือประ) ที่ไปรอบ ๆ องค์ประกอบ สามารถใช้ค่าใดค่าหนึ่งต่อไปนี้ -

none- ไม่มีขอบ (เทียบเท่าความกว้างโครงร่าง: 0;)
solid - โครงร่างเป็นเส้นทึบเส้นเดียว
dotted - Outline คือชุดของจุด
dashed - Outline คือชุดของบรรทัดสั้น ๆ
double - โครงร่างคือเส้นทึบสองเส้น
groove - โครงร่างดูเหมือนว่าแกะสลักไว้ในหน้ากระดาษ
ridge - โครงร่างมีลักษณะตรงกันข้ามกับร่อง
inset - โครงร่างทำให้กล่องดูเหมือนฝังอยู่ในหน้า
outset - โครงร่างทำให้กล่องดูเหมือนออกมาจากผ้าใบ
hidden - เหมือนกับไม่มี

นี่คือตัวอย่าง -

<html>
   <head>
   </head>
   
   <body>
      <p style = "outline-width:thin; outline-style:solid;">
         This text is having thin solid  outline.
      </p>
      <br />
      
      <p style = "outline-width:thick; outline-style:dashed;">
         This text is having thick dashed outline.
      </p>
      <br />
      
      <p style = "outline-width:5px;outline-style:dotted;">
         This text is having 5x dotted outline.
      </p>
   </body>
</html>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -

คุณสมบัติเค้าร่างสี

คุณสมบัติเค้าร่างสีช่วยให้คุณระบุสีของโครงร่าง ค่าควรเป็นชื่อสีสีฐานสิบหกหรือค่า RGB เช่นเดียวกับคุณสมบัติของสีและขอบสี

นี่คือตัวอย่าง -

<html>
   <head>
   </head>
   
   <body>
      <p style = "outline-width:thin; outline-style:solid;outline-color:red">
         This text is having thin solid red  outline.
      </p>
      <br />
      
      <p style = "outline-width:thick; outline-style:dashed;outline-color:#009900">
         This text is having thick dashed green outline.
      </p>
      <br />
      
      <p style = "outline-width:5px;outline-style:dotted;outline-color:rgb(13,33,232)">
         This text is having 5x dotted blue outline.
      </p>
   </body>
</html>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -

โครงร่างคุณสมบัติ

ร่างคุณสมบัติเป็นที่พักจดชวเลขที่ช่วยให้คุณระบุค่าสำหรับการใด ๆ ของทั้งสามคุณสมบัติที่กล่าวถึงก่อนหน้านี้ในลำดับใด ๆ แต่ในคำเดียว

นี่คือตัวอย่าง -

<html>
   <head>
   </head>
   
   <body>
      <p style = "outline:thin solid red;">
         This text is having thin solid red outline.
      </p>
      <br />
      
      <p style = "outline:thick dashed #009900;">
         This text is having thick dashed green outline.
      </p>
      <br />
      
      <p style = "outline:5px dotted rgb(13,33,232);">
         This text is having 5x dotted blue outline.
      </p>
   </body>
</html>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -