สร้างกล่องโค้งมนด้วย CSS

ต่อไปเราจะสร้างหน้า xHTML ซึ่งมีพื้นที่เนื้อหาสองส่วนที่มี DIV ที่มี ID คงที่และ FlowBox ทั้งสองเป็น DIV ที่มีความกว้างคงที่และความกว้างที่ไม่คงที่ ตอนนี้เราจะสร้างหน้าสำหรับ DIV ทั้งสองที่มีมุมโค้งมน .

ทฤษฎีที่เราใช้คือเมื่อเพิ่มพื้นหลังให้กับองค์ประกอบ ภาพพื้นหลังจะปรากฏที่ด้านบนของสีพื้นหลังเสมอ ในการสร้างสี่เหลี่ยมมุมมนสีทึบ เราสามารถสร้างสี่เหลี่ยมปกติก่อน จากนั้นใช้รูปภาพมุมโค้งมน ที่มีสีเดียวกับพื้นหลังมุมมนทั้งสี่ขององค์ประกอบนี้เพื่อสร้างกรอบมุมมน วิธีการนี้จะอธิบายโดยละเอียดด้านล่างในสองกรณี - กล่องขนาดคงที่และการสตรีมกล่องขนาดไม่คงที่

การเพิ่มมุมโค้งมนลงในกล่องขนาดคงที่ ขั้นตอนที่ 1: สร้างเอกสาร xHTML พื้นฐานและเพิ่มเนื้อหาเล็กน้อยลงไป
ดู plaincopy ไปที่ clipboardprint หรือไม่
<div id="fixedBox">
<h2>การทดสอบกล่องคงที่</h2>
<p>นี่เป็นเพียงหน้าทดสอบของ enpor.com</p>
</div>

<div id="fixedBox">
<h2>การทดสอบกล่องคงที่</h2>
<p>นี่เป็นเพียงหน้าทดสอบของ enpor.com</p>
</div>ตอนนี้เราได้สร้างเอกสาร xHTML ซึ่งมี DIV พร้อมด้วย ID ของfixBox เราจะสร้างเส้นขอบโค้งมนสำหรับ DIV นี้ จากนั้นเพิ่มสไตล์พื้นฐานให้กับเอกสาร:

ดู plaincopy ไปที่ clipboardprint หรือไม่
เนื้อความ html {
ระยะขอบ:0;
ช่องว่างภายใน:0;
พื้นหลัง:#a7a09a;
สี:#000;
}

เนื้อความ, html {
ระยะขอบ:0;
ช่องว่างภายใน:0;
พื้นหลัง:#a7a09a;
สี:#000;
}ขั้นตอนที่ 2: ตั้งค่าความกว้างและสีพื้นหลังของ DIV
ดู plaincopy ไปที่ clipboardprint หรือไม่
div#fixedBox {
ความกว้าง:340px;
ระยะขอบ:40px;
พื้นหลัง:#E4ECF9;
}

div#fixedBox {
ความกว้าง:340px;
ระยะขอบ:40px;
พื้นหลัง:#E4ECF9;
ขั้นตอนที่ 3: สร้างสี่เหลี่ยมผืนผ้าโค้งมนตามความกว้างของ DIV เนื่องจากฉันตั้งค่าความกว้างของ DIV เป็น 340px ตอนนี้ฉันจึงต้องสร้างสี่เหลี่ยมผืนผ้าโค้งมนที่มีความกว้าง 340px หลังจากสร้างสี่เหลี่ยมผืนผ้าแล้ว ให้วางส่วนบนสุด ของสี่เหลี่ยมทั้งหมดโดยตัดส่วนล่างออกและใช้เป็นภาพ DIV ฉันสร้างภาพสองภาพต่อไปนี้:

ขั้นตอนที่ 4: นำรูปภาพไปใช้กับพื้นหลัง DIV
ดู plaincopy ไปที่ clipboardprint หรือไม่
div#fixedBox {
ความกว้าง:340px;
ระยะขอบ:40px;
พื้นหลัง:#E4ECF9 url(images/bottom.gif) ไม่ทำซ้ำตรงกลางด้านล่าง;
}

div#fixedBox {
ความกว้าง:340px;
ระยะขอบ:40px;
พื้นหลัง:#E4ECF9 url(images/bottom.gif) ไม่ทำซ้ำตรงกลางด้านล่าง;
}div#fixedBox h2{
ระยะขอบ:0;
ช่องว่างภายใน:2px;
พื้นหลัง:#E4ECF9 url(images/top.gif) ไม่ทำซ้ำตรงกลางด้านบน;
}

