Open ychow opened 9 years ago
currentColor 表示“当前的标签所继承的文字颜色”。如果你不懂，让我们用通用语言--代码，来为大家解释。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS3----currentColor</title> <style> a{ display:inline-block; padding:10px; text-align:center; color:#fc6; border:2px solid currentColor; } a:hover{ color:#ccc; } </style> </head> <body> <a href="javascript::"> 呵呵 </a> </body> </html>
运行上面这段代码，你就会发现，当鼠标移到a标签上，它的border颜色也跟着变化，是和当前标签文字颜色一致。
除了border，还有boxShadow、gradient、box-shadow、SVG的填充色 – fill等等。
Tips
其实对于border、boxShadow想要实现这种效果，有一个非常简便的方法，并且还支持ie6(boxShadow除外，你懂得)。
那就是在写border、boxShadow的颜色值时，我们不写它。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS3----currentColor</title> <style> a{ display:inline-block; padding:10px; text-align:center; color:#fc6; border:2px solid; box-shadow:2px 2px 2px; } a:hover{ color:#ccc; } </style> </head> <body> <a href="javascript::"> 呵呵 </a> </body> </html>
currentColor 表示“当前的标签所继承的文字颜色”。如果你不懂，让我们用通用语言--代码，来为大家解释。
运行上面这段代码，你就会发现，当鼠标移到a标签上，它的border颜色也跟着变化，是和当前标签文字颜色一致。
除了border，还有boxShadow、gradient、box-shadow、SVG的填充色 – fill等等。
其实对于border、boxShadow想要实现这种效果，有一个非常简便的方法，并且还支持ie6(boxShadow除外，你懂得)。
那就是在写border、boxShadow的颜色值时，我们不写它。