如何解决制作像素化的边界半径
我有一个游戏看起来有点像 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 中的一样：
解决方法
我会考虑多重背景：
#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,#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',#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)),orange 90deg,lightblue 0) 0 0/calc(2*var(--b)) calc(2*var(--b)),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>- 在我看来，我认为这不是正常的边界半径，甚至不是 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>
- 它不是一个可伸缩的盒子，它是一个具有静态宽度的盒子，当改变宽度时，你需要处理正方形以使用新的宽度进行计算
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。