CSS3 tròn và elip Grad Grad [Mẹo CSS3]
Hôm nay chúng ta sẽ tiếp tục thảo luận về Học sinh CSS3. Trong bài trước chúng tôi đã chỉ cho bạn cách tạo Độ dốc tuyến tính. Lần này chúng tôi sẽ đề cập đến họ hàng của họ, Sinh viên tròn và elip.
Cú pháp Gradient
Độ dốc trong CSS3 được khai báo bằng hình nền bất động sản. Điều này là để tương thích tốt hơn khi chúng ta cũng cần thêm màu nền trong một bộ quy tắc duy nhất, để chúng không va chạm với nhau. Sau đó, để tạo gradient xuyên tâm, chúng ta chỉ cần gọi nó bằng cái này radial-gradient () chức năng. Có bốn giá trị được bao gồm trong hàm để đặt gradient đúng.
Giá trị đầu tiên xác định vị trí gradient. Chúng tôi có thể sử dụng một từ khóa mô tả như trên, dưới, giữa và trái hoặc chúng tôi cũng có thể cụ thể hơn như, 50% 50% để đặt gradient ở trung tâm hoặc 0% 0% để đặt gradient bắt đầu tại trên cùng bên trái.
Giá trị thứ hai xác định hình dạng và kích thước gradient, Có hai đối số để định hình độ dốc, đầu tiên là hình elip đó là mặc định và thứ hai là vòng tròn.
Và cho kích thước gradient, chúng ta có thể chọn một trong sáu đối số sau đây.
| Giá trị | Sự miêu tả |
|---|---|
gần nhất | Hình dạng của gradient gặp cạnh của hộp gần trung tâm nhất của nó (đối với hình tròn) hoặc đáp ứng cả cạnh dọc và ngang gần trung tâm nhất (đối với hình elip). |
góc gần nhất | Hình dạng của gradient có kích thước để nó chính xác đáp ứng góc gần nhất của hộp từ tâm của nó. |
phía xa nhất | Tương tự như cạnh gần nhất, ngoại trừ hình dạng có kích thước để đáp ứng cạnh bên của hộp xa nhất so với tâm của nó (hoặc các mặt dọc và ngang). |
góc xa nhất | Hình dạng của gradient có kích thước để nó đáp ứng chính xác góc xa nhất của hộp từ tâm của nó. |
chứa | Một từ đồng nghĩa cho |
che | Một từ đồng nghĩa cho |
Nguồn bảng: Mạng lưới nhà phát triển Mozilla.
Cuối cùng, thứ ba và thứ tư xác định sự kết hợp màu sắc. Vì vậy, đây là cách chúng tôi viết cú pháp để tạo Hình elip độ dốc, và lần này chúng ta sẽ sử dụng che đối với kích thước gradient, vì vậy nó sẽ lan rộng ra, bao phủ container;
body hình nền: radial-gradient (trung tâm, bìa hình elip, # ffeda3, # ffc800);
Để tạo ra Thông tư gradient chúng ta có thể làm theo cách này:
body hình nền: radial-gradient (trung tâm, bìa hình tròn, # ffeda3, # ffc800);
Như tên của nó, hình dạng gradient sẽ là một vòng tròn.
Hỗ trợ trình duyệt
Tuy nhiên, chỉ cần lưu ý, tất cả các trình duyệt vẫn đang trong quá trình cung cấp hỗ trợ đầy đủ cho tính năng này, vì vậy chúng vẫn cần tiền tố của nhà cung cấp. Do đó, toàn bộ cú pháp hoàn chỉnh sẽ hoạt động trong tất cả các trình duyệt hiện đại - IE10 +, Firefox 3.6+, Chrome 4.0+, Safari 4.0+ và Opera 11+ - sẽ trông giống như thế này;
body hình nền: radial-gradient (đáy trung tâm, bìa hình elip, # ffeda3, # ffc800); hình nền: -o-radial-gradient (đáy trung tâm, bìa hình elip, # ffeda3, # ffc800); hình nền: -ms-radial-gradient (đáy trung tâm, bìa hình elip, # ffeda3, # ffc800); hình nền: -moz-radial-gradient (đáy trung tâm, bìa hình elip, # ffeda3, # ffc800); hình nền: -webkit-radial-gradient (đáy trung tâm, bìa hình elip, # ffeda3, # ffc800);
Kiểm tra bản demo hoặc tải xuống nguồn để chơi xung quanh với độ dốc.
- Bản giới thiệu
- Tải xuống nguồn
Từ cuối cùng
Tạo gradient xuyên tâm CSS3 không khó như bạn nghĩ, và đặc biệt là khi bạn nhận được sự trợ giúp từ các công cụ này để tạo mã:
- Học sinh Colorzilla
- Gradientoo
Độ dốc xuyên tâm chỉ là một loại tiện ích CSS3, chúng tôi sẽ tiếp tục thảo luận về chủ đề này trong các bài đăng trong tương lai, vì vậy hãy theo dõi Hongkiat.com
