制作像素化的边界半径

Question

我有一款游戏看起来有点像 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>

我想为这个对话框添加一个边框半径，就像口袋妖怪中的那样：

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

Answer 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>

Answer 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>

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

制作像素化的边界半径

Make pixeled border-radius

html

css

border-radius