正方形内部颜色的CSS答案

【问题标题】：CSS inside color of a square正方形内部颜色的CSS
【发布时间】：2015-04-11 20:34:09
【问题描述】：

我正在尝试在 HTML + CSS 中实现以下结构：

我在另一个帖子中读到，实现水平正方形的一种简单方法是：

HTML

<table>
    <th>
        <td>&#9633;</td>
    </th>
    <th>
         <td>&#9633;</td>
    </th>
    <th>
        <td>&#9633;</td>
    </th>
</table>

CSS

td {
    font-size: 5em;
}

但是我怎样才能填充块的内部颜色并减少块之间的分离，使它们都在一起呢？

【问题讨论】：

应该使用表格来显示表格数据，这看起来不像表格数据，因此您应该考虑使用不同的标记。
这些方块是假设包含任何内容，还是只是一个空的视觉/图片？

标签： html css colors html-table

【解决方案1】：

背景渐变可用于内容或不在内部的父级。

我知道你想删除黑色边框

.squares.ib {
  display:inline-block;
}
.squares.tb{
  display:table;
}
.squares.b {
  display:block;
}
.squares {
  margin:5px;
  width:100px;
  background:linear-gradient(to right,
    #F15E66 0%, 
    #F15E66 25%, 
    #FFDB64 25%, 
    #FFDB64 50%,
    #F58326 50%,
    #F58326 75%, 
    #85B1DE 75%, 
    #85B1DE 100%);
  text-align:center;
  text-shadow:0 0 1px white
}
div.squares:before {
  content:'';
  padding-top:25%;
  display:inline-block;
  vertical-align:middle;
}

<div class="squares ib">inline-block</div>
<hr/>
<div class="squares tb"> table</div>
<hr/>
<div class="squares b">block</div>
<hr/>
<table class="squares">
  <tr>
    <td>td</td>
    <td>td</td>
    <td>td</td>
    <td>td</td>
  </tr>
</table>

【讨论】：

【解决方案2】：

table{
    border-collapse: collapse;
}
td{    
    padding:20px;
    border:5px solid black;
}
.red{
    background-color:#F15E66;
}
.yellow{
    background-color:#FFDB64;
}
.orange{
    background-color:#F58326;
}
.blue{
    background-color:#85B1DE;
}

<table>
    <tr>
        <td class="red"></td>
        <td class="yellow"></td>
        <td class="orange"></td>
        <td class="blue"></td>
    <tr>
</table>

https://jsfiddle.net/YameenYasin/cx1ka3Ly/

【讨论】：

【解决方案3】：

使用表格你可以这样做：

table {
    border-spacing: 0px; 
    border-collapse: collapse;
}

td {
    width: 3em;
    height: 3em;
    border: 5px solid black;
}

.yellow{
    background-color: yellow;
}

.red {
    background-color: red;
}

.green {
    background-color: green;    
}

.orange {
    background-color: orange;      
}

<table>
    <tr>
        <td class="yellow"></td>
        <td class="red"></td>
        <td class="green"></td>
        <td class="orange"></td>
    </tr>
</table>

【讨论】：

【解决方案4】：

如果你想坚持使用桌子，你可以这样做：

table {
  border-collapse: collapse;
}
td {
  font-size: 3em;
  border: 3px solid black;
  width: 50px;
  height: 50px;
}
.green {
  background-color: green;
}
.red {
  background-color: red;
}
.blue {
  background-color: blue;
}

<table>
  <tr>
    <td class="green"></td>
    <td class="red"></td>
    <td class="blue"></td>
  </tr>
</table>

【讨论】：

【解决方案5】：

你有必要使用桌子吗？如果没有，这里是一个使用不同方法的 sn-p。

.box-container {
  background: #424244;
  display: table;
}
.box {
  height: 20px;
  width: 20px;
  display: table-cell;
}
.box:nth-child(1) {
  background: #F15E66;
}
.box:nth-child(2) {
  background: #FFDB64;
}
.box:nth-child(3) {
  background: #F58326;
}
.box:nth-child(4) {
  background: #85B1DE;
}

<div class="box-container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

【讨论】：

【解决方案6】：

试试这个：

 

.redBg   { background-color: red;    }
.greeBg  { background-color: green;  }
.yelloBg { background-color: yellow; }
th { border: 2px; }
table {
    border-collapse: collapse;
}
td {    
    padding: 20px;
    border: 5px solid black;
}

<table>
    <tr><td class="redBg"></td>
        <td class="greeBg"></td>
        <td class="yelloBg"></td>   
</table>

【讨论】：

【解决方案7】：

试试这个：

.mainbox {
    border: #000 solid 2px;
    float: left;
}
.box {
    width: 30px;
    height: 30px;
    border-right: #000 solid 2px;
    float: left;
    margin: 0px;
    padding: 0px;
}
.box:last-child {
    border: none;
}
.red {
    background: #ff0000;
}
.orange {
    background: #ff6600;
}
.blue {
    background: #006699;
}

<div class="mainbox">
    <div class="box red"></div>
    <div class="box orange"></div>
    <div class="box blue"></div>
</div>

【讨论】：