制作像素化边框半径答案

【问题标题】：Make pixeled border-radius制作像素化边框半径
【发布时间】：2021-10-05 21:08:49
【问题描述】：

我有一个游戏，看起来有点像 1980 年的游戏。我有这个对话框：

#firstPageText {
            width: 300px;
            min-height: 100px;
            border: 2px solid;
            padding: 1em;
            margin: 0;
            position: absolute;
            bottom: 50px;
            left: 50%;
            -ms-transform: translate(-50%, 0%);
            transform: translate(-50%, 0%);
            font-family: 'Press Start 2P', cursive;
            border-radius: 5px;
        }

<link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">

<p id="firstPageText">
  This is a test text.
</p>

我想在这个对话框中添加一个边框半径，就像 pokemon 中的那样：

有没有办法实现这个像素化的边框半径，而不是圆角的边框半径？

【问题讨论】：

对于一般情况（任何半径）或您要展示的特定情况？
@TemaniAfif 实际上，我需要一个和图片一模一样的。但是你会有什么样的想法？我很想看到它
@TemaniAfif 顺便说一句，我在您的个人资料中找到了电子邮件（号码）：D
很好，但不要破坏它；）
@TemaniAfif 当然哈哈哈 :)

标签： html css border-radius

【解决方案1】：

我会考虑多重背景：

#firstPageText {
  --b:5px;  /* the thickness */
  --c:#000; /* the color */
  width: 300px;
  min-height: 100px;
  font-family: 'Press Start 2P', cursive;
  padding:calc(5*var(--b));
  position:relative;
}
  
#firstPageText::before,
#firstPageText::after { 
  content:"";
  position:absolute;
  inset:0 0 50% 0;
  background:
    linear-gradient(var(--c) 0 0) 50%   0  /calc(100% - 4*var(--b)) var(--b),
    linear-gradient(var(--c) 0 0) 0%   100%/var(--b) calc(100% - 2*var(--b)),
    linear-gradient(var(--c) 0 0) 100% 100%/var(--b) calc(100% - 2*var(--b)),
    conic-gradient(from  90deg,var(--c) 90deg,#0000 0) 0    0/calc(2*var(--b)) calc(2*var(--b)),
    conic-gradient(from 180deg,var(--c) 90deg,#0000 0) 100% 0/calc(2*var(--b)) calc(2*var(--b));
  background-repeat:no-repeat;
}
#firstPageText::after {
  transform-origin:bottom;
  transform:scaleY(-1);
}

<p id="firstPageText">
  This is a test text.
</p>

应用不同的颜色来理解谜题：

#firstPageText {
  --b:10px; /* adjust this */
  width: 300px;
  min-height: 100px;
  font-family: 'Press Start 2P', cursive;
  padding:calc(5*var(--b));
  position:relative;
}
  
#firstPageText::before,
#firstPageText::after { 
  content:"";
  position:absolute;
  inset:0 0 50% 0;
  background:
    linear-gradient(red 0 0) 50%   0  /calc(100% - 4*var(--b)) var(--b),
    linear-gradient(blue 0 0) 0%   100%/var(--b) calc(100% - 2*var(--b)),
    linear-gradient(green 0 0) 100% 100%/var(--b) calc(100% - 2*var(--b)),
    conic-gradient(from  90deg,orange 90deg,lightblue 0) 0    0/calc(2*var(--b)) calc(2*var(--b)),
    conic-gradient(from 180deg,purple 90deg,lightblue 0) 100% 0/calc(2*var(--b)) calc(2*var(--b));
  background-repeat:no-repeat;
}
#firstPageText::after {
  transform-origin:bottom;
  transform:scaleY(-1);
  filter:hue-rotate(180deg);
}

<p id="firstPageText">
  This is a test text.
</p>

【讨论】：

非常感谢
嗨 Temani，你能检查一下这个问题吗？ stackoverflow.com/questions/68744811/…。作为一个 CSS 黑客，你可能有一个干净的解决方案：o

【解决方案2】：

我认为这不是正常的边界半径，甚至不是 svg，我认为这些是像这样设计的多个元素

<!DOCTYPE html>
 <html>
 <head>
     <title></title>
     <meta charset="utf-8" />
     <style>
        .box {
            width: 230px;
            min-height: 100px;
            margin: 25px auto;
            position: relative;
        }
        .top {
            height: 10px;
            background: #000;
            width: 85%;
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
        }
        .right {
            height: 65%;
            background: #000;
            width: 10px;
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            z-index: 1;
        }
        .bottom {
            height: 10px;
            background: #000;
            width: 85%;
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
        }
        .left {
            height: 65%;
            background: #000;
            width: 10px;
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
        }
        /*                  Squares                 */
        .top:before {
            content: "";
            height: 80%;
            background: #000;
            width: 8px;
            position: absolute;
            right:0;
            bottom: -40%;
            z-index: 99;
            transform: translate(85%, 50%)
        }
        .right:before {
            content: "";
            height: 8px;
            background: #000;
            width: 80%;
            position: absolute;
            right:0;
            bottom: -40%;
            z-index: 99;
            transform: translate(-100%, -230%)
        }
        
        .bottom:before {
            content: "";
            height: 80%;
            background: #000;
            width: 8px;
            position: absolute;
            left:0;
            bottom: -40%;
            z-index: 99;
            transform: translate(-90%, -170%)
        }
        
        .left:before {
            content: "";
            height: 8px;
            background: #000;
            width: 80%;
            position: absolute;
            right:0;
            top: -40%;
            z-index: 99;
            transform: translate(100%, 230%)
        }
     </style>
 </head>
     <body>
    <div class="box">
        <div class="top"></div>
        <div class="right"></div>
        <div class="bottom"></div>
        <div class="left"></div>
    </div>
     </body>
 </html>

它不是一个可缩放的盒子，它是一个具有静态宽度的盒子，当更改宽度时，您需要处理正方形以便使用新宽度进行计算

【讨论】：

非常感谢您的努力。不幸的是，我需要的是它通常会改变高度，在你的例子中它是不合适的。无论如何，谢谢，你的努力得到了 +1。