ทำขอบมนให้รูปภาพ

ทำขอบมนให้รูปภาพ





สวัสดีครับ วันนี้เรามาดูเทคนิคการทำภาพให้มีขอบโค้งมนกันนะครับ 

ซึ่งปัจจุบันสามารถกำหนดได้จาก ตัว CSS เลย นะครับ

เรา มาลองดูกันครับ

เรามาสร้าง StyleSheet ไว้ใน ส่วนของ TAG <head> ... </head>  

<style media="all" type="text/css">
.round_image{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: #000 0 2px 10px;
-moz-box-shadow: #000 0 2px 10px;
box-shadow: #000 0 2px 10px;
}

</style>


ส่วนของ body เราก็นำรูปภาพมาใช้งานครับ โดยใส่ class ที่เราเขียนขึ้นมาเมื่อกี๊นี้นะครับ
<img alt="รูปขอบมน" border="0" height="278" src="http://www.siamfocus.com/img/google_idcard.jpg" width="500" class="round_image" />


เมื่อเรียกใช้งานถูกต้องจะได้ผลลัพท์ดังด้านล่างนี้นะครับ   
    

 

ลองนำเอาไปประยุกต์ ใช้ดูนะครับ

 


ฝากติดตามผลงานด้านล่างด้วยครับ
--------------------------
► Website : https://www.siamfocus.com/
► LINE@ : https://line.me/ti/p/@siamfocus.com
► Facebook : https://www.facebook.com/fanpage.siamfocus
► Twitter : https://twitter.com/siamfocus
► Google+ : https://plus.google.com/+TAAMSiAMFOCUS
► Instagram : https://www.instagram.com/iamtaam
--------------------------










บทความ แนะนำ

สร้าง backlink ฟรี

สร้าง backlink ฟรี

วันนี้ผมจะมาแนะนำเว็บไซต์ ที่สามารถนำเว็บของเราไปสร้าง Backlink (ลิ้งที่ย้อนกลับมาหาเว็บเรา) แบบที่ส...

Mod Rewrite ใน Localhost

Mod Rewrite ใน Localhost

หลายครั้งที่ต้องมีการทดสอบ Mod Rewrite บนเครื่อง Localhost แต่เนื่องจาก Path ไม่ตรงกับบน Server ที่ใ...

PHP Connect to MySQL

PHP Connect to MySQL

สวัสดีครับ ชาว Dev วันนี้ผมเอา Class Connection มาฝากครับ ซึ่งตัวนี้ผมทำเก็บไว้ใช้ประจำครับ  ...

WordPress 102 (จับจุด WordPress)

WordPress 102 (จับจุด WordPress)

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

พ่อรวยสอนลูก

พ่อรวยสอนลูก

แว๊บแรกที่ผมเห็นหนังสือเล่มนี้บอกเลยตามตรง ว่าผมรู้สึกว่าหนังสือเล่มนี้ก็คงเป็น หนังสือ สดุดี สรรเสร...

explode data ใน PHP

explode data ใน PHP

การ explode คือ การแยกชุดข้อความมาเก็บไว้ใน Array คล้าย ๆ กับการทำงานของ split แต่ต่างกันตรงที่...




หมวดหมู่บทความ