【每日一练】185—CSS实现弧形图片展示效果

每日一练1年前 (2023)发布 admin
1,731 0

以下是今天每日一练的最终效果:

【每日一练】185—CSS实现弧形图片展示效果
HTML代码:
<!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>

CSS代码:
@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;
}

写在最后

以上就是每日一练的全部内容,希望今天的小练习对你有用,如果你觉得有帮助的话,请点赞我,关注我,并将它分享给你身边做开发的朋友,也许能够帮助到他。

我是杨小爱,我们明天见。

© 版权声明

相关文章

暂无评论

暂无评论...