4

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

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

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

4

2 回答 2

2

我会考虑多重背景：

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

于 2021-07-30T10:59:30.423 回答
0
  • 在我所看到的中，我认为这不是正常的边界半径，甚至不是 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>
  • 它不是一个可扩展的盒子，它是一个具有静态宽度的盒子，当改变宽度时，您需要处理正方形以使用新宽度进行计算
于 2021-07-30T12:00:37.817 回答