圆角边框以及阴影制作卡片式图片 - 学习笔记

最新推荐文章于 2022-07-10 22:07:05 发布

weixin_33970449

最新推荐文章于 2022-07-10 22:07:05 发布

阅读量132

点赞数

原文链接：http://www.cnblogs.com/weiaixiaomianbao/p/6910634.html

版权

圆角边框以及阴影制作卡片式图片

圆角边框 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>