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

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





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

ซึ่งปัจจุบันสามารถกำหนดได้จาก ตัว 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
--------------------------








บทความ แนะนำ

ตรวจสอบเว็บไซต์

ตรวจสอบเว็บไซต์

วิธีการตรวจสอบ ว่า เว็บไซด์ แต่ละเว็บ มีจำนวนหน้า หรือ เนื้อหา อยู่ภายใน Search Engine ยอดนิยมอย่างก...

Google My Business

Google My Business

ดึงดูดลูกค้าใหม่ๆ ด้วยรายชื่อธุรกิจ บน Google ฟรี รายชื่อธุรกิจคุณจะแสดงขึ้นเมื่อผู้ใช้ ค้นหาธุรก...

หลอกโอนเงินผ่านเฟส

หลอกโอนเงินผ่านเฟส

อ่านสักนิด ก่อนโอนเงินผ่านเฟส ++++++++ ช่วงนี้เห็นข่าวหลอกโอนเงินเยอะมาก แม้จะมีข่าวให้ได้ยินเ...

เตือนสติพระคุณแม่ 1

เตือนสติพระคุณแม่ 1

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




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