圓角邊框以及陰影製作卡片式圖片 圓角邊框 border-radius 卡片使用陰影 box-shadow 利用陰影給圖片底部創造一個長方形 內部的元素會直接覆蓋整個陰影 HTML 部分 CSS 部分 圖片展示 此文到此結束 此文參考鏈接 http://www.w3school.com.cn/cssr ...
圓角邊框以及陰影製作卡片式圖片
- 圓角邊框 border-radius
- 卡片使用陰影 box-shadow
利用陰影給圖片底部創造一個長方形
內部的元素會直接覆蓋整個陰影
HTML 部分
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>卡片式圖片</title> </head> <body> <div class="shadow"> <img src="images/a5.jpg" alt="風景" style="width:200px;height:300px"> <div class="container"> <p>這個世界上充滿了美好與希望</p> </div> </div> </body> </html>
CSS 部分
<style type="text/css"> body { margin:25px; } .shadow { width:290px; background-color:#FFF; box-shadow:0 10px 10px 0 rgba(0,0,0,0.2); /* 0 陰影水平偏移值(可取正負值) 10px 陰影垂直偏移值(可取正負值) 10px 陰影模糊值 rgba(0,0,0,0.2) 陰影顏色 */ margin-bottom:25px; /* 底外邊距 */ border-radius:25px; /* 設置圓角 */ -moz-border-radius:25px; /* 老版的Firefox瀏覽器 */ } img { border-radius:25px 25px 0px 0px; /* 設置圓角 上右下左 */ -moz-border-radius:25px 25px 0px 0px; /* 老版的Firefox瀏覽器 */ } .container { text-align:center; /* 文字居中 */ padding-bottom:10px; /* 底內邊距 */ } </style>
圖片展示
此文到此結束
此文參考鏈接 http://www.w3school.com.cn/cssref/pr_box-shadow.asp
