การออกแบบมุมและกรอบโดยใช้ CSS ออกแบบสำหรับมุมและเฟรมโดยใช้กรอบความคิดเห็น CSS พร้อม CSS มุม

วลาด เมอร์เซวิช

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

ข้าว. 1. สามเหลี่ยมในการออกแบบเว็บไซต์

คุณไม่สามารถสร้างรูปสามเหลี่ยมได้โดยตรงโดยใช้ CSS ดังนั้นจึงมีสองวิธีในการเพิ่ม - ผ่านเส้นขอบ และ แปลง

การใช้เส้นขอบ

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

ข้าว. 2. การเพิ่มเส้นขอบให้กับองค์ประกอบ

เหลือเพียงเส้นขอบที่ต้องการและทำให้ส่วนที่เหลือโปร่งใสเราจะได้สามเหลี่ยมที่มีสีที่ต้องการ (รูปที่ 3)

ข้าว. 3. องค์ประกอบที่มีเส้นขอบโปร่งใส

ตัวอย่างที่ 1 แสดงวิธีการเพิ่มรูปสามเหลี่ยมให้กับบล็อกโดยใช้ ::after องค์ประกอบหลอก

ตัวอย่างที่ 1 บล็อกด้วยรูปสามเหลี่ยม

สำหรับองค์ประกอบที่อยู่ในตำแหน่งที่แน่นอน ไม่จำเป็นต้องมีความกว้างและความสูงเป็นศูนย์

เมื่อรวมขอบเขตเข้าด้วยกันคุณจะได้รูปสามเหลี่ยมอีกสี่ประเภทซึ่งเมื่อรวมกับที่กล่าวไปแล้วทำให้เรามีทางเลือกแปดทาง ประเภทและรหัสที่ต้องการแสดงอยู่ในตาราง 1.

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

สามเหลี่ยมสามารถสร้างเป็นรูปทรงอื่นได้หากคุณกำหนดความหนาของเส้นขอบที่แตกต่างกัน ดังนั้นโค้ดสำหรับสร้างบล็อกดังแสดงในรูปที่ 1 4 แสดงในตัวอย่างที่ 2

ข้าว. 4. สามเหลี่ยมคม

ตัวอย่างที่ 2 สามเหลี่ยมเฉียบพลัน

การใช้เส้นขอบทำให้เราได้สามเหลี่ยมสีทึบเพื่อสร้างกรอบดังแสดงในรูปที่ 1 5 คุณต้องใช้กลอุบายและวางองค์ประกอบหนึ่งทับอีกองค์ประกอบหนึ่งโดยมีการชดเชยเล็กน้อย อีกครั้ง :before และ :after องค์ประกอบหลอกจะช่วยเราที่นี่ (ตัวอย่างที่ 3)

ข้าว. 5.โครงมีมุม

ตัวอย่างที่ 3: การซ้อนทับแบบสามเหลี่ยม

เนื่องจากเรากำลังวางองค์ประกอบสีทึบหนึ่งไว้ทับอีกองค์ประกอบหนึ่ง วิธีนี้จึงเหมาะสำหรับการเติมสีทึบเท่านั้น และไม่เหมาะสำหรับการไล่ระดับสีหรือภาพพื้นหลัง

การใช้การเปลี่ยนแปลง

เมื่อใช้การแปลง เราสามารถหมุนองค์ประกอบสี่เหลี่ยมจัตุรัสได้ 45 องศา และรับสี่เหลี่ยมขนมเปียกปูนจากองค์ประกอบนั้น นี่ยังไม่ใช่รูปสามเหลี่ยม ดังนั้นเราจึงปล่อยส่วนที่ยื่นออกมาที่เราต้องการไว้ให้มองเห็นได้ และซ่อนส่วนที่เหลือไว้ด้านหลังองค์ประกอบอื่น (ตัวอย่างที่ 4)

ตัวอย่างที่ 3: การเปลี่ยนแปลง

ผลลัพธ์ของตัวอย่างนี้แสดงไว้ในรูปที่ 1 6.

ข้าว. 6. สามเหลี่ยมมีเงา

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

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

ตัวเลือกแรก:

