Định nghĩa và sử dụng. Trong CSS3 chúng ta có thể tạo màu sắc cho background gradient theo biên độ giảm dần.

Danh ngôn cuộc sống:

• Bài viết được đăng bởi: Mr. Phan Nhan
• Ngày cập nhật bài viết: 13/05/2016
• Tổng lược xem trang: 374 / 1 khách
• Đánh giá bởi người dùng:

Định nghĩa và sử dụng. Trong CSS3 chúng ta có thể tạo màu sắc cho background theo biên độ giảm dần. Cấu trúc:

div {
background: -moz-radial-gradient(vị-trí, circle kích-thước, mã-màu-1 n1%, mã-màu-2 n2%);
background: -o-radial-gradient(vị-trí, circle kích-thước, mã-màu-1 n1%, mã-màu-2 n2%);
background: -ms-radial-gradient(vị-trí, circle kích-thước, mã-màu-1 n1%, mã-màu-2 n2%);
background: -webkit-gradient(vị-trí, circle kích-thước, mã-màu-1 n1%, mã-màu-2 n2%);
}

Trong đó:
vị-trí: được được hiển thị theo các cặp thẻ, kích-thước: được xác định theo giá trị, mã-màu: giá trị màu, n: độ tràn màu (hay độ trộn lẫn), giá trị tính theo %.
HTML viết:

Vị trí: top left - kích thước: farthest-side, CSS viết:

