お持ちの多くの可能性のクロスブラウザとない:デモhttp://codepen.io/anon/pen/zDAof
- はめ込み影、
- の直線勾配 -
- 背景画像
- 混合または他の?
table {
width:100%;
height:100px;
}
td {
background:red;
padding-left:11%;
}
tr:first-child td {
box-shadow:inset 10vw 0 0 green
}
tr:nth-child(2) td {
background:linear-gradient(
to right,
green 0,
green 10%,
transparent 10%,
transparent 100%
) red;
}tr:nth-child(3) td {
background:url(http://dummyimage.com/2000x1/ff0000/ff0000) repeat-y right green;
background-size:90%;
}
tr:last-child td {
background:linear-gradient(to right,
green,
green 10%,
red 10%,
red);
}
デモ用のHTML:
<table>
<tr>
<td> inset shadow
</td>
</tr>
<tr>
<td> Linear- gradient + bg color
</td>
</tr>
<tr>
<td>
background-image repeat-y
</td>
</tr>
<tr>
<td>
linear-gradient
</td>
</tr>
</table>
私はこれらの「2つの色」で達成しようとしていることを理解していません。私たちはあなたに何を意味するのかを示すために素早く描くことができますか? –
@ user3172276質問をよく説明してください、それは明確ではありません –
明確に理解できません。しかし、あなたのコードはjsfiddle http://jsfiddle.net/T7CNL/2/のようになります。二重引用符とバックスラッシュがありません。まずそれを正しく変更してください... – Karuppiah