时间戳

首页 > 解决方案 > 如何为 HTML 实现边框半径

html - 如何为 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' %}"？

感谢您的解释，如果您需要其他任何东西，请告诉我。

标签： htmlcss

解决方案

这是如何使用两个文件管理第一个 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 -->

推荐阅读