我使用此css代码在jsf页面显示绿色背景:
.container{
background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #5fa309), color-stop(1, #3b8018));
background:-webkit-linear-gradient(top, #5fa309 0%, #3b8018 100%);
background:-moz-linear-gradient(top, #5fa309 0%, #3b8018 100%);
background:-o-linear-gradient(top, #5fa309 0%, #3b8018 100%);
background:-ms-linear-gradient(top, #5fa309 0%, #3b8018 100%);
background:linear-gradient(top, #5fa309 0%, #3b8018 100%);
position:relative;
display:inline-block;
padding:0 20px 0 10px;
width:270px;
line-height:20px;
font-size:12px;
font-family:sans-serif;
text-shadow:0 1px 0 #264400;
font-weight:bold;
color:#fff
}
.container:after{
content:'';
background:-webkit-gradient(linear, left top, right bottom, color-stop(0, #5fa309), color-stop(1, #3b8018));
background:-webkit-linear-gradient(top left, #5fa309 0%, #3b8018 100%);
background:-moz-linear-gradient(top left, #5fa309 0%, #3b8018 100%);
background:-o-linear-gradient(top left, #5fa309 0%, #3b8018 100%);
background:-ms-linear-gradient(top left, #5fa309 0%, #3b8018 100%);
background:linear-gradient(top left, #5fa309 0%, #3b8018 100%);
position:absolute;
top:3px;
right:-7px;
width:15px;
height:15px;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
-ms-transform:rotate(45deg);
transform:rotate(45deg)
}
我很感兴趣如何在最后添加这种白色效果:
纯css有可能吗?
答案 0 :(得分:1)
你可以使用众多CSS梯度生成器中的一个非常接近。这是我从ColorZilla生成的:
background: #b4df5b; /* Old browsers */
background: -moz-linear-gradient(45deg, #b4df5b 40%, #ffffff 89%); /* FF3.6+ */
background: -webkit-gradient(linear, left bottom, right top, color-stop(40%,#b4df5b), color-stop(89%,#ffffff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(45deg, #b4df5b 40%,#ffffff 89%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(45deg, #b4df5b 40%,#ffffff 89%); /* Opera 11.10+ */
background: -ms-linear-gradient(45deg, #b4df5b 40%,#ffffff 89%); /* IE10+ */
background: linear-gradient(45deg, #b4df5b 40%,#ffffff 89%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4df5b', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
如果您需要更接近目标,则必须优化渐变。为了使背景在所有浏览器中看起来完全相同,背景图像是您最好的选择。