Ugoinsa_utomatio_npones (
จอแสดงผล: อินไลน์บล็อก;
ความกว้าง: 295px;
ตำแหน่ง: ญาติ;
เส้นขอบ: 1.5px ทึบ #1b629e;
การเปลี่ยนแปลง: ความสะดวกทั้งหมด .3s;
ระยะขอบ: 5px;
เคอร์เซอร์:ตัวชี้;
}
.ugoinsa_utomatio_npones:ก่อน, .ugoinsa_utomatio_npones:หลัง (
เนื้อหา: "";
ดัชนี z: -1;
จอแสดงผล: บล็อก;
ตำแหน่ง: แน่นอน;
พื้นหลัง: #FFF;
ด้านบน: 50%;
ซ้าย: 50%;
แปลงร่าง: แปล (-50%, -50%);
ภาพเคลื่อนไหวซ้ำนับ: 1;
แหล่งกำเนิดการเปลี่ยนแปลง: 50% 50%;
}
.ugoinsa_utomatio_npones:ก่อน (
ความกว้าง: คำนวณ (100% + 4px);
ส่วนสูง: 75%;
ดัชนี z: 1;
การเปลี่ยนแปลง: ความสูง 0.6s;
}
.ugoinsa_utomatio_npones:หลัง (
ความสูง: คำนวณ (100% + 4px);
ความกว้าง: 85%;
ดัชนี z: 1;
การเปลี่ยนแปลง: กว้าง 0.7s;
}
.ugoinsa_utomatio_npones:โฮเวอร์:ก่อน, .ugoinsa_utomatio_npones:โฟกัส:ก่อน (
ความสูง: 50%;
}
.ugoinsa_utomatio_npones:โฮเวอร์:หลัง, .ugoinsa_utomatio_npones:โฟกัส:หลัง (
ความกว้าง: 74%;
}
.sequpok_egulaned_demob (
ช่องว่างภายใน: 29px;
ดัชนี z: 2;
ตำแหน่ง: ญาติ;
การจัดแนวข้อความ: กึ่งกลาง;
}

ตัวเลือกที่สอง:

