以下是今天每日一练的最终效果：
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>【每日一练】185—CSS实现弧形图片展示效果</title>
<link rel=”stylesheet” href=”https://unpkg.com/ress/dist/ress.min.css”>
<link rel=”stylesheet” href=”css/style.css”></head>
<body><section>
<div class=”block img01″ number=”A”></div>
<div class=”block img02″ number=”B”></div>
<div class=”block img03″ number=”C”></div>
</section></body>
</html>
@charset “UTF-8”; html{
font-size: 0.625rem;
}body{
font-size: 1.6rem;
line-height: 1.7;
letter-spacing: .1em;
color: #535353;
font-family: serif;background-color: #fafafa;
}section{
margin: 150px auto;
max-width: 1200px;display: flex;
justify-content: space-around;
align-items: center;
}.block{
width: 320px;
height: 400px;border-top-left-radius: 50%;
border-top-right-radius: 50%;background-size: cover;
background-repeat: no-repeat;
background-position: center top;outline-offset: 5px;
outline: 1px solid #282524;position: relative;
}.img01{
background-image: url(../img/01.jpg);
}
.img02{
background-image: url(../img/02.jpg);
}
.img03{
background-image: url(../img/03.jpg);
}.block::after{
content: attr(number);
width: 80px;
height: 80px;
border-radius: 50%;color: #fcfcfc;
font-size: 1.8rem;
text-align: center;
line-height: 80px;background-color: #282524;
position: absolute;
bottom: -40px;
left: 50%;
transform: translateX(-50%);outline-offset: -4px;
outline: 1px solid #fcfcfc;
}
写在最后
以上就是每日一练的全部内容，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。
我是杨小爱，我们明天见。
相关文章
