如何在HTML中实现边框半径
如何在HTML中实现边框半径
提问于 2021-10-22 13:46:06
首先，我对编码是个新手。我正在尝试实现我的投资组合网站的边界半径(由引导模板创建)，基于此：https://codepen.io/enbee81/pen/LBMKqV
我有点卡住了，因为我的代码中有几个部分，而我的照片在其中一个下面。请参见代码：
<section class="py-5 text-center container">
<div class="row py-lg-5">
<div class="col-lg-6 col-md-8 mx-auto">
<h1 class="fw-light">Random Text</h1>
<p class="lead text-muted">Random Text</p>
<p>
<a href="mailto:email" class="btn btn-primary my-2">Email Me</a>
<a href="github" class="btn btn-secondary my-2">Check my GitHub</a>
</p>
<h2 class="image_class">
<img src="{% static 'image.png' %}" height = 400 > </img>
</h2>
</div>
</div>
</section>当我把超文本标记语言代码和CSS代码在<style></style>中的上述代码之前，整个网站是破碎的，图像生成高于我的原始，甚至整个部分。在我的代码的哪一部分中，我应该实现边界半径，以便仅在本节中工作，并使用<img src="{% static 'image.png' %}"给出的照片？
谢谢你的解释，如果你还需要什么，请告诉我。
Stack Overflow用户
发布于 2021-10-25 14:44:46
这是一个简单的解决方案，如何用两个文件管理第一个CodePen教程！所以你只需要一个index.html和一个style.css文件。
如果您不知道如何链接外部CSS文件，请在您的html文件中执行此操作：
<head>
<link rel="stylesheet" href="my-awesome-stylesheet.css">
</head>在这种情况下，»my-awesome stylesheet.css«必须在同一个文件夹中！
* {
box-sizing: border-box;
}
body {
background: #003;
}
.container {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.box {
width: 60vmin;
height: 60vmin;
border: 1px dashed rgba(255, 255, 255, 0.4);
position: relative;
&::before {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
border-radius: 50%;
border: 1px dashed rgba(255, 255, 255, 0.4);
transform: scale(1.42);
}
}
.spin-container {
width: 100%;
height: 100%;
animation: spin 12s linear infinite;
position: relative;
}
.shape {
width: 100%;
height: 100%;
transition: border-radius 1s ease-out;
border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
animation: morph 8s ease-in-out infinite both alternate;
position: absolute;
overflow: hidden;
z-index: 5;
}
.bd {
width: 142%;
height: 142%;
position: absolute;
left: -21%;
top: -21%;
/* This is the image you have to change! */
background: url(https://images.unsplash.com/photo-1519345182560-3f2917c472ef?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=2868fd5c3f30697d38732224e0ef51ed);
background-size: 100%;
background-position: center center;
display: flex;
color: #003;
font-size: 5vw;
font-weight: bold;
align-items: center;
justify-content: center;
text-align: center;
text-transform: uppercase;
animation: spin 12s linear infinite reverse;
opacity: 1;
z-index: 2;
}
@keyframes morph {
0% {
border-radius: 40% 60% 60% 40% / 60% 30% 70% 40%;
}
100% {
border-radius: 40% 60%;
}
}
@keyframes spin {
to {
transform: rotate(1turn);
}
} <!-- Here is enough space für other HTML Stuff -->
<!-- THE CODEPEN BASIS HTML -->
<div class="container">
<div class="box">
<div class="spin-container">
<div class="shape">
<div class="bd"></div>
</div>
</div>
</div>
</div>
<!-- END OF THE CODEPEN BASIS HTML -->
<!-- Here is enough space für other HTML Stuff -->
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69677981
复制相关文章
相似问题
腾讯云开发者