ด้านบนเราใช้รูปภาพชื่อ Bottom.gif ที่ด้านล่างของ DIV จากนั้นใช้ Top.gif ในองค์ประกอบแรก H2 ของ DIV แน่นอนว่าสิ่งแรกที่เราต้องใส่ใจในที่นี้คือเราไม่สามารถเพิ่มได้ ระยะขอบเป็น h2 ค่าหรือเพิ่มช่องว่างภายในหรือเส้นขอบให้กับ DIV

สร้างกล่องโค้งมนที่มีความกว้างคงที่แต่ไม่มีความสูงคงที่ ซึ่งต้องใช้รูปภาพสองรูปด้านบนและด้านล่าง ลองคิดดูสักครู่จะพบว่าคราวนี้เราจะต้องใช้รูปภาพ 4 รูป ในแต่ละมุมเพื่อสร้างสี่เหลี่ยมมุมมนที่จะย่อขนาดยังไงก็ได้ เรายังต้องสร้าง DIV Container ก่อนและ เพิ่มเนื้อหาพื้นฐาน

ขั้นตอนที่ 1: สร้างเอกสาร xHTML
ดู plaincopy ไปที่ clipboardprint หรือไม่
<div id="flowBox">
<div class="forhelp">
<div class="forhelp2">
<h2>การทดสอบ FlowBox</h2>
<p>นี่เป็นเพียงหน้าทดสอบของ enpor.com</p>
</div>
</div>
</div>

<div id="flowBox">
<div class="forhelp">
<div class="forhelp2">
<h2>การทดสอบ FlowBox</h2>
<p>นี่เป็นเพียงหน้าทดสอบของ enpor.com</p>
</div>
</div>
</div>ฉันได้เพิ่มสี่บรรทัดข้างต้นลงในเอกสาร HTML ก่อนหน้าโดยตรง ดังนั้นฉันจึงไม่จำเป็นต้องตั้งค่าสไตล์ชีต CSS สำหรับเนื้อหาอีกต่อไป ตอนนี้เราไปที่หัวข้อโดยตรง

ขั้นตอนที่สองคือการสร้างมุมโค้งมนทั้งสี่มุมที่ด้านซ้ายบน ด้านซ้ายล่าง ด้านขวาล่าง และด้านขวาล่าง

ขั้นตอนที่ 3: ตั้งค่าสีพื้นหลังของ

สำเนาธรรมดา DIVview เป็น clipboardprint หรือไม่
div#flowBox {
ระยะขอบ:40px;
พื้นหลัง:#C3D9FF;
}

div#flowBox {
ระยะขอบ:40px;
พื้นหลัง:#C3D9FF;
} ขั้นตอนที่ 5: เพิ่มมุมโค้งมน

สำหรับคอนเทนเนอร์ DIV ที่ไม่มีความกว้างและความสูงคงที่ มุมโค้งมนใดๆ จะต้องสามารถเปลี่ยนตำแหน่งตามการเปลี่ยนแปลงความกว้างและความสูงของ DIV ดังนั้นเราจึงเพิ่มได้เฉพาะมุมโค้งมนในมุมคงที่ -ความกว้าง DIV รูปภาพที่มีความกว้างคงที่ที่ใช้ในที่นี้จะถูกประมวลผลเป็นรูปภาพขนาดเล็กสองภาพ และสามารถเพิ่มลงในองค์ประกอบ H2 ได้โดยตรง ตอนนี้หลังจากที่เราเพิ่มองค์ประกอบ H2 เราจะได้มุมโค้งมนเพียงด้านเดียวเท่านั้นและยังคงอยู่ มุมโค้งมนหนึ่งมุมที่สามารถใช้ใน H2 ได้ Span เพื่อให้มุมโค้งมนสองมุมได้รับการแก้ไข และองค์ประกอบ p สามารถจัดให้มีมุมโค้งมนหนึ่งมุม และ div เองก็มีมุมโค้งมนหนึ่งมุม ซึ่งเป็นมุมโค้งมนสี่มุมพอดี

ดู plaincopy ไปที่ clipboardprint หรือไม่
div#flowBox {
ระยะขอบ:40px;
พื้นหลัง:#C3D9FF url(images/bottom-left.gif) ไม่ทำซ้ำด้านซ้ายล่าง;
-

div#flowBox h2{
ระยะขอบ:0;
ช่องว่างภายใน:0;
พื้นหลัง:#C3D9FF url(images/top-left.gif) ไม่ทำซ้ำด้านซ้ายบน;
-

div#flowBox ช่วง h2{
ระยะขอบ:0;
จอแสดงผล: บล็อก;
พื้นหลัง:#C3D9FF url(images/top-right.gif) ไม่ทำซ้ำด้านบนขวา;
-

div#flowBox p{
ระยะขอบ:0;
ช่องว่างภายใน:0;
พื้นหลัง:#C3D9FF url(images/bottom-right.gif) ไม่ทำซ้ำมุมขวาล่าง;
-