Question

我遇到的问题是我不知道该如何解决。

我想创建div像素化的border-radius，使其适合我的像素艺术项目。

这是我的代码。 image-rendering适用于图像，但不会影响div本身。

div.pixelated{
  width: 200px;
  height: 40px;
  font-size: 16px;
  background: whitesmoke;
  border: 2px solid black;
  border-radius: 5px;
  image-rendering: pixelated;
  text-align: center;
  }

<div class="pixelated">
  <p>Some content</p>
</div>

有什么解决办法吗？谢谢你，祝你有美好的一天。：）

Answer 1

我认为您所指的是“渐变边界”。我确实相信这会将边框视为图像，而不是线条渲染元素。

示例：

.top2btm { 
                border-width: 3px; border-style: solid; 
                -webkit-border-image: -webkit-gradient(linear, 0 0, 0 100%, from(black), to(rgba(0, 0, 0, 0))) 1 100%;
                -webkit-border-image: -webkit-linear-gradient(black, rgba(0, 0, 0, 0)) 1 100%; 
                -moz-border-image: -moz-linear-gradient(black, rgba(0, 0, 0, 0)) 1 100%; 
                -o-border-image: -o-linear-gradient(black, rgba(0, 0, 0, 0)) 1 100%; border-image: linear-gradient(to bottom, black, rgba(0, 0, 0, 0)) 1 100%; 
               }

这是一个边角框的边界证明：

             .btm-lt { position: relative; } 
             .btm-lt:before, .bot-left:after {
                       content: ""; 
                       position: absolute;
                       bottom: -3px; 
                       left: -3px;
                        } 
             .btm-lt:before {
                            top: -3px; 
                          width: 3px;
                         background-image: -webkit-gradient(linear, 0 100%, 0 0, from(#000), to(transparent)); 
                         background-image: -webkit-linear-gradient(transparent, #000); 
                         background-image: -moz-linear-gradient(transparent, #000);
                         background-image: -o-linear-gradient(transparent, #000); 
                           } 
             .btm-lt:after { 
                               right: -3px; 
                               height: 3px; 
                     background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#000), to(transparent)); 
                     background-image: -webkit-linear-gradient(left, #000, transparent); 
                      background-image: -moz-linear-gradient(left, #000, transparent); 
                      background-image: -o-linear-gradient(left, #000, transparent); }

有什么方法可以使边界半径像素化吗？

1 个答案: