.ellipsis() { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ellipsis(@width) when (@width > 0px) { width: @width; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } // 各种渐变 .gradient-horizontal(@startColor: #555, @endColor: #333) { background-color: @endColor; background-image: -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+ background-image: -webkit-gradient(linear, 0 0, 100% 0, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+ background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+ background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10 background-image: linear-gradient(to right, @startColor, @endColor); // Standard, IE10 background-repeat: repeat-x; } .gradient-vertical(@startColor: #555, @endColor: #333) { background-color: @endColor; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+ background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+ background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+ background-image: linear-gradient(to bottom, @startColor, @endColor); // Standard, IE10 background-repeat: repeat-x; } .gradient-directional(@startColor: #555, @endColor: #333, @deg: 45deg) { background-color: @endColor; background-repeat: repeat-x; background-image: -webkit-linear-gradient(@deg, @startColor, @endColor); // Safari 5.1+, Chrome 10+ background-image: -moz-linear-gradient(@deg, @startColor, @endColor); // FF 3.6+ background-image: linear-gradient(@deg, @startColor, @endColor); // Standard, IE10 }