ให้เรตสมาชิก: 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



กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
การใช้งาน Form Inputs(ฟอร์มอินพุต) ใน Bootstrap 4(บูตสแตก)
โดย Parichat จ 15 ม.ค. 2018 11:15 am บอร์ด Booststap Knowledge
0
9
จ 15 ม.ค. 2018 11:15 am โดย Parichat
Windows Update
โดย Before Dong จ 15 ม.ค. 2018 10:56 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
11
จ 15 ม.ค. 2018 10:56 am โดย Before Dong
Machine Learning กับ game MarI O by SethBling
โดย nuattawoot จ 15 ม.ค. 2018 10:50 am บอร์ด Programming - C/C++ & java & Python
1
13
จ 15 ม.ค. 2018 10:51 am โดย nuattawoot
งานประจำวันที่ 15 มกราคม 2561
โดย Jom07 จ 15 ม.ค. 2018 9:49 am บอร์ด MT23 - สุพรรษา พูลตา
1
15
จ 15 ม.ค. 2018 11:35 am โดย Jom07
งานประจำวันที่ 15 มกราคม 2561
โดย Four จ 15 ม.ค. 2018 9:45 am บอร์ด MT22 - อิษยา งามสอาด
1
14
จ 15 ม.ค. 2018 11:29 am โดย Four
งานประจำวันที่ 15 มกราคม 2561
โดย Parichat จ 15 ม.ค. 2018 9:33 am บอร์ด MT21 - ปาริชาติ รัตโณภาส
1
8
จ 15 ม.ค. 2018 7:00 pm โดย Parichat
TIP Config nginx ให้เข้าเว็บ แบบมี www และ ไม่www เข้าที่โดเมนเดียวกัน
โดย mindphp ส 13 ม.ค. 2018 5:31 pm บอร์ด Linux - Web Server
0
16
ส 13 ม.ค. 2018 5:31 pm โดย mindphp
ติดตั้ง nginx แล้วสร้างโดเมน แล้ว restart เจอ Error
โดย mindphp ส 13 ม.ค. 2018 5:17 pm บอร์ด Linux - Web Server
0
14
ส 13 ม.ค. 2018 5:17 pm โดย mindphp
สอบถามการสร้าง Plugin Wordpress
โดย GAME'z Kittituh ศ 12 ม.ค. 2018 8:32 pm บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS CRM
2
38
อ 14 ม.ค. 2018 6:51 pm โดย GAME'z Kittituh
งานประจำวันที่ 12 มกราคม 2561
โดย Parichat ศ 12 ม.ค. 2018 8:53 am บอร์ด MT21 - ปาริชาติ รัตโณภาส
1
12
ศ 12 ม.ค. 2018 5:39 pm โดย Parichat
โปรแกรม SPSS (เอสพีเอสเอส) คืออะไร
โดย Jom07 ศ 12 ม.ค. 2018 4:58 pm บอร์ด Software testing
0
28
ศ 12 ม.ค. 2018 4:58 pm โดย Jom07
Android Studio การต่อท้ายข้อความ ใน TextView
โดย Four ศ 12 ม.ค. 2018 4:57 pm บอร์ด Mobile Application Developing- Android, iOS
0
19
ศ 12 ม.ค. 2018 4:57 pm โดย Four
PCI (พีซีไอ) คืออะไร
โดย Jom07 ศ 12 ม.ค. 2018 4:04 pm บอร์ด IOT - Internet of things
0
32
ศ 12 ม.ค. 2018 4:04 pm โดย Jom07
Android Studio การเขียนสั่งให้ Activity สิ้นสุดการทำงาน
โดย Four ศ 12 ม.ค. 2018 3:24 pm บอร์ด Mobile Application Developing- Android, iOS
0
26
ศ 12 ม.ค. 2018 3:24 pm โดย Four
Android Studio การอ้างถึง Object View ใน Layout XML
โดย Four ศ 12 ม.ค. 2018 2:10 pm บอร์ด Mobile Application Developing- Android, iOS
0
24
ศ 12 ม.ค. 2018 2:10 pm โดย Four
โครงสร้างของระบบฐานข้อมูล
โดย Jom07 ศ 12 ม.ค. 2018 2:01 pm บอร์ด IOT - Internet of things
0
25
ศ 12 ม.ค. 2018 2:01 pm โดย Jom07
การใช้งาน Navigation Bar ใน Bootstrap 4
โดย Parichat ศ 12 ม.ค. 2018 1:55 pm บอร์ด Booststap Knowledge
0
32
ศ 12 ม.ค. 2018 1:55 pm โดย Parichat
การใช้งาน Navs ใน Bootstrap 4
โดย Parichat ศ 12 ม.ค. 2018 1:21 pm บอร์ด Booststap Knowledge
0
24
ศ 12 ม.ค. 2018 1:21 pm โดย Parichat
Android Studio การจัดตำแหน่งข้อความใน TextView
โดย Four ศ 12 ม.ค. 2018 12:37 pm บอร์ด Mobile Application Developing- Android, iOS
0
17
ศ 12 ม.ค. 2018 12:37 pm โดย Four
การใช้งาน Tables ใน Bootstrap 4
โดย Parichat ศ 12 ม.ค. 2018 11:59 am บอร์ด Booststap Knowledge
0
28
ศ 12 ม.ค. 2018 11:59 am โดย Parichat