跨浏览器的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为曲线，阴影，梯度

回答

相关问题