ให้เรตสมาชิก: 3 / 5

ดาวใช้งานดาวใช้งานดาวใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งาน
 

บทที่ 2 CSS3 Borders ตอนที่ 1
   borders (เส้นขอบ) ความพิเศษของ CSS3 นี้คือสามารถทำเส้นขอบโค้ง , ใส่เงาให้กับกรอบภาพ , และใช้รูปภาพทำเป็นกรอบ
ตัวอย่าง
 1.การทำขอบโค้ง (ใช้ได้กับทุกบราวเซอร์)
การทำขอบโค้งนี้ใน CSS2 นั้นทำได้ค่อนข้างยาก ต่างกับ CSS3 ที่ทำได้ง่ายกว่า

<html>
<head>
<style> 
div
{ border:8px solid #e6d45a;
padding:20px 80px; 
background:#67c8d7;
width:100px;
border-radius:45px; }
</style>
</head>
<body>

<div>กล่องข้อความของฉัน</div>

</body>
</html>

ผลลัพธ์คือ

*คำอธิบาย
  -border:8px solid #e6d45a;  (8px คือขนาดเส้นขอบ ,#e6d45a คือสีของเส้นขอบ ในที่นี่อาจใส่เป็นชื่อสีภาษาอังกฤษ หรือใส่เป็นค่าตามตัวอย่างก็ได้)
  -padding:20px 80px; (ขนาดของกรอบ สูง x ยาว)
  -width:100px; (ความยาวของข้อความในแต่ละบรรทัด)
  -background:#67c8d7; (สีของกล่องข้อความ)
  -border-radius:45px; (ขนาดมุมของกล่องข้อความ)
  -<div>กล่องข้อความของฉัน</div> (เเท็กข้อความ)

 อ่านต่อ
บทที่ 2 CSS3 Borders ตอนที่ 2
บทที่ 2 CSS3 Borders ตอนที่ 3



กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
MOD_MTB_NEWS_RECENT
ตัวอย่าง Error เกี่ยวกับ session บน Host ที่ สำหรับเขียนพื้นที่
โดย mindphp จ 04 ธ.ค. 2017 11:34 am บอร์ด Programming - PHP
1
51
จ 04 ธ.ค. 2017 11:34 am โดย mindphp
รวมงานประจำปี 2560
โดย chavikat.p จ 04 ธ.ค. 2017 10:54 am บอร์ด M053 - ชาวิกา แตงศรี
0
8
จ 04 ธ.ค. 2017 10:54 am โดย chavikat.p
รวมบทความประจำปี 2560
โดย chavikat.p จ 04 ธ.ค. 2017 10:53 am บอร์ด M053 - ชาวิกา แตงศรี
0
4
จ 04 ธ.ค. 2017 10:53 am โดย chavikat.p
Note
โดย chavikat.p จ 04 ธ.ค. 2017 10:53 am บอร์ด M053 - ชาวิกา แตงศรี
0
9
จ 04 ธ.ค. 2017 10:53 am โดย chavikat.p
Work's on Hand ชาวิกา แตงศรี M053
โดย chavikat.p จ 04 ธ.ค. 2017 10:52 am บอร์ด M053 - ชาวิกา แตงศรี
0
19
จ 04 ธ.ค. 2017 10:52 am โดย chavikat.p
งานประจำวันที่ 4 ธันวาคม 2560
โดย chavikat.p จ 04 ธ.ค. 2017 10:50 am บอร์ด M053 - ชาวิกา แตงศรี
2
36
จ 04 ธ.ค. 2017 10:50 am โดย thatsawan
รถเมล์.rar
โดย Before Dong จ 04 ธ.ค. 2017 10:35 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
148
จ 04 ธ.ค. 2017 10:35 am โดย Before Dong
แก้ปัญหา phpMyadmin ใช้งาน ไม่ได้ เมือเปิดใช้ session.save_handler radis
โดย mindphp จ 04 ธ.ค. 2017 7:09 am บอร์ด Linux - Web Server
0
38
จ 04 ธ.ค. 2017 7:09 am โดย mindphp
ติดตั้ง Joomla_2.5.17 ไม่ได้ค่ะ ต้องทำไงค่ะ
โดย Bum ส 02 ธ.ค. 2017 11:17 pm บอร์ด Joomla Development
1
46
ส 02 ธ.ค. 2017 11:17 pm โดย mindphp
เกี่ยวกับกล้องวงจรปิด
โดย ma6supply@gmail.com ส 02 ธ.ค. 2017 1:25 pm บอร์ด Programming - PHP
0
46
ส 02 ธ.ค. 2017 1:25 pm โดย ma6supply@gmail.com
สัมภาษณ์งานแต่ละอาชีพ ภาพล้อ โปรแกรมเมอร์
โดย Before Dong ส 02 ธ.ค. 2017 11:37 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
865
ส 02 ธ.ค. 2017 11:37 am โดย Before Dong
[ปัญหา] วิธีการดึง tag ให้สามารถออกมาใช้งานได้
โดย Panchalee ศ 01 ธ.ค. 2017 6:19 pm บอร์ด Programming - C/C++ & java & Python
0
51
ศ 01 ธ.ค. 2017 6:19 pm โดย Panchalee
สอบถามเรื่องโค้ด rml ค่ะ
โดย Wallapa ศ 01 ธ.ค. 2017 5:53 pm บอร์ด Programming - C/C++ & java & Python
0
46
ศ 01 ธ.ค. 2017 5:53 pm โดย Wallapa
ทำวันที่บน Report ให้เป็นวันที่ Print ข้อมูลออกมาทำยังไงคะ
โดย Wallapa ศ 01 ธ.ค. 2017 5:47 pm บอร์ด Programming - C/C++ & java & Python
2
55
ศ 01 ธ.ค. 2017 5:47 pm โดย Wallapa
จะทำอย่างไรให้ rml ไปแสดงในหน้า pdf คะ
โดย Wallapa ศ 01 ธ.ค. 2017 5:43 pm บอร์ด Programming - C/C++ & java & Python
1
58
ศ 01 ธ.ค. 2017 5:43 pm โดย nuattawoot
[ปัญหา]วิธีการเรียกใช้โค้ดใน css เพื่อใช้ในการวนลูปใน selenium
โดย Panchalee ศ 01 ธ.ค. 2017 2:08 pm บอร์ด Programming - C/C++ & java & Python
6
68
ศ 01 ธ.ค. 2017 2:08 pm โดย Panchalee
SAP กับ Odoo
โดย Before Dong ศ 01 ธ.ค. 2017 11:12 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
2
683
ศ 01 ธ.ค. 2017 11:12 am โดย M029
Font ภาษาไทยไม่ขึ้นค่ะ
โดย Wallapa ศ 01 ธ.ค. 2017 10:13 am บอร์ด Programming - C/C++ & java & Python
5
65
ศ 01 ธ.ค. 2017 10:39 am โดย Wallapa
[ปัญหา] การวนลูปใน selenium
โดย Panchalee พฤ 30 พ.ย. 2017 3:20 pm บอร์ด Programming - C/C++ & java & Python
3
81
พฤ 30 พ.ย. 2017 3:20 pm โดย thatsawan
เรียกใช้งาน rml2pdf จาก ReportLab ยังไงคะ?
โดย Wallapa พฤ 30 พ.ย. 2017 2:37 pm บอร์ด Programming - C/C++ & java & Python
3
62
พฤ 30 พ.ย. 2017 2:37 pm โดย nuattawoot