CSS3 Thuộc tính hình ảnh viền làm cho hình ảnh thực sự mát mẻ!

Bài viết này là một phần của chúng tôi “Loạt bài hướng dẫn HTML5 / CSS3” – dành riêng để giúp bạn trở thành một nhà thiết kế và / hoặc nhà phát triển tốt hơn. Bấm vào đây để xem thêm các bài viết từ cùng một bộ.

Bài viết này là một phần của chúng tôi- dành riêng để giúp bạn trở thành một nhà thiết kế và / hoặc nhà phát triển tốt hơn.để xem thêm các bài viết từ cùng một bộ.

Tạo đường viền không có gì mới trong HTML & CSS; chúng tôi đã có thể thêm biên giới từ đầu. Bạn có thể đã quen thuộc với các đường viền liền mạch, đường viền chấm, đường viền đứt nét, v.v..

Nhưng, với thuộc tính hình ảnh viền CSS3 mới, việc tạo đường viền trên phần tử HTML ngày càng trở nên tiên tiến hơn; tốt, chỉ cần đặt, bây giờ chúng ta có thể thêm một đường viền bằng cách sử dụng một hình ảnh làm nguồn cho phép chúng ta thêm các đường viền hấp dẫn hơn. Được rồi, bây giờ hãy xem khách sạn này hoạt động như thế nào.

Cú pháp và Hỗ trợ Trình duyệt

Hình ảnh đường viền trong CSS3 được xác định bằng cú pháp tốc ký sau:

 viền hình ảnh: [nguồn hình ảnh] [lát] [chiều rộng] [đầu ra] [lặp lại];

Cú pháp ở trên là phiên bản chính thức từ W3C chỉ được hỗ trợ trong Chrome, trong khi Opera, Firefox và Safari vẫn yêu cầu phiên bản tiền tố (-o-, -moz-, -webkit-) và Internet Explorer hoàn toàn không hỗ trợ tài sản này.

Hơn nữa, [chiều rộng] và [ban đầu] giá trị trong này hình ảnh viền thuộc tính chưa được hỗ trợ trong bất kỳ trình duyệt nào, tuy nhiên, giá trị độ rộng có thể được thay thế bằng cách sử dụng chiều rộng biên giới bất động sản.

Vì vậy, trong ngắn hạn, bây giờ chúng ta chỉ có thể áp dụng giá trị của [nguồn hình ảnh], [lát] và [nói lại] .

 viền hình ảnh: [nguồn hình ảnh] [lát] [lặp lại];

Hình ảnh lát

Trước khi chúng tôi tiến hành chứng minh tài sản này, hãy nói về “lát hình ảnh” đầu tiên vì nó là một cái gì đó mới trong việc tuyên bố một tài sản. Phần hình ảnh ở đây sẽ xác định phần cắt của hình ảnh tương ứng lấy điểm bắt đầu từ đỉnh, phải, dưới và trái của các cạnh hình ảnh sau đó cũng sẽ chia hình ảnh thành chín phần, như được minh họa với hình ảnh sau.

Trong hình trên, bạn sẽ thấy rằng các phần 1, 3, 7 và 9 sẽ trở thành các góc của biên giới, và các phần 2, 4, 6 và số 8 sẽ trở thành cạnh hoặc đường viền, đảm bảo rằng phần mà nó sẽ trở thành cạnh có thể lặp lại hoặc có thể kéo dài.

Giá trị của các lát có thể được khai báo bằng một pixel đơn vị hoặc tỷ lệ phần trăm (%) đơn vị đo lường linh hoạt.

tham khảo thêm:

• Nền CSS và Biên giới cấp 3

Tạo khung ảnh

Bây giờ, hãy chứng minh tài sản trong một ví dụ thực tế.

Lần này, chúng tôi sẽ thực hiện hình ảnh viền thuộc tính để tạo khung ảnh và chúng tôi sẽ sử dụng hình ảnh bên dưới làm nguồn. Chúng tôi đã đo cẩn thận hình ảnh để có thể cắt, lặp lại và kéo dài đúng cách bất kể chiều rộng nội dung và chiều cao.

Chú thích: bạn có thể tải hình ảnh trên từ liên kết này.

Ngoài ra, trong phần trình diễn này, chúng tôi sẽ sử dụng Cinem Đoạn tuyệt đẹp này của From Me to You làm ảnh.

(Nguồn hình ảnh: Từ tôi đến bạn)

Đánh dấu

Đánh dấu là đơn giản như thế này:

Đừng quên thay thế hình ảnh_2 / css3-Border-image-property-Making-photos-really-cool_3.jpg với hình ảnh của riêng bạn.

Các phong cách

Và sau đó, hãy cho nó một khung bằng cách sử dụng hình ảnh viền.

Nếu bạn nhìn vào hình ảnh trên, chiều rộng hình ảnh của chúng tôi là 180px Tổng cộng. Giá trị này sau đó có thể được chia thành 6 mà mỗi bộ phận 30px; và vì vậy chúng tôi sẽ cắt hình ảnh cho 30px.

Nếu bạn sử dụng giá trị độ dài cho lát cắt, bạn nên loại trừ px đơn vị, vì nó sẽ tự động được dịch sang pixel, nhưng nếu bạn quyết định sử dụng tỷ lệ phần trăm, bạn vẫn sẽ cần phải thêm (%).

Đối với sự lặp lại hình ảnh, chúng tôi sẽ sử dụng mặc định; nói lại. Ngoài ra, bạn có thể sử dụng căng ra và đừng lo lắng, hình ảnh đường viền sẽ vẫn duyên dáng.

 img Border-image: url ("hình ảnh / frame.png") lặp lại 30; -o-Border-image: url ("hình ảnh / frame.png") 30 lặp lại; -moz-Border-image: url ("hình ảnh / frame.png") lặp lại 30; -webkit-Border-image: url ("hình ảnh / frame.png") lặp lại 30; đường viền rộng: 30px;  

Ngoài ra, chúng tôi cũng muốn đặt hình ảnh ở giữa cửa sổ trình duyệt cũng như thêm một kết cấu nền cho tài liệu để làm cho nó hấp dẫn hơn.

 html nền: url ('hình ảnh / lightnotefibers.png');  .wrapper lề: 20px tự động; chiều cao: 476px; chiều rộng: 675px; văn bản-align: trung tâm;  

Được rồi, tôi nghĩ chúng ta đã xong việc ở đây, bây giờ hãy xem nó trong trình duyệt.

• Bản giới thiệu
• Tải xuống nguồn

Bạn có cảm thấy như bạn đang nhìn vào một bức tranh ma thuật ở Hogwarts?

Suy nghĩ cuối cùng

Điều này hình ảnh viền chắc chắn là một bổ sung tốt đẹp trong gia đình CSS3; chúng tôi không còn bị giới hạn trong các biên giới đơn giản.

Và trong bài đăng này, chúng tôi đã chỉ cho bạn cách chúng ta có thể tạo khung hình mà không phải lo lắng về nội dung hoặc trong trường hợp này là kích thước của ảnh (chiều rộng và chiều cao). Chiều cao và chiều rộng có thể linh hoạt, miễn là nguồn viền có thể lặp lại hoặc có thể kéo dài.

Cuối cùng, nếu bạn vẫn còn một chút bối rối về hình ảnh viền, có một công cụ bạn có thể sử dụng để giúp bạn tạo một công cụ dễ dàng hơn: công cụ hình ảnh viền