Thứ Năm, 11 tháng 6, 2015

Trang chủ » » Thuộc tính background gradient

Thuộc tính background gradient

Đăng bởi Không có bình luận học thiết kế web
Hướng dẫn làm web đẹp với các thuộc tính css - tài liệu css

Bảng giá trị vị-trí dành cho trình duyệt
Giá trị vị-tríhiển thị
-moz-, -o-, -ms--webkit-
bottomleft bottom,left top

right bottom,right top
topleft top,left bottom

right top,right bottom
leftleft top,right top

left bottom,right bottom
rightrigh top,left top

right bottom,left bottom
left bottomleft bottom,right top
left topleft top,right bottom
right bottomright bottom,left top
right topright top,left bottom

CIRCLE

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 xác định theo bảng giá trị bên dưới.
  • kích-thước: được xác định theo bảng giá trị bên dưới
  • mã-màu: giá trị màu, tham khảo.
  • n: độ tràn màu (hay độ trộn lẫn), giá trị tính theo %.
Bảng giá trị vị-trí và kích-thước
Giá trịhiển thị
vị-tríkích-thước
top leftclosest-side
closest-corner
farthest-side
farthest-corner
top centerclosest-side
closest-corner
farthest-side
farthest-corner
top rightclosest-side
closest-corner
farthest-side
farthest-corner
center leftclosest-side
closest-corner
farthest-side
farthest-corner
center centerclosest-side
closest-corner
farthest-side
farthest-corner
Center rightclosest-side
closest-corner
farthest-side
farthest-corner
bottom leftclosest-side
closest-corner
farthest-side
farthest-corner
bottom centerclosest-side
closest-corner
farthest-side
farthest-corner
bottom rightclosest-side
closest-corner
farthest-side
farthest-corner

ELLIPSE

Cấu trúc
div {
        background: -moz-radial-gradient(vị-trí, ellipse kích-thước, mã-màu-1 n1%, mã-màu-2 n2%);
        background: -o-radial-gradient(vị-trí, ellipse kích-thước, mã-màu-1 n1%, mã-màu-2 n2%);
        background: -ms-radial-gradient(vị-trí, ellipse kích-thước, mã-màu-1 n1%, mã-màu-2 n2%);
        background: -webkit-gradient(vị-trí, ellipse kích-thước, mã-màu-1 n1%, mã-màu-2 n2%);
}
Trong đó:
  • vị-trí: được xác định theo bảng giá trị bên dưới.
  • kích-thước: được xác định theo bảng giá trị bên dưới
  • mã-màu: giá trị màu, tham khảo.
  • n: độ tràn màu (hay độ trộn lẫn), giá trị tính theo %.
Bảng giá trị vị-trí và kích-thước
Giá trịhiển thị
vị-tríkích-thước
top leftclosest-side
closest-corner
farthest-side
farthest-corner
top centerclosest-side
closest-corner
farthest-side
farthest-corner
top rightclosest-side
closest-corner
farthest-side
farthest-corner
center leftclosest-side
closest-corner
farthest-side
farthest-corner
center centerclosest-side
closest-corner
farthest-side
farthest-corner
Center rightclosest-side
closest-corner
farthest-side
farthest-corner
bottom leftclosest-side
closest-corner
farthest-side
farthest-corner
bottom centerclosest-side
closest-corner
farthest-side
farthest-corner
bottom rightclosest-side
closest-corner
farthest-side
farthest-corner

Ví dụ

Xem thêm ví dụ

HTML viết:

<html>
<head></head>
<body>
<p>Background gradient</p>
</body>
</html>

Hiển thị trình duyệt khi chưa có CSS:

Background gradient

Background gradient dạng linear, CSS viết:

div {
        background-color: #cc0000;
        background: -moz-linear-gradient(bottom, #cc0000 30%, #330000 70%);
        background: -o-linear-gradient(bottom, #cc0000 30%, #330000 70%);
        background: -ms-linear-gradient(bottom, #cc0000 30%, #330000 70%);
        background: -webkit-gradient(linear,left bottom,left top,color-stop(0.3, #cc0000),color-stop(0.7, #330000));
        height: 300px;
        width: 300px;
}

Hiển thị trình duyệt khi có CSS:

Background gradient

Đào tạo làm web tại Hà Nôi
Đào tạo lái xe tại Hà Nội

0 nhận xét:

Đăng nhận xét