2011-10-16 14 views
6

Bất kỳ câu hỏi nào khác liên quan đến câu hỏi này hoặc có câu trả lời cho cú pháp webkit OLD, không phải cú pháp mới hoặc không giải thích cách áp dụng đường viền-đường viền cho CHỈ một bên.Độ dốc đường viền bên phải chỉ với cú pháp gradient webkit mới hơn, còn trình duyệt nào hỗ trợ điều này và cách thực hiện trong trình duyệt đó?

Trình duyệt nào hỗ trợ đường viền gradient thông qua CSS mà không phải sử dụng hình ảnh?

Tôi có một ví dụ tại JsFiddle bên dưới, nó cho thấy một gradient được áp dụng cho CHỈ biên giới bên phải, làm cách nào để làm cho trình duyệt chéo này tương thích với tất cả các trình duyệt hiện đang hỗ trợ các đường viền CSS? Tôi tin rằng cú pháp Gradient trong ví dụ của tôi là cú pháp cũ được sử dụng bởi webkit, họ cập nhật cú pháp một năm hoặc lâu hơn trước đây tôi nghĩ, tôi muốn sử dụng cú pháp mới nhưng tôi thất bại với mọi nỗ lực. Tôi không hiểu những gì trong cú pháp là nói gradient để ONLY được áp dụng cho phía bên phải, tôi đã cố gắng điều chỉnh số nhưng tôi chỉ không hiểu những gì đang làm nó. cảm ơn bạn rất nhiều.

http://jsfiddle.net/nicktheandroid/MNax7/1/


Ngoài ra, tôi có một ví dụ khác dưới đây, nó sử dụng các cú pháp CSS gradient mới rằng tất cả các trình duyệt sử dụng, nhưng gradient được áp dụng cho tất cả các biên giới, tôi muốn nó áp dụng cho ONLY đường viền phải, giống như ví dụ trên.

http://jsfiddle.net/nicktheandroid/b875w/2/

Trả lời

5

Bạn cần các giá trị liên quan đến độ dày đường viền trong mã của bạn:

0 100% 0 0/0 15px 0 0 stretch; 

Bốn chữ số đầu tiên là kích hoạt của gradient cho bốn giáp (top, right, bottom, trái) vì vậy đường viền phải được đặt thành 100% trong khi các đường khác được hủy kích hoạt.

Bốn số sau/là chiều rộng của đường viền, rõ ràng trên cùng, dưới cùng và bên trái được đặt thành 0 chiều rộng và phải là 15px.

Tùy chọn kéo dài cho gradient kéo dài toàn bộ chiều dài đường viền, tùy chọn khác tròn nhưng được sử dụng nhiều hơn với hình ảnh thực tế (image.jpg) để quyết định xem có lặp lại hình ảnh hay kéo dài chiều dài. Tôi không biết liệu có thêm tùy chọn nào khác hay không ..

Here is an updated demo, bằng cách sử dụng cú pháp mới của bạn chỉ với đường biên phải được kích hoạt.

0

Đặt image-slice:1 vào div' s css thuộc tính của bạn.

Các vấn đề liên quan