CSS3 là thực sự bắt đầu tập hợp lực với rất nhiều các lệnh được nêu trong dự thảo làm việc CSS3 được hỗ trợ bởi Firefox, Safari và Google Chrome. Chúng tôi nghĩ rằng chúng tôi muốn đặt cùng một số mục yêu thích của của chúng tôi. Trước khi chúng tôi bắt đầu CSS3 lệnh yêu cầu cú pháp trình duyệt cụ thể cho họ để làm việc.

Đối với Mozilla Firefox, chúng ta cần phải sử dụng-moz-tiền tố, ví dụ:

-Moz-biên giới-bán kính:

Và đối với Safari-webkit-tiền tố, ví dụ:

-Webkit-biên giới-bán kính:

1. Biên giới bán kính

Biên giới CSS3 lệnh bán kính tạo ra các góc cong trên một phần tử . Thay vì sử dụng 4 hoặc nhiều hình ảnh để tạo ra các góc cong sử dụng các lệnh sau đây:

/ * Mozilla Firefox * /
-Moz-biên giới-bán kính: 20px;

/ * Safari và Google Chrome * /
-Webkit biên giới-bán kính: 20px;
}

2. Box bóng

Bóng tối có thể được áp dụng cho các phần tử bằng cách sử dụng lệnh bóng hộp CSS3. Các bóng hộp chấp nhận ba giá trị số cộng với một màu để áp dụng hiệu ứng này. Những con số này là:

1. Khoảng cách ngang bù đắp của bóng tối - Một giá trị tích cực có nghĩa là bóng tối sẽ diễn viên ở bên phải và giá trị tiêu cực bên trái
2. Khoảng cách theo chiều dọc bù đắp của bóng tối - Một giá trị tích cực có nghĩa là bóng sẽ diễn viên dưới đây và một giá trị tiêu cực trên
3. Làm thế nào mờ bạn muốn bóng tối

Với việc bổ sung của một giá trị màu sắc, bóng được hoàn thành:

/ * Mozilla Firefox * /
-Moz-box-shadow: 5px 5px 5px # b6ebf7;

/ * Safari và Google Chrome * /
-Webkit-box-shadow: 5px 5px 5x # b6ebf7;

3. Minh bạch hoặc RGBA

Minh bạch đã luôn luôn được khó khăn. Trình duyệt khác nhau trong lịch sử đã áp dụng minh bạch bằng cách sử dụng các lệnh khác nhau. Tiếp tục không thống nhất này qua trình duyệt, chúng tôi có thêm tài sản CSS3 mới nền RGBA, tuy nhiên về nguyên tắc lệnh này là hợp lý hơn. Lệnh này bao gồm 4 giá trị đầu tiên, thứ hai và thứ ba là, các giá trị màu đỏ, xanh và xanh (0-255) theo sau bởi các kênh alpha hoặc minh bạch (0-1).

Đối với các lệnh RGBA các tiền tố trình duyệt cụ thể (-moz,-webkit) không bắt buộc:

# Box3 {
background-color: RGBA (110, 142, 185, 0,5);
}

Lệnh màu nền cho biết thêm một nền màu xanh xám tốt đẹp tại 0,5 hoặc opacity 50% trong các trình duyệt hiểu CSS3 RGBA tài sản.

Thật không may Internet Explorer cũng sẽ cố gắng để làm cho màu nền lệnh nhưng không hiểu RGBA. Để đảm bảo rằng màu nền cũng được thiết lập trong IE một hack IE chỉ là bắt buộc. Trong ví dụ sau: giả chọn con cuối cùng mà Internet Explorer không hiểu được sử dụng để loại trừ nó.

cơ thể: cuối cùng con # box3 {
/ * Loại trừ tất cả các trình duyệt IE bằng cách sử dụng: con * /
background-color: RGBA (110, 142, 185, 0,5) quan trọng;
}

4. Cột

Khả năng thêm các cột đã được thêm vào CSS3. Chứ không phải là yếu tố nổi trong các thùng chứa, chúng ta có thể thiết lập số lượng cột, chiều rộng và quy tắc:

/ * Mozilla Firefox * /
-Moz-column-count: 2;
-Moz-cột-gap: 20px;
-Moz-cột quy tắc: 1px solid # 6e8eb9;

/ * Safari và Google Chrome * /
-Webkit-cột-count: 2;
-Webkit-cột-gap: 20px;
-Webkit cột quy tắc: 1px solid # 6e8eb9;
}

5. Nhiều hình nền

Bối cảnh hình ảnh luôn luôn được hạn chế khi nói đến CSS do thực tế, bạn chỉ có thể áp dụng một hình nền cho mỗi yếu tố. Đây không phải là trường hợp với CSS3 cho phép nhiều hình ảnh cho mỗi thành phần chỉ đơn giản là dấu phẩy tách chúng.

Để đặt một hình ảnh trên cả hai bên trái và bên phải của một yếu tố bạn có thể sử dụng các lệnh sau đây, với một chút phong cách:

padding: 0 20px;
}

Lệnh này sẽ được mis-được đưa ra bởi Internet Explorer vì nó không chấp nhận 2 hình ảnh nền trên một yếu tố duy nhất. Một loại trừ tất cả các hack IE là cần thiết.

# Box5 blockquote {
/ * Đối với tất cả các trình duyệt, chỉ là một trích dẫn nội dung bài viết này mở * /
background: url (/ i / quotel.gif) 0 0 không lặp lại;
padding: 0 20px;
}

cơ thể: cuối cùng con box5 blockquote {
/ * Loại trừ tất cả các trình duyệt IE bằng cách sử dụng: con * /
/ * Sau đó, hai hình ảnh * /
background: url (/ i / quotel.gif) không lặp lại 0 0, url (/ i / quoter.gif) không lặp lại 100% 0;
}

6. Bối cảnh gradient

CSS3 gradient nền cực kỳ linh hoạt và có thể được sử dụng để tạo ra các mẫu phức tạp. Đơn giản nhất, độ dốc tuyến tính CSS cho phép một gradient để được áp dụng cho một phần tử từ trên xuống dưới và từ trái sang phải.

Đây là ví dụ của một gradient CSS3 trong Mozilla Firefox áp dụng một gradient ánh sáng màu xanh ở dưới cùng của một hộp chỉ có 20% chiều cao của hộp

Safari sử dụng một cách tiếp cận ít trực quan nhưng linh hoạt hơn bằng cách sử dụng các giá trị dừng lại màu sắc. Một ví dụ về các mã cụ thể của Safari sau (lưu ý các tuyến tính được bao gồm trong dấu ngoặc đơn thay vì bên ngoài):

# Box8 {
nền:-webkit-gradient (tuyến tính, dưới cùng bên trái, phía trên bên trái, màu sắc-stop (0, # b6ebf7), màu sắc cửa (0,20, # fff));
}

7. Rotation

CSS3 cũng cho phép luân chuyển của các yếu tố bằng cách sử dụng lệnh biến đổi, xoay sở hữu chấp nhận bằng cấp như một tham số.

<code> # box9 {
-Moz-transform: rotate (2deg);
-Webkit-transform: rotate (2deg);
} </ Code>

8. Phác thảo

Outilines được bao gồm trong các đặc điểm kỹ thuật CSS3 và cho phép cả một biên giới và phác thảo được áp dụng cho một yếu tố duy nhất.

Các tài sản phác thảo là giống hệt lệnh biên giới. Tuy nhiên, sở hữu thêm bù đắp cho phép biên giới phải được di chuyển xa hơn bên trong hoặc bên ngoài của phần tử.

Nộp theo: Css bởi admin