Pvobamoco-mpagensive (
ตำแหน่ง: ญาติ;
จอแสดงผล: อินไลน์บล็อก;
ความกว้าง: 283px;
ระยะขอบ: 7px 0 37px 0;
ช่องว่างภายใน: 28px;
สี: #f3eaea;
การจัดแนวข้อความ: กึ่งกลาง;
พื้นหลัง: #2b22a0;
พื้นหลัง: การไล่ระดับสีเชิงเส้น (ไปทางซ้ายล่าง, โปร่งใส 50%, rgba (16, 16, 16, 0.4) 0) ไม่ทำซ้ำ 100% 0 / 30px 30px, การไล่ระดับสีเชิงเส้น (-135deg, rgba (0, 0, 0 , 0) 20px, #334ab9 0);
ตัวกรอง: เงาหล่น (18px 28px rgba (14, 14, 14, 0.1));
}
.pvobamoco-mpagensive::ก่อน (
เนื้อหา: " ";
ตำแหน่ง: แน่นอน;
ด้านบน: 30px;
ขวา: 0;
พื้นหลัง: การไล่ระดับสีเชิงเส้น (ไปทางซ้ายล่าง, rgba (0, 0, 0, 0) 50%, rgba (14, 14, 14, 0.1) 0) 100% 0 ไม่ทำซ้ำ;
ความกว้าง: 28px;
ความสูง: 28px;
แปลงร่าง: หมุน (180 องศา);
}

ตัวเลือกที่สาม:

Keculosubes_aspectsiveb (
ตำแหน่ง: ญาติ;
จอแสดงผล: อินไลน์บล็อก;
ความกว้าง: 295px;
ช่องว่างภายใน: 30px;
ระยะขอบ: 9px;
ความสูงขั้นต่ำ: 91px;
เส้นขอบ: 2px ทึบ #BFE2FF;
การจัดแนวข้อความ: กึ่งกลาง;
}
.malugeke_deculos (
ความกว้าง: 148px;
ส่วนสูง: 148px;
ล้น: ซ่อนเร้น;
ตำแหน่ง: แน่นอน;
}
.malugeke_deculos::ก่อน, .malugeke_deculos::หลัง (
ตำแหน่ง: แน่นอน;
ดัชนี z: -1;
เนื้อหา: "";
จอแสดงผล: บล็อก;
เส้นขอบ: 5px ทึบ #2980b9;
}
.malugeke_deculos ช่วง (
ตำแหน่ง: แน่นอน;
จอแสดงผล: บล็อก;
ความกว้าง: 223px;
ช่องว่างภายใน: 15px 0;
สีพื้นหลัง: #337AB7;
กล่องเงา: 0 5px 10px rgba (12, 12, 12, 0.1);
สี: #f3f0f0;
แบบอักษร: 700 18px/1 "Lato", sans-serif;
ข้อความเงา: 0 1px 1px rgba (8, 8, 8, 0.1);
การแปลงข้อความ: ตัวพิมพ์ใหญ่;
การจัดแนวข้อความ: กึ่งกลาง;
}
.malugeke_deculos-บนซ้าย (
ด้านบน: -10px;
ซ้าย: -10px;
}
.malugeke_deculos-top-left::before, .malugeke_deculos-top-left::after (
ขอบซ้ายสี: โปร่งใส;
}
.malugeke_deculos-top-left::before (
ด้านบน: 0;
ขวา: 0;
}
.malugeke_deculos-top-left::หลัง (
ซ้าย: 0;
ด้านล่าง: 0;
}
.malugeke_deculos-top-left span (
ขวา: -25px;
ด้านบน: 30px;
แปลงร่าง: หมุน (-45deg);
}
.malugeke_deculos-top-right (
ด้านบน: -10px;
ขวา: -10px;
}
.malugeke_deculos-top-right::before, .malugeke_deculos-top-right::after (
ขอบสีด้านบน: โปร่งใส;
ขอบขวาสี: โปร่งใส;
}
.malugeke_deculos-top-right::before (
ด้านบน: 0;
ซ้าย: 0;
}
.malugeke_deculos-top-right::หลัง (
ขวา: 0;
ด้านล่าง: 0;
}
.malugeke_deculos-top-right span (
ซ้าย: -25px;
ด้านบน: 30px;
แปลงร่าง: หมุน (45 องศา);
}

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

เฟรม CSS3เสริมความสามารถในการจัดรูปแบบเส้นขอบองค์ประกอบด้วยคุณสมบัติที่อนุญาต รอบมุมองค์ประกอบ และยังใช้ ภาพเพื่อออกแบบเส้นขอบขององค์ประกอบ

มุมโค้งมนและกรอบรูป

1. การปัดเศษมุมด้วยรัศมีขอบ

รองรับเบราว์เซอร์

เช่น: 9.0
ไฟร์ฟอกซ์: 4.0
โครเมียม: 4.0
ซาฟารี: 5.0, 3.1 -เว็บคิท-
โอเปร่า: 10.5
iOS ซาฟารี: 7.1
โอเปร่ามินิ: —
เบราว์เซอร์ Android: 4.1
โครมสำหรับแอนดรอยด์: 44

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

คุณสมบัติ border-radius ช่วยให้คุณสามารถปัดเศษมุมทั้งหมดได้ในคราวเดียว และใช้คุณสมบัติ border-top-left-radius , border-top-right-radius , border-bottom-right-radius , border-bottom-left-radius คุณสมบัติที่คุณ สามารถปัดเศษแต่ละมุมแยกกันได้

หากคุณตั้งค่าสองค่าสำหรับคุณสมบัติ border-radius ค่าแรกจะปัดเศษ ซ้ายบนและ มุมขวาล่างและครั้งที่สอง - ด้านบนขวาและ ล่างซ้าย.

ค่าที่ระบุผ่าน/กำหนด แนวนอนและ รัศมีแนวตั้ง- ทรัพย์สินไม่ได้รับมรดก

ตัวเลือก

Div (กว้าง: 100px; ความสูง: 100px; เส้นขอบ: 5px solid;).r1 (รัศมีเส้นขอบ: 0 0 20px 20px;).r2 (รัศมีเส้นขอบ: 0 10px 20px;).r3 (รัศมีเส้นขอบ: 10px 20px ;) .r4 (รัศมีเส้นขอบ: 10px/20px;) .r5 (รัศมีเส้นขอบ: 5px 10px 15px 30px/30px 15px 10px 5px;).r6 (รัศมีเส้นขอบ: 10px 20px 30px 40px/30px;) .r7 ( border-radius: 50%;).r8 (border-top: none; border-bottom: none; border-radius: 30px/90px;).r9 (border-bottom-left-radius: 100px;).r10 (border -รัศมี: 0 100%;).r11 (รัศมีเส้นขอบ: 0 50% 50% 50%;).r12 (รัศมีเส้นขอบบนซ้าย: 100% 20px; รัศมีเส้นขอบล่างขวา: 100% 20px ;)
ข้าว. 1. ตัวอย่าง ตัวเลือกต่างๆมุมบล็อกปัดเศษ

2. เส้นขอบภาพ

รองรับเบราว์เซอร์

เช่น: 11.0
ไฟร์ฟอกซ์: 15.0, 3.5 -เดือน-
โครเมียม: 16.0, 7.0 -เว็บคิท-
ซาฟารี: 6.0, 3.0 -เว็บคิท-
โอเปร่า: 15.0, 11.0 -o-
iOS ซาฟารี: 7.1
โอเปร่ามินิ: 8 -โอ-
เบราว์เซอร์ Android: 4.4, 4.1 -เว็บคิท-
โครมสำหรับแอนดรอยด์: 42

คุณสมบัติช่วยให้คุณตั้งค่ารูปภาพเป็นเฟรมขององค์ประกอบ ข้อกำหนดหลักสำหรับรูปภาพคือต้องมีความสมมาตร คุณสมบัติประกอบด้วยค่าต่อไปนี้: (border-image: width Source Slice Repeat Outset;)

การใช้รูปภาพที่เรียบง่ายเช่นนี้ จะทำให้ได้เฟรมเช่นนี้สำหรับองค์ประกอบหนึ่งๆ

/* ตัวอย่างที่ 1 */ div ( ความกว้าง: 260px; ความสูง: 100px; สไตล์เส้นขอบ: ทึบ; ความกว้างของเส้นขอบภาพ: 15px; แหล่งที่มาของเส้นขอบรูปภาพ: url (border_round.png); border-image-slice: 30 ; border-image-repeat: ยืด; ) /* ตัวอย่างที่ 2 */ div ( width: 260px; height: 100px; border-style: solid; border-image-width: 15px; border-image-source: url(border_round. PNG); border-image-slice: 30; border-image-repeat: รอบ);
ข้าว. 2. ตัวอย่างการออกแบบขอบเขตบล็อกโดยใช้รูปภาพ

การตัด A - B - C - D สร้างมุมของกรอบและส่วนของการออกแบบที่อยู่ระหว่างนั้นจะเติมพื้นที่ที่เหลือของกรอบตาม มูลค่าที่กำหนดคุณสมบัติเส้นขอบภาพซ้ำ ขนาดเข้ามุม (นิ้ว ในตัวอย่างนี้นี่คือหมายเลข 30) ระบุโดยใช้ค่าของคุณสมบัติ border-image-slice

2.1. เส้นขอบภาพความกว้าง

คุณสมบัติระบุความกว้างของภาพสำหรับเส้นขอบขององค์ประกอบ หากไม่ได้ระบุความกว้าง ค่าเริ่มต้นจะเป็น 1

ไวยากรณ์

Div (ความกว้างของเส้นขอบภาพ: 30px;) 3. ตัวอย่างการกำหนดความกว้างของกรอบภาพโดยใช้ ประเภทต่างๆค่านิยม

2.2. แหล่งที่มาของภาพชายแดน

คุณสมบัติระบุเส้นทางไปยังรูปภาพที่จะใช้ในการตกแต่งขอบเขตของบล็อก

ไวยากรณ์

Div (border-image-source: url(border.png);)

2.3. องค์ประกอบเส้นขอบภาพชิ้น

คุณสมบัติจะกำหนดขนาดของส่วนของรูปภาพที่ใช้ในการกำหนดเส้นขอบขององค์ประกอบ และแบ่งรูปภาพออกเป็น 9 ส่วน ได้แก่ สี่มุม สี่ขอบระหว่างมุม และส่วนกลาง

ไวยากรณ์

Div (เส้นขอบภาพชิ้น: 50 20;)
ข้าว. 4. ตัวอย่างการระบุชิ้นเฟรมภาพ

2.4. เส้นขอบภาพซ้ำ

ช่องว่างภายในควบคุมคุณสมบัติ ภาพพื้นหลังช่องว่างระหว่างมุมของกรอบ สามารถระบุได้โดยใช้ค่าเดียวหรือคู่ของค่า

ไวยากรณ์

Div (border-image-repeat: ซ้ำ;) 5. ตัวอย่างการทำซ้ำส่วนกลางของกรอบภาพโดยใช้ค่าประเภทต่างๆ

2.5. เส้นขอบภาพเริ่มต้น

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

ไวยากรณ์

Div (เส้นขอบภาพออก: 10px;)
ข้าว. 6. ตัวอย่างการเลื่อนกรอบภาพโดยใช้ค่าประเภทต่างๆ

3. กรอบไล่ระดับสี

ค่าของ border-image ไม่เพียงแต่เป็นรูปภาพเท่านั้น แต่ยังเป็นการเติมแบบไล่ระดับสีอีกด้วย

กรอบโปร่งแสง

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

ซองไปรษณีย์

1. , , - คุณสมบัติซีเอสเอส
2. (โปร่งใส) - คุณสมบัติ CSS รับผิดชอบในการสร้างกรอบแนวทแยง
3. "px" - ค่าเป็นพิกเซล

ในบทความนี้เราจะพูดคุยกับคุณเกี่ยวกับการสร้างเฟรม แต่ไม่ใช่แบบสี่เหลี่ยมธรรมดา แต่เป็นแบบโค้งมน พวกเขามีมากขึ้น วิวสวยกว่ากรอบสี่เหลี่ยมธรรมดาที่ไม่มีการปัดเศษ

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

ในบทความนี้ เราจะมาดูรายละเอียดเกี่ยวกับการสร้างเฟรมทรงกลมและอื่นๆ อีกมากมาย มีสิ่งดังกล่าวใน CSS ที่เป็นเส้นขอบสามเหลี่ยม แต่มีข้อมูลเพิ่มเติมด้านล่าง

การใช้เฟรมปัดเศษ

คุณสมบัติ CSS นี้ช่วยให้คุณสามารถปัดเศษเส้นขอบขององค์ประกอบได้ นักพัฒนาบางคนใช้มันเพื่อสร้างเลย์เอาต์บนคอนเทนเนอร์ "เนื้อหา" แบบโค้งมน โดยไม่ต้องสร้างเส้นขอบที่มองเห็นได้

เมื่อใช้รัศมีมาตรฐาน คุณสามารถสร้างรูปทรงโค้งมน เช่น วงกลมหรือวงรีได้

เพื่อติดตามผลงานของคุณ ของทรัพย์สินนี้ก็เพียงพอที่จะกำหนดคุณสมบัติ - แม้ว่าชื่อจะมีคำว่า "เส้นขอบ" แต่ก็ไม่ได้เกี่ยวข้องโดยตรงกับการสร้างเฟรม มันปัดเศษเส้นขอบขององค์ประกอบเว็บแทนที่จะเป็นเส้นขอบ

ทรัพย์สินนั้นเอง เป็นการย่อคุณสมบัติสี่ประการ: , , และ - แต่ละคนจะระบุรัศมีความโค้งของแต่ละมุมทั้งสี่

คุณสมบัติที่เรียบง่าย สามารถใช้ค่าใดค่าหนึ่งหรือ 4 ค่าก็ได้ ทำงานเหมือนกับทรัพย์สิน หรือ .

การปัดเศษสามารถใช้ได้กับทุกคน องค์ประกอบ HTMLแต่ไม่ใช่ในทุกกรณี เบราว์เซอร์บางตัวไม่ยอมรับเมื่อโหลดเฟรมที่มีคุณสมบัติ ด้วยค่า "ยุบ"

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

นอกเหนือจากการปัดเศษตามปกติแล้ว คุณสามารถใช้รัศมีเพิ่มเติมได้ เช่น เพื่อสร้างวงรี

ในการทำเช่นนี้คุณต้องหารค่าด้วยเศษส่วน

คุณสมบัติ - ตัวอย่าง:

ตอนนี้เราจะแสดงตัวอย่างการสร้างเส้นขอบโค้งมน หากต้องการศึกษารายละเอียดเพิ่มเติม โปรดดาวน์โหลดแหล่งข้อมูลของเรา

การสร้างรูปสามเหลี่ยมโดยใช้

ในการสร้างรูปสามเหลี่ยม คุณต้องใช้คุณสมบัตินี้ - แต่การใช้งานจะแตกต่างจากการสร้างเฟรมธรรมดาเล็กน้อย

ขั้นแรก ให้ตั้งค่าความกว้างและความสูงขององค์ประกอบสามเหลี่ยมให้เป็นศูนย์

หลังจากนั้นให้เขียนคุณสมบัติบางอย่างลงไป ประการแรกคือสิ่งสำคัญคือคุณสมบัติของเฟรม มันถูกสร้างขึ้นเกือบจะเหมือนเดิม กำหนดความกว้าง ประเภทเส้น และป้อนค่า "โปร่งใส" มีหน้าที่สร้างรูปสามเหลี่ยม

หากต้องการสร้างด้านตรงของสามเหลี่ยม คุณต้องสร้างเส้นกรอบแยกสำหรับด้านนี้

บทสรุป

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

แรกๆอาจดูยากมากแต่ถ้าฝึกฝนจะง่ายกว่าที่คิด ดาวน์โหลดแหล่งข้อมูลของเราและศึกษาโค้ดเพื่อทำความเข้าใจวิธีการทำงานของพร็อพเพอร์ตี้ให้ดียิ่งขึ้น เราหวังว่าคุณจะโชคดีในการศึกษาของคุณ!

เพื่อสร้างสิ่งสวยงามต่างๆ รอบตัว และสิ่งสวยงามอย่างแรกสุดก็คือกรอบ

ก่อนอื่น มาดูเฟรมเวิร์กที่ง่ายที่สุดกันก่อน ในการสร้าง CSS จะใช้คุณสมบัติ border ซึ่งสามารถตั้งค่าเป็นค่าต่อไปนี้:

แข็ง – กรอบแข็ง;

เส้นประ – กรอบประ;

เส้นประ – กรอบประ;

เส้นคู่ – กรอบเส้นคู่;

ร่อง – กรอบมีเงา

สันเขา - ด้วยความโล่งใจ;

คุณสมบัติอีกสองประการที่จำเป็นในการสร้างเฟรมอย่างง่ายคือ

ความกว้าง – ความหนาของเฟรม

สี – สีกรอบ;

ตามเทคนิคการย่อค่าจะเขียนเป็นบรรทัดเดียวคั่นด้วยช่องว่าง

พี(
เส้นขอบ : 2px ทึบ #ffff00 ;
}

ช่องว่างภายใน – ภายใน (เยื้องเฟรมจากเนื้อหา);

ระยะขอบ — ภายนอก (ระยะขอบของเฟรมจากวัตถุภายนอก);

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

บน – เยื้องบน;

ขวา – เยื้องขวา;

เยื้องล่าง – ล่าง;

ซ้าย – เยื้องซ้าย

ค่าของคุณสมบัติเหล่านี้เขียนในรูปแบบย่อทีละรายการ (ช่องว่างภายใน: 10px 30px 15px 20px) และค่าบนสุดจะถูกตั้งค่าก่อน จากนั้นส่วนที่เหลือจะเป็นไปตามทิศทางตามเข็มนาฬิกา

หากคุณตั้งค่าเพียงค่าเดียว หมายความว่าการเยื้องทุกด้านจะเหมือนกัน

พี(
เส้นขอบ : 2px ทึบ #ffff00 ;

ระยะขอบ: 20px;
}

หากคุณต้องการวางข้อความหรือรูปภาพไว้ตรงกลางกรอบ คุณสามารถเพิ่มคุณสมบัติ text-align: center ให้กับตัวเลือก “p” ได้

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

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

พี(
เส้นขอบ : 2px ทึบ #ffff00 ;
การขยาย: 10px 20px 10px 20px;
ระยะขอบ: 20px;
ความกว้าง: 400px;
}

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

สิ่งสุดท้ายที่ต้องทำคือวางตำแหน่งเฟรมบนหน้า ทำได้โดยใช้คุณสมบัติมาร์จิ้นที่มีอยู่แล้ว

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

พี(
เส้นขอบ : 2px ทึบ #ffff00 ;
การขยาย: 10px 20px 10px 20px;
ระยะขอบ: 20px อัตโนมัติ;
ความกว้าง: 400px;
}

สำหรับตัวอย่างแรก เรามาสร้างกัน เอกสาร htmlและสร้างกรอบทึบสำหรับบล็อกเนื้อหา (เนื้อหาของเอกสาร) และหนึ่งย่อหน้า

ในตัวอย่างต่อไปนี้ เฉพาะ CSS (สิ่งที่อยู่ในแท็กสไตล์) เท่านั้นที่จะเปลี่ยนแปลง

Здравствуйте уважаемые будущие веб-мастера!
Мне 55 лет и я рад приветствовать Вас на своём сайте.

Результат:

Следующая рамка dashed (пунктир).

p{
text-indent : 30px ;
border : 2px dashed #ff4f00 ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px ;
}

Результат:

Рамка dotted :

p {
text-indent : 30px ;
border : 3px dotted #ff4f00 ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px ;
}

Рамка double :

p {
text-indent : 30px ;
border : 5px double #ff4f00 ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px ;
}

Рамка groove :

p {
text-indent : 30px ;
border : 7px groove #ff4f00 ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px ;
}

Рамка ridge :

p {
text-indent : 30px ;
border : 10px ridge #ff4f00 ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px ;
}

Для этого уберём border , и добавим border-radius и box-shadow .

p {
border-radius : 10px ;
box-shadow : 0 0 0 3px #ff4f00 ;
text-indent : 30px ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px ;
}

Размоем внешний край рамки. Для этого в свойстве box-shadow , увеличим третью цифру.

p {
border-radius : 10px ;
box-shadow : 0 0 7px 3px #ff4f00 ;
text-indent : 30px ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px ;
}

Сделаем разноцветную рамку. Для этого в свойство box-shadow , через запятую, добавим ещё несколько комплектов значений с разными цветами.

p {
border-radius : 10px ;

0 0 0 7px #ffdb00 ,
0 0 0 10px #00ffa2 ;
text-indent : 30px ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px ;
}

Можно сделать круг в рамке. Для этого зададим абзацу одинаковую высоту и ширину, то есть сделаем квадрат, изменим значение border-radius

p {
border-radius : 50%/50% ;
box-shadow : 0 0 0 3px #ff4f00 ,
0 0 0 7px #ffdb00 ,
0 0 0 10px #00ffa2 ;
padding : 40px ;
margin : 20px auto ;
width : 130px ;
height : 130px ;
text-align : center;
}

Если поиграть с дробным значением border-radius , можно сделать эллипс любого вида.

Первое число в дроби — это изгиб вертикальной составляющей угла, второе — горизонтальной.

И последнее, что мы сегодня сделаем — рамка с изменяющимся цветом. Изменяться он будет при наведении курсора.

Реализуется эта опция при помощи псевдокласса :hover .

p {
border-radius : 10px ;
box-shadow : 0 0 0 4px #ff4f00 ;
text-indent : 30px ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px ;
}
p:hover {
border-radius : 10px ;
box-shadow : 0 0 0 4px #00ff62 ;
text-indent : 30px ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px ;
}

В спокойном состоянии:

При наведении курсора:

Этот же метод можно применить к разноцветной рамке, и менять при наведении курсора, какой нибудь один цвет.

Желаю творческих успехов.

Перемена

На улице Дублина двое ирландцев дерутся. К ним подходит еще один, снимает шляпу и спрашивает:
— Простите, это частная драка или любой может вмешаться?..