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

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





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

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










บทความ แนะนำ

การทำ mod rewrite บน localhost

การทำ mod rewrite บน localhost

การเรียกใช้งาน mod rewirte บนเครื่องเราเองก่อน upload ขึ้น server พบว่าบางครั้งรันบน server ได้แต่ไม...

เทศกาลส่งความสุข 2561

เทศกาลส่งความสุข 2561

เดือนสุดท้ายของปี 2560 กำลังจะหมดไป และก็กำลังก้าวเข้าสู่ปี 2561 ปี 2560 อาจเป็นปีที่ดีสำหรับใครห...




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