這是我的CSS:邊境離開梯度
width: 0;
height: 0;
border-top: 31px solid transparent;
border-bottom: 31px solid transparent;
border-left: 31px solid #0caa3f;
是否有可能使左邊框有梯度?
這是我的CSS:邊境離開梯度
width: 0;
height: 0;
border-top: 31px solid transparent;
border-bottom: 31px solid transparent;
border-left: 31px solid #0caa3f;
是否有可能使左邊框有梯度?
演示:http://jsfiddle.net/abhitalks/fg7Ex/3/
標記:
<div id="grad"></div>
CSS :
#grad {
width: 60px;
height: 60px;
position: absolute;
top: 32px;
left: 32px;
clip: rect(auto 30px 60px auto);
}
#grad:after {
content:'';
position: absolute;
background-color: rgba(0, 0, 0, .7);
top: 8px;
bottom: 8px;
left: 8px;
right: 8px;
-webkit-transform:rotate(-45deg);
background-image: -webkit-gradient(linear, right bottom, left bottom, color-stop(.75, #52882d), color-stop(0, #eee));
border: 1px solid #fff;
}
您可以查看同類問題在計算器的解決方案right border gradient
有,因爲它僅支持Chrome和Firefox沒有跨瀏覽器CSS的解決方案。所以,我建議使用DIV作爲家長和分配給它的CSS:
.gradient {
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.33, rgb(173, 14, 173)), color-stop(0.67, rgb(255, 0, 255)));
background-image: -moz-linear-gradient(center bottom, rgb(173, 14, 173) 33%, rgb(255, 0, 255) 67%);
padding: 2px;
}
.gradient > div {
background: #fff;
}
這裏是HTML:
<div class="gradient">
<div>text in div</div>
</div>
如何使用div的僞元素上的box-shadow。喜歡的東西
div:before
{
content: '';
display: block;
height: 60px;
width: 3px;
box-shadow: -3px 2px 2px 0 rgba(0,0,0,.5);
left: -30px;
top: -31px;
position: relative;
}
+1看來你已經閱讀** **的問題只有一個 – vals