div {
background: -moz-radial-gradient(top left, circle farthest-side, #ffffff 0%, #cc0000 100%);
background: -o-radial-gradient(top left, circle farthest-side, #ffffff 0%, #cc0000 100%);
background: -ms-radial-gradient(top left, circle farthest-side, #ffffff 0%, #cc0000 100%);
background: -webkit-radial-gradient(top left, circle farthest-side, #ffffff 0%, #cc0000 100%);
height: 200px;
}

Vị trí: top left - kích thước: farthest-corner, CSS viết:

div {
background: -moz-radial-gradient(top left, circle farthest-corner, #ffffff 0%, #cc0000 100%);
background: -o-radial-gradient(top left, circle farthest-corner, #ffffff 0%, #cc0000 100%);
background: -ms-radial-gradient(top left, circle farthest-corner, #ffffff 0%, #cc0000 100%);
background: -webkit-radial-gradient(top left, circle farthest-corner, #ffffff 0%, #cc0000 100%);
height: 200px;
}

Vị trí: top center - kích thước: closest-corner, CSS viết:

div {
background: -moz-radial-gradient(top center, circle closest-corner, #ffffff 0%, #cc0000 100%);
background: -o-radial-gradient(top center, circle closest-corner, #ffffff 0%, #cc0000 100%);
background: -ms-radial-gradient(top center, circle closest-corner, #ffffff 0%, #cc0000 100%);
background: -webkit-radial-gradient(top center, circle closest-corner, #ffffff 0%, #cc0000 100%);
height: 200px;
}

Vị trí: top center - kích thước: farthest-side, CSS viết:

div {
background: -moz-radial-gradient(top center, circle farthest-side, #ffffff 0%, #cc0000 100%);
background: -o-radial-gradient(top center, circle farthest-side, #ffffff 0%, #cc0000 100%);
background: -ms-radial-gradient(top center, circle farthest-side, #ffffff 0%, #cc0000 100%);
background: -webkit-radial-gradient(top center, circle farthest-side, #ffffff 0%, #cc0000 100%);
height: 200px;
}

Vị trí: top center - kích thước: farthest-corner, CSS viết:

div {
background: -moz-radial-gradient(top center, circle farthest-corner, #ffffff 0%, #cc0000 100%);
background: -o-radial-gradient(top center, circle farthest-corner, #ffffff 0%, #cc0000 100%);
background: -ms-radial-gradient(top center, circle farthest-corner, #ffffff 0%, #cc0000 100%);
background: -webkit-radial-gradient(top center, circle farthest-corner, #ffffff 0%, #cc0000 100%);
height: 200px;
}

Vị trí: top right - kích thước: farthest-side, CSS viết:

div {
background: -moz-radial-gradient(top right, circle farthest-side, #ffffff 0%, #cc0000 100%);
background: -o-radial-gradient(top right, circle farthest-side, #ffffff 0%, #cc0000 100%);
background: -ms-radial-gradient(top right, circle farthest-side, #ffffff 0%, #cc0000 100%);
background: -webkit-radial-gradient(top right, circle farthest-side, #ffffff 0%, #cc0000 100%);
height: 200px;
}

Vị trí: top right - kích thước: farthest-corner, CSS viết:

div {
background: -moz-radial-gradient(top right, circle farthest-corner, #ffffff 0%, #cc0000 100%);
background: -o-radial-gradient(top right, circle farthest-corner, #ffffff 0%, #cc0000 100%);
background: -ms-radial-gradient(top right, circle farthest-corner, #ffffff 0%, #cc0000 100%);
background: -webkit-radial-gradient(top right, circle farthest-corner, #ffffff 0%, #cc0000 100%);
height: 200px;
}

Vị trí: center left - kích thước: closest-corner, CSS viết:

div {
background: -moz-radial-gradient(center left, circle closest-corner, #ffffff 0%, #cc0000 100%);
background: -o-radial-gradient(center left, circle closest-corner, #ffffff 0%, #cc0000 100%);
background: -ms-radial-gradient(center left, circle closest-corner, #ffffff 0%, #cc0000 100%);
background: -webkit-radial-gradient(center left, circle closest-corner, #ffffff 0%, #cc0000 100%);
height: 200px;
}

Vị trí: center left - kích thước: farthest-side, CSS viết:

div {
background: -moz-radial-gradient(center left, circle farthest-side, #ffffff 0%, #cc0000 100%);
background: -o-radial-gradient(center left, circle farthest-side, #ffffff 0%, #cc0000 100%);
background: -ms-radial-gradient(center left, circle farthest-side, #ffffff 0%, #cc0000 100%);
background: -webkit-radial-gradient(center left, circle farthest-side, #ffffff 0%, #cc0000 100%);
height: 200px;
}

Vị trí: center left - kích thước: farthest-corner, CSS viết:

div {
background: -moz-radial-gradient(center left, circle farthest-corner, #ffffff 0%, #cc0000 100%);
background: -o-radial-gradient(center left, circle farthest-corner, #ffffff 0%, #cc0000 100%);
background: -ms-radial-gradient(center left, circle farthest-corner, #ffffff 0%, #cc0000 100%);
background: -webkit-radial-gradient(center left, circle farthest-corner, #ffffff 0%, #cc0000 100%);
height: 200px;
}

Vị trí: center center - kích thước: closest-side, CSS viết:

div {
background: -moz-radial-gradient(center center, circle closest-side, #ffffff 0%, #cc0000 100%);
background: -o-radial-gradient(center center, circle closest-side, #ffffff 0%, #cc0000 100%);
background: -ms-radial-gradient(center center, circle closest-side, #ffffff 0%, #cc0000 100%);
background: -webkit-radial-gradient(center center, circle closest-side, #ffffff 0%, #cc0000 100%);
height: 200px;
}

Vị trí: center center - kích thước: closest-corner, CSS viết:

div {
background: -moz-radial-gradient(center center, circle closest-corner, #ffffff 0%, #cc0000 100%);
background: -o-radial-gradient(center center, circle closest-corner, #ffffff 0%, #cc0000 100%);
background: -ms-radial-gradient(center center, circle closest-corner, #ffffff 0%, #cc0000 100%);
background: -webkit-radial-gradient(center center, circle closest-corner, #ffffff 0%, #cc0000 100%);
height: 200px;
}

Vị trí: center center - kích thước: farthest-side, CSS viết:

div {
background: -moz-radial-gradient(center center, circle farthest-side, #ffffff 0%, #cc0000 100%);
background: -o-radial-gradient(center center, circle farthest-side, #ffffff 0%, #cc0000 100%);
background: -ms-radial-gradient(center center, circle farthest-side, #ffffff 0%, #cc0000 100%);
background: -webkit-radial-gradient(center center, circle farthest-side, #ffffff 0%, #cc0000 100%);
height: 200px;
}

Vị trí: center center - kích thước: farthest-corner, CSS viết:

div {
background: -moz-radial-gradient(center center, circle farthest-corner, #ffffff 0%, #cc0000 100%);
background: -o-radial-gradient(center center, circle farthest-corner, #ffffff 0%, #cc0000 100%);
background: -ms-radial-gradient(center center, circle farthest-corner, #ffffff 0%, #cc0000 100%);
background: -webkit-radial-gradient(center center, circle farthest-corner, #ffffff 0%, #cc0000 100%);
height: 200px;
}

Vị trí: center right - kích thước: farthest-side, CSS viết:

div {
background: -moz-radial-gradient(center right, circle farthest-side, #ffffff 0%, #cc0000 100%);
background: -o-radial-gradient(center right, circle farthest-side, #ffffff 0%, #cc0000 100%);
background: -ms-radial-gradient(center right, circle farthest-side, #ffffff 0%, #cc0000 100%);
background: -webkit-radial-gradient(center right, circle farthest-side, #ffffff 0%, #cc0000 100%);
height: 200px;
}

Vị trí: center right - kích thước: farthest-corner, CSS viết:

div {
background: -moz-radial-gradient(center right, circle farthest-corner, #ffffff 0%, #cc0000 100%);
background: -o-radial-gradient(center right, circle farthest-corner, #ffffff 0%, #cc0000 100%);
background: -ms-radial-gradient(center right, circle farthest-corner, #ffffff 0%, #cc0000 100%);
background: -webkit-radial-gradient(center right, circle farthest-corner, #ffffff 0%, #cc0000 100%);
height: 200px;
}

Vị trí: bottom left - kích thước: farthest-side, CSS viết:

div {
background: -moz-radial-gradient(bottom left, circle farthest-side, #ffffff 0%, #cc0000 100%);
background: -o-radial-gradient(bottom left, circle farthest-side, #ffffff 0%, #cc0000 100%);
background: -ms-radial-gradient(bottom left, circle farthest-side, #ffffff 0%, #cc0000 100%);
background: -webkit-radial-gradient(bottom left, circle farthest-side, #ffffff 0%, #cc0000 100%);
height: 200px;
}

Vị trí: bottom left - kích thước: farthest-corner, CSS viết:

div {
background: -moz-radial-gradient(bottom left, circle farthest-corner, #ffffff 0%, #cc0000 100%);
background: -o-radial-gradient(bottom left, circle farthest-corner, #ffffff 0%, #cc0000 100%);
background: -ms-radial-gradient(bottom left, circle farthest-corner, #ffffff 0%, #cc0000 100%);
background: -webkit-radial-gradient(bottom left, circle farthest-corner, #ffffff 0%, #cc0000 100%);
height: 200px;
}

Vị trí: bottom center - kích thước: closest-corner, CSS viết:

div {
background: -moz-radial-gradient(bottom center, circle closest-corner, #ffffff 0%, #cc0000 100%);
background: -o-radial-gradient(bottom center, circle closest-corner, #ffffff 0%, #cc0000 100%);
background: -ms-radial-gradient(bottom center, circle closest-corner, #ffffff 0%, #cc0000 100%);
background: -webkit-radial-gradient(bottom center, circle closest-corner, #ffffff 0%, #cc0000 100%);
height: 200px;
}

Vị trí: bottom center - kích thước: farthest-side, CSS viết:

div {
background: -moz-radial-gradient(bottom center, circle farthest-side, #ffffff 0%, #cc0000 100%);
background: -o-radial-gradient(bottom center, circle farthest-side, #ffffff 0%, #cc0000 100%);
background: -ms-radial-gradient(bottom center, circle farthest-side, #ffffff 0%, #cc0000 100%);
background: -webkit-radial-gradient(bottom center, circle farthest-side, #ffffff 0%, #cc0000 100%);
height: 200px;
}

Vị trí: bottom center - kích thước: farthest-corner, CSS viết:

div {
background: -moz-radial-gradient(bottom center, circle farthest-corner, #ffffff 0%, #cc0000 100%);
background: -o-radial-gradient(bottom center, circle farthest-corner, #ffffff 0%, #cc0000 100%);
background: -ms-radial-gradient(bottom center, circle farthest-corner, #ffffff 0%, #cc0000 100%);
background: -webkit-radial-gradient(bottom center, circle farthest-corner, #ffffff 0%, #cc0000 100%);
height: 200px;
}

Vị trí: bottom right - kích thước: farthest-side, CSS viết:

div {
background: -moz-radial-gradient(bottom right, circle farthest-side, #ffffff 0%, #cc0000 100%);
background: -o-radial-gradient(bottom right, circle farthest-side, #ffffff 0%, #cc0000 100%);
background: -ms-radial-gradient(bottom right, circle farthest-side, #ffffff 0%, #cc0000 100%);
background: -webkit-radial-gradient(bottom right, circle farthest-side, #ffffff 0%, #cc0000 100%);
height: 200px;
}

Vị trí: bottom right - kích thước: farthest-corner, CSS viết:

div {
background: -moz-radial-gradient(bottom right, circle farthest-corner, #ffffff 0%, #cc0000 100%);
background: -o-radial-gradient(bottom right, circle farthest-corner, #ffffff 0%, #cc0000 100%);
background: -ms-radial-gradient(bottom right, circle farthest-corner, #ffffff 0%, #cc0000 100%);
background: -webkit-radial-gradient(bottom right, circle farthest-corner, #ffffff 0%, #cc0000 100%);
height: 200px;
}

Những bài viết được đăng mới nhất.

» Công cụ xóa dấu Tiếng việt