logo标签列表

使用CSS和HTML填充页面上的盒子

htmlcss
5
假设你有一个100px x 100px的容器。 你想用5px x 5px的“盒子”来填充它。 为了简单起见，可以忽略填充、边框宽度和外边距。 是否有一种仅使用CSS和HTML（而不手动声明确切数量的框）的声明性方法来实现这一点？ 编辑：我的原始意图是这些“盒子”实际上是元素。 但我很欣赏你的创造力。
不对，HTML是静态的，而CSS作用于HTML元素。 - Jon P
4个回答
2

就像@thanatosDM所说，如果这些框是HTML对象，则无法实现。否则，您可以使用HTML和CSS创建一些设计效果。

This is the closest I can think of: 

p{
width:100px;
height:100px;
border:1px solid black;
background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='5px' width='5px'><text x='0' y='5' fill='red' font-size='5'>box</text></svg>");
}
<p>container</p>

2
如果这些“框”是独立的HTML元素，那么仅使用HTML和CSS是不可能的。您需要使用服务器端代码或JavaScript来生成它们。
如果这些“框”只是视觉元素，您可以使用一个5px x 5px的背景图像，然后在CSS中设置background-repeat: repeat;。 

div {
  width: 100px;
  height: 100px;
  background: url("http://i.stack.imgur.com/lOtMo.png") 
              repeat
              top left/5px 5px;
}
<div></div>

1
这些“盒子”需要成为元素还是只需要看起来像元素？您可以使用线性渐变来创建盒子的外观，但它们实际上不会成为元素或容器。 

body { background: #eee; }
.outer, .inner { width: 100px; height: 100px;display: block; }
.outer { 
  margin: 20px auto;
  border: 1px solid #000;
  box-shadow: 0 8px 15px #aaa;
  background: #fff
    -webkit-linear-gradient(top, 
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,1) 0%,
      rgba(0,0,0,0) 1%,
      rgba(0,0,0,0) 19%,
      rgba(0,0,0,1) 20%,
      rgba(0,0,0,0) 20%,
      rgba(0,0,0,0) 39%,
      rgba(0,0,0,1) 40%,
      rgba(0,0,0,0) 40%,
      rgba(0,0,0,0) 59%,
      rgba(0,0,0,1) 60%,
      rgba(0,0,0,0) 60%,
      rgba(0,0,0,0) 79%,
      rgba(0,0,0,1) 80%,
      rgba(0,0,0,0) 80%,
      rgba(0,0,0,0) 99%,
      rgba(0,0,0,1) 100%);
    
  background: #fff
    -moz-linear-gradient(top, 
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,1) 0%,
      rgba(0,0,0,0) 1%,
      rgba(0,0,0,0) 19%,
      rgba(0,0,0,1) 20%,
      rgba(0,0,0,0) 20%,
      rgba(0,0,0,0) 39%,
      rgba(0,0,0,1) 40%,
      rgba(0,0,0,0) 40%,
      rgba(0,0,0,0) 59%,
      rgba(0,0,0,1) 60%,
      rgba(0,0,0,0) 60%,
      rgba(0,0,0,0) 79%,
      rgba(0,0,0,1) 80%,
      rgba(0,0,0,0) 80%,
      rgba(0,0,0,0) 99%,
      rgba(0,0,0,1) 100%);
  background: #fff
    linear-gradient(to top, 
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,1) 0%,
      rgba(0,0,0,0) 1%,
      rgba(0,0,0,0) 19%,
      rgba(0,0,0,1) 20%,
      rgba(0,0,0,0) 20%,
      rgba(0,0,0,0) 39%,
      rgba(0,0,0,1) 40%,
      rgba(0,0,0,0) 40%,
      rgba(0,0,0,0) 59%,
      rgba(0,0,0,1) 60%,
      rgba(0,0,0,0) 60%,
      rgba(0,0,0,0) 79%,
      rgba(0,0,0,1) 80%,
      rgba(0,0,0,0) 80%,
      rgba(0,0,0,0) 99%,
      rgba(0,0,0,1) 100%);
  }

.inner { 
  text-align: center;
  font-weight: bold;
  color: #a00;
  line-height: 90px;
  font-size: 2em;
  text-transform: uppercase;
  text-shadow: 0 2px 3px #aaa;
  background: 
    -webkit-linear-gradient(right, 
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,1) 0%,
      rgba(0,0,0,0) 1%,
      rgba(0,0,0,0) 19%,
      rgba(0,0,0,1) 20%,
      rgba(0,0,0,0) 20%,
      rgba(0,0,0,0) 39%,
      rgba(0,0,0,1) 40%,
      rgba(0,0,0,0) 40%,
      rgba(0,0,0,0) 59%,
      rgba(0,0,0,1) 60%,
      rgba(0,0,0,0) 60%,
      rgba(0,0,0,0) 79%,
      rgba(0,0,0,1) 80%,
      rgba(0,0,0,0) 80%,
      rgba(0,0,0,0) 99%,
      rgba(0,0,0,1) 100%);
    
  background: 
    -moz-linear-gradient(right, 
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,1) 0%,
      rgba(0,0,0,0) 1%,
      rgba(0,0,0,0) 19%,
      rgba(0,0,0,1) 20%,
      rgba(0,0,0,0) 20%,
      rgba(0,0,0,0) 39%,
      rgba(0,0,0,1) 40%,
      rgba(0,0,0,0) 40%,
      rgba(0,0,0,0) 59%,
      rgba(0,0,0,1) 60%,
      rgba(0,0,0,0) 60%,
      rgba(0,0,0,0) 79%,
      rgba(0,0,0,1) 80%,
      rgba(0,0,0,0) 80%,
      rgba(0,0,0,0) 99%,
      rgba(0,0,0,1) 100%);
  background: 
    linear-gradient(to right, 
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,1) 0%,
      rgba(0,0,0,0) 1%,
      rgba(0,0,0,0) 19%,
      rgba(0,0,0,1) 20%,
      rgba(0,0,0,0) 20%,
      rgba(0,0,0,0) 39%,
      rgba(0,0,0,1) 40%,
      rgba(0,0,0,0) 40%,
      rgba(0,0,0,0) 59%,
      rgba(0,0,0,1) 60%,
      rgba(0,0,0,0) 60%,
      rgba(0,0,0,0) 79%,
      rgba(0,0,0,1) 80%,
      rgba(0,0,0,0) 80%,
      rgba(0,0,0,0) 99%,
      rgba(0,0,0,1) 100%);
  }
<div class="outer"><div class="inner"> YIPEE! </div></div>

如果想要得到5像素的区域，你需要添加更多的渐变停止点...但这是可行的。

0
不，HTML中的所有对象都需要由程序员编写，因此您无法在这些限制下执行此操作。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接