如何从图像添加灵活且可扩展的视觉边框？

问题描述 投票：0回答：1

这里的图片只是我正在尝试做的事情的一个例子。我有容器（左、主、右），我想要一个可视化的边框，我想我将通过某种图像来实现。老实说，我不知道他们在这里使用了什么，也不知道如何用新的艺术品创建我自己的版本。

我创建了一个边框图像，现在我的网站看起来像一个土豆块切片机 但在搞乱了设置之后，它现在看起来像这样：

起初我使用了一张边框图片，只是添加了“边框”，如下所示：

在网站上实现时看起来像这样：

这使得它看起来像这样，我想这并不太可怕，而且更符合我的目标。我将这一行添加到我的 index.html 中以获得上面的图像：

border-image: url("{{ url_for('static', filename='border.png')}}") 16 round;

这不是我想要的，所以我进入 Photoshop 并创建了一个 border_top、_bottom、_left、_right，然后尝试对其进行切片，但结果却很奇怪。

边框图像的图像：

我只列出一个，其他的也都是这样，并排分开的。

然后我尝试了这个：

.container {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 3fr 1fr;  /*Adjust the fr units as per your design */
    gap: 10px;
    height: 100vh; /* Use the full height of the viewport */
}

.container::before,
.container::after {
    content: '';
    position: absolute;
    pointer-events: none;
}

.container::before { /* Top and bottom border */
    top: 0; right: 0; bottom: 0; left: 0;
    height: 100%;
    border: solid transparent;
    border-width: 16px 0; /* Top and bottom borders */
    background-repeat: round;
    background-image: url('border_top.png'), url('border_bottom.png');
    background-position: top, bottom;
    background-size: 100% 16px; /* Scale to the container width */
}

.container::after { /* Left and right border */
    top: 0; right: 0; bottom: 0; left: 0;
    width: 100%;
    border: solid transparent;
    border-width: 0 16px; /* Left and right borders */
    background-repeat: round;
    background-image: url('border_left.png'), url('border_right.png');
    background-position: left, right;
    background-size: 16px 100%; /* Scale to the container height */

我最终得到了上面的土豆块切片机的图片。哈哈

公平警告 - 我不知道创建边框的标准是什么。有没有办法只获取高分辨率纹理并将其转换为边框，或者我是否必须以每个 .container 的精确尺寸创建边框？或者？我搜索过互联网，发现使用图像作为边框是有问题的，但它是在上图中完成的，所以我想尝试在我的图像中得到类似的东西。

感谢所有帮助。根据记录，我已经尝试过其中的所有 px 大小。其中一些稍微改变了华夫饼图案，但似乎没有解决问题。

这是我的index.html：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My RPG Game</title>
    <link
      rel="stylesheet"
      href="{{ url_for('static', filename='style.css') }}"
    />
    <style>
      .main-content {
        position: relative;
        border: 16px solid transparent;
        /*border-image: url("{{ url_for('static', filename='border.png')}}") 16
          round;*/
      }
      .main-content::before {
        content: "";
        position: absolute;
        top: -16px;
        left: 0;
        width: 100%;
        height: 16px;
        background: url("{{ url_for('static', filename='border_top.png') }}")
          repeat-x;
      }
      /* Bottom border */
      .main-content::after {
        content: "";
        position: absolute;
        bottom: -16px;
        left: 0;
        width: 100%;
        height: 16px;
        background: url("{{ url_for('static', filename='border_bottom.png') }}")
          repeat-x;
      }
      .sidebar-left {
        border: 16px solid transparent;
        border-image: url("{{ url_for('static', filename='border.png')}}") 16
          round;
      }
      .sidebar-right {
        border: 16px solid transparent;
        border-image: url("{{ url_for('static', filename='border.png')}}") 16
          round;
      }
      /* Left border */
      .sidebar-left::before {
        content: "";
        position: absolute;
        top: 0;
        left: -16px;
        width: 16px;
        height: 100%;
        background: url("{{ url_for('static', filename='border_left.png') }}")
          repeat-y;
      }

      /* Right border */
      .sidebar-right::after {
        content: "";
        position: absolute;
        top: 0;
        right: -16px;
        width: 16px;
        height: 100%;
        background: url("{{ url_for('static', filename='border_right.png') }}")
          repeat-y;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <aside class="sidebar-left">
        <!-- Character's location and stats go here -->
      </aside>
      <main class="main-content">
        <!-- Main game content and chat area go here -->
        <div class="chat">
          <!-- Chat content goes here -->
        </div>
        <div class="inventory">
          <!-- Inventory list goes here -->
        </div>
        <!-- Add additional sections as needed -->
      </main>
      <aside class="sidebar-right">
        <!-- Additional information or ads could go here -->
      </aside>
    </div>
    <script src="{{ url_for('static', filename='script.js') }}"></script>
  </body>
</html>

这是我的完整样式.css：

/* Reset margins and padding */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Container for the entire layout */
.container {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 3fr 1fr;  /*Adjust the fr units as per your design */
    gap: 10px;
    height: 100vh; /* Use the full height of the viewport */
}

.container::before,
.container::after {
    content: '';
    position: absolute;
    pointer-events: none;
}

.container::before { /* Top and bottom border */
    top: 0; right: 0; bottom: 0; left: 0;
    height: 100%;
    border: solid transparent;
    border-width: 16px 0; /* Top and bottom borders */
    background-repeat: round;
    background-image: url('border_top.png'), url('border_bottom.png');
    background-position: top, bottom;
    background-size: 100% 16px; /* Scale to the container width */
}

.container::after { /* Left and right border */
    top: 0; right: 0; bottom: 0; left: 0;
    width: 100%;
    border: solid transparent;
    border-width: 0 16px; /* Left and right borders */
    background-repeat: round;
    background-image: url('border_left.png'), url('border_right.png');
    background-position: left, right;
    background-size: 16px 100%; /* Scale to the container height */
}


.sidebar-left,
.sidebar-right {
    background-color: #806c50; /* Example color */
    /* Add more styling */
}

.main-content {
    border-top: 16px solid transparent;
    border-right: 16px solid transparent;
    border-bottom: 16px solid transparent;
    border-left: 16px solid transparent;
    border-image-source: url('/static/border_top.png') 16 round, 
                         url('/static/border_right.png') 16 round, 
                         url('/static/border_bottom.png') 16 round, 
                         url('/static/border_left.png') 16 round;
    border-image-slice: 200;
    border-image-repeat: repeat;
    display: grid;
    grid-template-rows: 1fr auto; /* Adjust the row sizes as needed 
    gap: 10px;*/
}

.chat {
    background-color: #5c4838; /* Example color */
    overflow-y: auto; /* If you want the chat to be scrollable */
    /* Add more styling */
}

.inventory {
    overflow-y: auto; /* Scrollable list of items */
    /* Add more styling */
}

/* Responsive design */
@media (max-width: 768px) {
    .container {
        grid-template-columns: 1fr; /* Stack sidebars and content on smaller screens */
    }

    .sidebar-left,
    .sidebar-right {
        display: none; /* Hide sidebars on smaller screens, or adjust as needed */
    }

    .main-content {
        border-image: none; /* Remove the border image on smaller screens if needed */
        grid-template-rows: auto; /* Adjust layout for mobile */
    }
}

编辑#1：

好吧，我已经修复了土豆切片机的视图，但我基本上还是从一开始就处于的状态。

我注释掉了这一行：

/*.container::before,
.container::after {
content: '';
position: absolute;
pointer-events: none;
}*/

这使得它看起来像这样：

html css border
1个回答
0
投票

好的，我已经修好了！

这是我更新的、完全重写的代码：

    /* Reset margins and padding */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Main wrapper for the layout */
.wrapper {
    display: flex; 
    justify-content: space-between; 
    height: 100vh; 
    padding: 16px; 
    background: #806c50; 
}

/* Common styles for sidebars and main content */
.container {
    background-color: #806c50; 
    overflow-y: auto; 
}

/* Styles for the left sidebar */
.sidebar-left {
    flex: 1; 
    margin-right: 10px; 
}

/* Styles for the main content area */
.main-content {
    flex: 3; 
    margin-right: 10px; 
}

/* Styles for the right sidebar */
.sidebar-right {
    flex: 1; 
}

/* Apply the borders */
.container {
    border-style: solid;
    border-width: 16px; 
    border-image-source: url('/static/border.png');
    border-image-slice: 30 fill;
    border-image-width: 16px;
    border-image-outset: 0; 
    border-image-repeat: stretch; 
}

/* Responsive design adjustments for smaller screens */
@media (max-width: 768px) {
    .wrapper {
        flex-direction: column; /* Stack containers vertically on small screens */
    }

    .sidebar-left,
    .sidebar-right {
        order: 1; /* Put sidebars after main content on small screens */
        margin-right: 0; 
        margin-bottom: 10px; 
    }

    .main-content {
        order: 0; 
        margin-right: 0; 
    }
}

这是我的index.html：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My RPG Game</title>
    <link
      rel="stylesheet"
      href="{{ url_for('static', filename='style.css') }}"
    />
  </head>
  <body>
    <div class="wrapper">
      <div class="container sidebar-left">
        <!-- Character's location and stats go here -->
      </div>
      <div class="container main-content">
        <div class="chat">
          <!-- Chat content goes here -->
        </div>
        <div class="inventory">
          <!-- Inventory list goes here -->
        </div>
        <!-- Add additional sections as needed -->
      </div>
      <div class="container sidebar-right">
        <!-- Additional information or ads could go here -->
      </div>
    </div>
    <script src="{{ url_for('static', filename='script.js') }}"></script>
  </body>
</html>

虽然还不完美，但我想我现在明白如何做我需要做的事情了。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.