跨瀏覽器的CSS爲曲線，陰影，梯度

是這樣的CSS庫，我可以使用，而不是必須手動使用下面的每個瀏覽器的特殊標記？跨瀏覽器的CSS爲曲線，陰影，梯度

-moz-linear-gradient 
-webkit-gradient 
-ms-filter: "progid:DXImageTransform.Microsoft.gradient

來源

2010-07-25 cometta

我個人並不知道任何，但你可以設置你的CSS文件，用PHP解析，然後編寫一個函數，輸出你需要的一切。例如：

<?php 
function makeBorderRadius($radius) { 
    echo "-moz-border-radius: " . $radius . "\n"; 
    echo "-webkit-border-radius: " . $radius . "\n"; 
    echo "border-radius: " . $radius . "\n"; 
} 
?> 

#mydiv { 
    width: 50%; 
    background: #000; 
    <?php makeBorderRadius(5); ?> 
}

來源

2010-07-25 14:06:47 derekerdmann

nope，我正在尋找跨瀏覽器的css包裝 – cometta 2010-07-25 15:12:33

我想我不完全確定你的意思，然後。發送到瀏覽器的最終產品必須是純CSS樣式表 - 它們不會支持其他任何內容。任何額外的功能（如你正在尋找的）必須在某種服務器端處理器中實現。這就是LESS（使用Ruby）這樣的框架。 – derekerdmann 2010-07-25 15:22:33

這是一個不錯的解決方案。儘管爲每個角落使用不同的/單獨的「border-radius」值可能會很棘手。 +1 – 2010-07-25 19:00:01

我重新發現對方的回答三年後，我可以肯定地說有一個更好的解決方案。雖然前綴border-radius樣式的日子已基本結束，但我們可以針對類似情況促進良好的代碼重用。

SASS是一種擴展的CSS語法，增加了大量方便的功能，包括變量，函數和mixins。它確實需要一個單獨的編譯步驟來生成CSS，但擁有更強大的開發語言的優勢讓您擁有更多可維護的代碼。使用mixin，從之前的邊界半徑的例子看起來是這樣的：

@mixin border-radius($width) { 
    -moz-border-radius: $width; 
    -webkit-border-radius: $width; 
    border-radius: $width; 
} 

.mydiv { 
    @include border-radius(5px); 
}

在現實中，你不應該維護自己的CSS兼容性的混入。這就是爲什麼我們有其他框架，如Compass--框架開發人員跟蹤哪些瀏覽器使用前綴和管理兼容性，而您可以專注於完成您的網站。他們甚至有堅實的線性漸變的支持，所以你可以寫：

.mydiv { 
    @include background-image(linear-gradient(left top, white, #ddd)); 
    background-image: linear-gradient(to bottom right, white, #ddd); 
}

這種解決方案的最好的部分是，你並不需要亂用PHP或Apache配置 - 只需要運行一些簡單的命令，或者使用工具來編譯CSS，然後像其他任何樣式表一樣包含它們。

來源

2013-04-07 01:52:05 derekerdmann

跨瀏覽器的CSS爲曲線，陰影，梯度

回答

相關問題