A
div实际上可以在没有
:before或
:after选择器的情况下进行，但第一次尝试使用线性渐变。唯一的区别是您必须指定4个位置。暗灰色从0到50％，亮灰色从50％到100％，如下所示：
background: linear-gradient(to right, #9c9e9f 0%,#9c9e9f 50%,#f6f6f6 50%,#f6f6f6 100%);
如您所知，B div是由具有2个位置的线性渐变制成的，如下所示：
background: linear-gradient(to right, #9c9e9f 0%,#f6f6f6 100%);
对于C div，我使用与div A相同的梯度：
background: linear-gradient(to right, #9c9e9f 0%,#9c9e9f 50%,#33ccff 50%,#33ccff 100%);
但是这一次我使用
:after白色背景的选择器，就像div的第二部分较小一样。 * 请注意，我在下面添加了更好的选择。
查看此jsfiddle或以下代码段，以获取完整的跨浏览器代码。
div{ position:relative; width:80%; height:100px; color:red; text-align:center; line-height:100px; margin-bottom:10px;}.a{ background: #9c9e9f; background: -moz-linear-gradient(left, #9c9e9f 0%, #9c9e9f 50%, #f6f6f6 50%, #f6f6f6 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%,#9c9e9f), color-stop(50%,#9c9e9f), color-stop(50%,#f6f6f6), color-stop(100%,#f6f6f6)); background: -webkit-linear-gradient(left, #9c9e9f 0%,#9c9e9f 50%,#f6f6f6 50%,#f6f6f6 100%); background: -o-linear-gradient(left, #9c9e9f 0%,#9c9e9f 50%,#f6f6f6 50%,#f6f6f6 100%); background: -ms-linear-gradient(left, #9c9e9f 0%,#9c9e9f 50%,#f6f6f6 50%,#f6f6f6 100%); background: linear-gradient(to right, #9c9e9f 0%,#9c9e9f 50%,#f6f6f6 50%,#f6f6f6 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9c9e9f', endColorstr='#f6f6f6',GradientType=1 ); }.b{ background: #9c9e9f; background: -moz-linear-gradient(left, #9c9e9f 0%, #f6f6f6 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%,#9c9e9f), color-stop(100%,#f6f6f6)); background: -webkit-linear-gradient(left, #9c9e9f 0%,#f6f6f6 100%); background: -o-linear-gradient(left, #9c9e9f 0%,#f6f6f6 100%); background: -ms-linear-gradient(left, #9c9e9f 0%,#f6f6f6 100%); background: linear-gradient(to right, #9c9e9f 0%,#f6f6f6 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9c9e9f', endColorstr='#f6f6f6',GradientType=1 ); }.c{ background: #9c9e9f; background: -moz-linear-gradient(left, #9c9e9f 0%, #9c9e9f 50%, #33ccff 50%, #33ccff 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%,#9c9e9f), color-stop(50%,#9c9e9f), color-stop(50%,#33ccff), color-stop(100%,#33ccff)); background: -webkit-linear-gradient(left, #9c9e9f 0%,#9c9e9f 50%,#33ccff 50%,#33ccff 100%); background: -o-linear-gradient(left, #9c9e9f 0%,#9c9e9f 50%,#33ccff 50%,#33ccff 100%); background: -ms-linear-gradient(left, #9c9e9f 0%,#9c9e9f 50%,#33ccff 50%,#33ccff 100%); background: linear-gradient(to right, #9c9e9f 0%,#9c9e9f 50%,#33ccff 50%,#33ccff 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9c9e9f', endColorstr='#33ccff',GradientType=1 ); }.c:after{ content:""; position:absolute; right:0; bottom:0; width:50%; height:20%; background-color:white;}<div >A</div><div >B</div><div >C</div>对于C div，还有一种替代方法是不使用白色背景来隐藏第二部分的一部分。而是使第二部分透明，并使用
:after选择器充当具有所需位置和大小的彩色背景。
有关此更新的解决方案，请参见下面的jsfiddle或代码段。
div { position: relative; width: 80%; height: 100px; color: red; text-align: center; line-height: 100px; margin-bottom: 10px;}.a { background: #9c9e9f; background: -moz-linear-gradient(left, #9c9e9f 0%, #9c9e9f 50%, #f6f6f6 50%, #f6f6f6 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%, #9c9e9f), color-stop(50%, #9c9e9f), color-stop(50%, #f6f6f6), color-stop(100%, #f6f6f6)); background: -webkit-linear-gradient(left, #9c9e9f 0%, #9c9e9f 50%, #f6f6f6 50%, #f6f6f6 100%); background: -o-linear-gradient(left, #9c9e9f 0%, #9c9e9f 50%, #f6f6f6 50%, #f6f6f6 100%); background: -ms-linear-gradient(left, #9c9e9f 0%, #9c9e9f 50%, #f6f6f6 50%, #f6f6f6 100%); background: linear-gradient(to right, #9c9e9f 0%, #9c9e9f 50%, #f6f6f6 50%, #f6f6f6 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9c9e9f', endColorstr='#f6f6f6', GradientType=1); }.b { background: #9c9e9f; background: -moz-linear-gradient(left, #9c9e9f 0%, #f6f6f6 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%, #9c9e9f), color-stop(100%, #f6f6f6)); background: -webkit-linear-gradient(left, #9c9e9f 0%, #f6f6f6 100%); background: -o-linear-gradient(left, #9c9e9f 0%, #f6f6f6 100%); background: -ms-linear-gradient(left, #9c9e9f 0%, #f6f6f6 100%); background: linear-gradient(to right, #9c9e9f 0%, #f6f6f6 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9c9e9f', endColorstr='#f6f6f6', GradientType=1); }.c { background: #9c9e9f; background: -moz-linear-gradient(left, #9c9e9f 0%, #9c9e9f 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%, #9c9e9f), color-stop(50%, #9c9e9f), color-stop(50%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0))); background: -webkit-linear-gradient(left, #9c9e9f 0%, #9c9e9f 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%); background: -o-linear-gradient(left, #9c9e9f 0%, #9c9e9f 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%); background: -ms-linear-gradient(left, #9c9e9f 0%, #9c9e9f 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%); background: linear-gradient(to right, #9c9e9f 0%, #9c9e9f 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9c9e9f', endColorstr='#ffffff00', GradientType=1); }.c:after { content: ""; position: absolute; right: 0; top: 0; width: 50%; height: 80%; background-color: #33ccff; z-index: -1}<div >A</div><div >B</div><div >C</div>
