如何在 HTML 中实现边框半径
[英]How to implement border-radius to HTML
问题描述
起初，我是编码新手。 我正在尝试基于以下内容对我的投资组合网站（由引导模板创建）实施边框半径： 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>
当我在上面的代码之前将 HTML 代码和 CSS 代码放在<style></style> ，整个网站都被破坏了，图像生成在我原来的甚至整个部分之上。 我应该在代码的哪一部分中实现边框半径以仅在此部分中工作，并且我的照片由<img src="{% static 'image.png' %}" ？
感谢您的解释，如果您需要其他任何东西，请告诉我。
2 个解决方案
解决方案1
0 2021-10-22 14:10:44
请试试这个
<img src="http://lorempixel.com/400/200/" style="border-radius: 50%;">
解决方案2
0 2021-10-25 14:44:45
这是如何使用两个文件管理第一个 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 -->
如何在 HTML/CSS 中为视频添加边框半径
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.