Từ khóa currentcolor trong CSS cho phép tham chiếu giá trị hiện tại của thuộc tính color. Nó áp dụng cho các thuộc tính CSS khác như background-color, border-color, box-shadow, v.v.
Điều này giúp đơn giản hóa việc tạo kiểu, bạn có thể dùng chung một màu ở nhiều nơi. Bạn không cần phải định nghĩa lại màu một cách rõ ràng.
Tại sao nên dùng currentcolor?
Từ khóa currentcolor có thể giúp giảm sự trùng lặp trong CSS của bạn. Nếu bạn muốn nhiều thuộc tính dùng chung một màu, hãy tham chiếu currentcolor. Thay vì lặp lại giá trị màu.
Cú pháp:
property: currentcolor;
Ví dụ 1: Sử dụng currentcolor cho Box Shadow
Trong ví dụ này, chúng ta sẽ áp dụng currentcolor cho thuộc tính box-shadow. Do đó bóng sẽ kế thừa cùng màu với văn bản.
<!DOCTYPE html>
<html>
<head>
<title>
CSS currentcolor keyword
</title>
<style>
body {
color: green;
font-size: 1.2em;
}
div {
box-shadow: 0px 0px 80px currentcolor;
border: 10px solid;
width: 50%;
margin: auto;
padding: 20px;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<div>
A Computer Science Portal
</div>
</center>
</body>
</html>
Kết quả:
Ví dụ 2: Sử dụng currentcolor cho Màu Chữ trên Nền
Trong ví dụ này, chúng ta sẽ minh họa cách currentcolor có thể được dùng để áp dụng màu nhất quán. Màu này sẽ dùng cho cả thuộc tính văn bản và nền.
<!DOCTYPE html>
<html>
<title>CSS currentcolor keyword</title>
<head>
<style>
body {
color: green;
}
div {
background: currentcolor;
width: 60%;
margin: auto;
padding: 5px 20px;
}
div > p {
color: white;
opacity: 0.5;
font-size: 1.5em;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<div>
<p>A Computer Science Portal</p>
</div>
</center>
</body>
</html>
Kết quả:
Các trình duyệt được hỗ trợ:
Các trình duyệt được hỗ trợ bởi CSS currentcolor keyword được liệt kê dưới đây:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari