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

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





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

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








บทความ แนะนำ

สอน wordpress online

สอน wordpress online

สอนทำเว็บด้วย wordpress สร้างเว็บด้วยตัวเอง ตั้งแต่เริ่มต้น จนเปิดใช้งาน โดยสามารถสร้างเว็บพร้อมใ...

ลงทุนอะไรดี

ลงทุนอะไรดี

คำถามที่ว่า ลงทุนทำอะไรดี เป็นคำถามของคน 2 แบบ แบบแรก คือต้องการมีรายได้เพิ่มขึ้น  อีกแบบ...

เหยือกเต็มหรือยัง.

เหยือกเต็มหรือยัง.

ชายหนุ่มคนหนึ่งได้รับเชิญจากมหาวิทยาลัยเอกชน เพื่อให้เป็นวิทยากรพิเศษสอนวิชาปรัชญาให้กับนักศึกษาปริ...

SEO คืออะไร

SEO คืออะไร

SEO คืออะไร??? ใครรู้บ้าง??? หลายๆ คนคงได้ยินคำว่า SEO มาบ้าง ซึ่งคำว่า SEO นั้นย่อมาจากคำว่า Sea...

คุยกับเว็บมาสเตอร์

คุยกับเว็บมาสเตอร์

สวัสดีครับ  ผมได้สร้าง Section นี้ขึ้นมา เพื่อเป็นการเล่าเรื่อง หรือ บ่นๆ อาจมี สาระบ้าง ไม่...

สิ่งที่ Web Master ต้องมี

สิ่งที่ Web Master ต้องมี

พูดเรื่อง สิ่งที่ผมทำมาตลอด ก็คือการดูแล รักษาเว็บไซต์ของเรา ให้เติบโตไปในทิศทางที่ได้วางไว้  ...

เว็บไซต์กับตู้โชว์สินค้า

เว็บไซต์กับตู้โชว์สินค้า

หลายๆ ต่อหลายครั้ง ผมมักจะเปรียบเทียบตัวของเว็บไซต์ให้ลูกค้าฟังว่า เว็บไซต์ เปรียบเหมือนกับตู้โชว์สิ...




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