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

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



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

ซึ่งปัจจุบันสามารถกำหนดได้จาก ตัว 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 : http://www.siamfocus.com/
► LINE@ : http://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
--------------------------



บทความ แนะนำ




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