Background Gradient | CSS3 | Học Web Chuẩn

Trang chủ » Trong Css Gradient Có Mấy Kiểu Thiết Lập đổi Màu » Background Gradient | CSS3 | Học Web Chuẩn

Có thể bạn quan tâm

Background gradient
  • Trang chủ
  • Tham khảo
  • CSS
  • CSS3
  • Background gradient

Đị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ác dạng background gradient

LINEAR

Cấu trúc

tag { background: -moz-linear-gradient(vị-trí, mã-màu-1 n1%, mã-màu-2 n2%,..., mã-màu-n n%); background: -o-linear-gradient(vị-trí, mã-màu-1 n1%, mã-màu-2 n2%,..., mã-màu-n n%); background: -ms-linear-gradient(vị-trí, mã-màu-1 n1%, mã-màu-2 n2%,..., mã-màu-n n%); background: -webkit-gradient(linear,vị-trí,color-stop(0.n1, mã-màu-1),color-stop(0.n2, mã-màu2),...,color-stop(0.n, mã-màu-n)); }

Trong đó:

  • vị-trí: đượ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).

    • Tính theo % : đối với -moz-, -o-, -ms-.
    • Tính theo giá trị thập phân (từ 0 - 1) : đối với -webkit-.

Bảng giá trị vị-trí dành cho trình duyệt

Giá trị vị-trí hiển thị
-moz-, -o-, -ms- -webkit-
bottom left bottom,left top right bottom,right top
top left top,left bottom right top,right bottom
left left top,right top left bottom,right bottom
right righ top,left top right bottom,left bottom
left bottom left bottom,right top
left top left top,right bottom
right bottom right bottom,left top
right top right 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 left closest-side
closest-corner
farthest-side
farthest-corner
top center closest-side
closest-corner
farthest-side
farthest-corner
top right closest-side
closest-corner
farthest-side
farthest-corner
center left closest-side
closest-corner
farthest-side
farthest-corner
center center closest-side
closest-corner
farthest-side
farthest-corner
Center right closest-side
closest-corner
farthest-side
farthest-corner
bottom left closest-side
closest-corner
farthest-side
farthest-corner
bottom center closest-side
closest-corner
farthest-side
farthest-corner
bottom right closest-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 left closest-side
closest-corner
farthest-side
farthest-corner
top center closest-side
closest-corner
farthest-side
farthest-corner
top right closest-side
closest-corner
farthest-side
farthest-corner
center left closest-side
closest-corner
farthest-side
farthest-corner
center center closest-side
closest-corner
farthest-side
farthest-corner
Center right closest-side
closest-corner
farthest-side
farthest-corner
bottom left closest-side
closest-corner
farthest-side
farthest-corner
bottom center closest-side
closest-corner
farthest-side
farthest-corner
bottom right closest-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

Trình duyệt và hệ điều hành hỗ trợ

Yêu cầu phiên bản trình duyệt và hệ điều hành tối thiểu được hỗ trợ cho thuộc tính background gradient:

Trình duyệt PC Smartphone - Tablets
Internet Explorer Firefox Opera Chrome Safari IOS Android Window phone
background gradient 10 12 -moz- 12 -o- 20 -webkit- 5.1 -webkit- 3.2 -webkit- 2.1 -webkit- 8

Link liên quan

  • HTML/XHTML
  • CSS
  • class
  • <html></html>
  • <head></head>
  • <body></body>
  • <p></p>

background

Nhiều background

CSS

HƯỚNG DẪN HỌC

  • Hướng dẫn học
  • Hướng dẫn học XHTML & HTML5
  • Hướng dẫn học CSS
  • Hướng dẫn học CSS3
  • Hướng dẫn học Responsive
  • Hướng dẫn học ES6
  • Hướng dẫn học React.js
  • Hướng dẫn học jQuery
  • Hướng dẫn học PHP
  • Hướng dẫn học Laravel
  • Hướng dẫn học Wordpress
  • Hướng dẫn học Webpack
  • Hướng dẫn học SCSS

THAM KHẢO

Thuộc tính CSS3

  • animation
  • appearance
  • backface-visibility
  • background-clip
  • background-origin
  • background-size
  • background gradient
  • Nhiều background
  • border-image
  • border-radius
  • box-align
  • box-direction
  • box-flex
  • box-ordinal-group
  • box-orient
  • box-pack
  • box-sizing
  • box-shadow
  • column
  • @font-face
  • font-size-adjust
  • @keyframes
  • nav
  • opacity
  • perspective
  • perspective-origin
  • resize
  • text-justify
  • text-overflow
  • text-shadow
  • transform
  • transform-origin
  • transform-style
  • transition
  • word-break
  • word-wrap

Thuộc tính CSS3 chưa được hỗ trợ bởi trình duyệt

  • grid-columns
  • grid-rows
  • hanging-punctuation
  • icon
  • punctuation-trim
  • rotation
  • target
  • text-outline
  • text-wrap

Tham khảo CSS

  • CSS - Tham khảo
  • CSS - Bộ chọn (selectors)
  • CSS - Thuộc tính
  • CSS3 - Tham khảo
  • CSS3 - Bộ chọn (selectors)
  • CSS3 - Thuộc tính
  • Xem thêm ví dụ về CSS

Tham khảo HTML/XHTML

  • Tham khảo HTML/XHTML
  • Tag theo function
  • Tag theo giá trị DTD
  • Tham khảo HTML4/XHTML
  • Tham khảo HTML5
  • Xem thêm ví dụ về HTML

Tham khảo JQUERY

  • jQuery - Tham khảo
  • jQuery - Cài đặt và sử dụng
  • jQuery - Bộ chọn (selectors)
  • jQuery - Hàm (function)
  • jQuery - Ajax

Tham khảo Thêm

  • Lang codes
  • Font chữ
  • Mã ký tự
  • MIME
  • Đơn vị trong HTML & CSS
  • Giá trị màu trong HTML & CSS
  • Thuộc tính tổng quát

CHUYÊN ĐỀ

  • Chuyên đề
  • Chuyên đề HTML/CSS
  • Chuyên đề HTML5/CSS3
  • Chuyên đề jQuery/JS
  • jQuery/JS plugin

GÓP Ý - LIÊN HỆ

  • CÔNG CỤ TẠO CSS3CSS3 GENERATOR
  • BỘ CÔNG CỤGENERATOR TOOLS
  • CÔNG CỤ HỖ TRỢWEB TOOLS
  • CÔNG CỤ TẠO RANDOMRANDOM GENERATOR
  • CÔNG CỤ KIỂM TRA RESPONSIVE TEST
  • CHIA SẺ HAYWEB & TOOLS
  • Follow us on hocwebchuan.com
  • Short URL
  • Rabbie theme

Từ khóa » Trong Css Gradient Có Mấy Kiểu Thiết Lập đổi Màu