Đường viền trong CSS

Bốn ( viền: rắn 6px #888; nền: #fff; chiều rộng: 312px; chiều cao tối thiểu: 312px; ) .four div ( chiều rộng: 300px; chiều cao tối thiểu: 300px; nền: #222; lề: tự động 6px; tràn : ẩn giấu)

Phần tử bên ngoài có một ít kích thước lớn hơn, tạo ra ảo giác về một khung hình đôi.

Cách 5: thuộc tính border-image

Một kỹ thuật mới khác là thuộc tính hình ảnh viền CSS3 thường bị lãng quên:

Năm ( border-width: 12px; -webkit-border-image: url(multiple-borders.gif) 12 12 12 12 lặp lại; -moz-border-image: url(multiple-borders.gif) 12 12 12 12 lặp lại; border-image: url(multiple-borders) 12 12 12 12 lặp lại; /* cho Opera */ )

Bạn có biết một phương pháp khác?

Tất nhiên, các phương pháp được biết đến từ lâu và được sử dụng rộng rãi đều được thu thập ở đây. Nhưng có thể bạn biết một thủ thuật. Chia sẻ với độc giả trong phần bình luận.

Trong quá trình thiết kế trang web, nhiều người mới xây dựng trang web thắc mắc làm thế nào để thay đổi phông chữ, kích thước và màu sắc của tiêu đề. Vâng, đây thực sự là một lựa chọn tuyệt vời mà bạn có thể thêm chút mới mẻ vào thiết kế trang web của mình. Nhưng có một câu hỏi không kém phần hấp dẫn khác: làm thế nào để tạo khung html.

Khung html dùng để làm gì?

Thực ra không có chức năng gì đặc biệt phần tử này không mang theo. Tuy nhiên, văn bản được đóng trong khung được thiết kế đẹp mắt vẫn khơi dậy sự quan tâm nhất định của người đọc. Do đó, khung bao quanh văn bản có thể được gọi một cách an toàn là một trong những cách để nhấn mạnh tầm quan trọng của văn bản được đóng khung.

Tính năng tạo khung bao quanh văn bản

Tất nhiên, các biến thể trong thiết kế khung sử dụng CSS nhiều hơn nữa, nhưng đó là một câu chuyện hoàn toàn khác. Ngoài ra, phương pháp này phù hợp với những người xây dựng trang web cao cấp hơn. Tôi nghĩ bạn và tôi và với sự trợ giúp của việc chỉnh sửa Mã HTML bạn sẽ có được một khung html đẹp mắt không kém.

Ở giai đoạn đầu tiên, bạn cần hiểu rằng khung có thể được tạo cho tất cả mọi người phần tử html bất kể nó là loại thẻ gì

,

, , vân vân.

Đổi lại, có sự khác biệt giữa các khung của phần tử nội tuyến và khối.

Khung của loại tích hợp được đặt bên trong các thẻ, hay nói đúng hơn là người chịu trách nhiệm về nó hiển thị html mã được đặt giữa các thẻ nhất định. Kết quả là, chúng ta nhận được một khung html xung quanh văn bản mà chúng ta cần viết một số lệnh nhất địnhđể thiết lập lề nội bộ.

Các khung khối được hình thành trên toàn bộ chiều rộng của khối, điều này dẫn đến nhu cầu chỉ định các lệnh liên quan đến giới hạn chiều rộng.

Tất nhiên, để tạo văn bản theo khung html, chúng ta sẽ phải chuyển sang các kiểu có sẵn. Phương pháp này sẽ phù hợp nhất để làm nổi bật một số cụm từ, đoạn văn riêng lẻ trong văn bản và hình ảnh. Nếu bạn cần làm nổi bật một phần cụ thể của mẫu được hiển thị trên tất cả các trang của trang web, việc chỉnh sửa tệp style.css của mẫu là hợp lý.

Cách tạo khung bao quanh văn bản trong html

Tôi nghĩ có rất nhiều lý thuyết. Đã đến lúc luyện tập. Ví dụ: tôi sẽ đặt trong một khung màu xanh nhạt tươi sáng với nền màu xám một trong những đề xuất quan trọng của bài viết này.

Tâm điểm! Các kiểu tích hợp hoạt động hoàn hảo và không gây tổn hại đến tính hợp lệ HTML của trang web.

Để thực hiện cùng một khung, bạn cần tham khảo thẻ

ĐỀ XUẤT CỦA BẠN.

Vì trong trong ví dụ nàyđược xây dựng trong phong cách css, Tôi cho rằng việc giới thiệu cho bạn từng người trong số họ cũng quan trọng không kém.

1. ranh giới– thuộc tính chịu trách nhiệm hiển thị khung. Để đơn giản hóa công việc, tôi không chỉ định riêng từng thuộc tính - border-width (độ dày của viền khung), border-color (màu khung html). Thay vào đó, tôi rút ngắn mã html một chút bằng cách viết tất cả các thuộc tính sau dấu hai chấm.

Để thay đổi diện mạo của khung, chỉ cần thay đổi giá trị chất rắn. Các ranh giới khung sau đây tồn tại:

Sườn núi - nhẹ nhõm.

Chấm - chấm.

Gấp đôi.

Nét đứt - chấm.

Rắn - vững chắc.

2. phần đệm– một thuộc tính chịu trách nhiệm về khoảng cách giữa khung và đối tượng được bao bọc trong đó.

Nếu muốn, bạn có thể thử nghiệm các kiểu nhiều hơn một chút bằng cách thêm vào số lượng lệnh được đặt giữa thẻ mở và thẻ đóng

Tài sản lề. Bằng cách này, bạn có thể thụt lề các phần tử nằm ngoài khung.

để thay đổi bối cảnh Chỉ cần đăng ký thuộc tính màu nền, chỉ định mã của màu mong muốn sau dấu hai chấm là đủ.

Khung xung quanh hình ảnh html Nó được thực hiện theo cách tương tự, vì vậy bạn sẽ không gặp bất kỳ vấn đề gì với nó. Điều duy nhất mà người mới bắt đầu cần biết là để hiển thị nó, các thuộc tính phải được viết trong một thẻ duy nhất .

Tóm lại, chúng ta có thể nói rằng để tạo khung xung quanh hình ảnh hoặc văn bản, chỉ cần mở màn hình hiển thị mã html của bài viết và viết các thuộc tính đặc biệt trong đó giữa các thẻ nhất định là đủ.

Cảm ơn bạn đã quan tâm và hẹn sớm gặp lại trên các trang của Stimylrosta.

Tìm thấy trong văn bản lỗi ngữ pháp? Vui lòng báo cáo điều này với quản trị viên: chọn văn bản và nhấn tổ hợp phím nóng Ctrl+Enter

Tài sản Đường viền CSS Nó có tác dụng tạo đường viền của một đối tượng, cụ thể là độ dày của khung, màu sắc và kiểu dáng của nó. Thuộc tính này được sử dụng rộng rãi trong HTML. Bạn có thể tạo nhiều hiệu ứng khác nhau để cảm nhận rõ hơn nội dung trên trang. Ví dụ: thiết kế thanh bên, tiêu đề trang web, menu, v.v.

1. Cú pháp viền CSS

ranh giới : đường viền có chiều rộng đường viền kiểu đường viền màu | thừa kế;

• chiều rộng đường viền - độ dày đường viền. Bạn có thể đặt nó theo pixel (px) hoặc sử dụng các giá trị tiêu chuẩn mỏng, trung bình, dày (chúng chỉ khác nhau về chiều rộng tính bằng pixel)
• border-style - kiểu đường viền được hiển thị. Có thể nhận các giá trị sau
  • không có hoặc bị ẩn - hủy bỏ đường viền
  • chấm - khung chấm
  • nét đứt - khung làm bằng dấu gạch ngang
  • chất rắn - dòng đơn giản(thường được sử dụng nhất)
  • khung đôi - khung đôi
  • rãnh - viền 3D có rãnh
  • sườn núi, phần trong, phần đầu - các hiệu ứng khung 3D khác nhau
  • kế thừa - giá trị của phần tử cha được áp dụng
• màu viền - màu viền. Có thể được thiết lập bằng cách sử dụng tên cụ thể màu sắc hoặc định dạng RGB(xem tên màu html cho trang web)

Các giá trị trong thuộc tính CSS border có thể được đặt theo thứ tự bất kỳ. Trình tự được sử dụng phổ biến nhất là “màu kiểu độ dày”.

2. Ví dụ với các đường viền CSS khác nhau

2.1. Ví dụ. Phong cách thiết kế đường viền khác nhau

kiểu viền: nét đứt

kiểu viền: nét đứt

kiểu viền: rắn

kiểu viền: đôi

kiểu viền: rãnh

kiểu viền: sườn núi

kiểu viền: hình nhỏ

kiểu đường viền:bắt đầu

bốn khung hình khác nhau

kiểu viền: chấm

kiểu viền: nét đứt

kiểu viền: rắn

kiểu viền: đôi

kiểu viền: rãnh

kiểu viền: sườn núi

kiểu viền: hình nhỏ

kiểu đường viền:bắt đầu

Bốn khung hình khác nhau

2.2. Ví dụ. Thay đổi màu khung khi di chuột

Ví dụ này rất đơn giản nhưng thú vị. Nó cho thấy cách bạn có thể sử dụng lớp giả :hover và đường viền CSS để tạo hiệu ứng đơn giản(ví dụ: đối với một menu).

Khi bạn di chuột qua một khối, màu khung sẽ thay đổi

Đây là những gì nó trông giống như trên trang:

2.3. Ví dụ. Cách làm khung viền trong suốt

Khung có thể được làm trong suốt. Hiệu ứng này rất hiếm nhưng đôi khi có thể rất hữu ích cho các nhà thiết kế web. Để đặt độ trong suốt, bạn cần sử dụng bộ màu ở dạng RGBA (R, G, B, P), trong đó tham số cuối cùng đặt độ trong suốt ( số thực từ 0,0 đến 1,0)

Đây là những gì nó trông giống như trên trang:

3. Độ dày đường viền: thuộc tính chiều rộng đường viền

Đặt độ dày của đường. Trước đây chúng tôi đã hỏi nó trong mô tả thống nhất ranh giới.

Cú pháp chiều rộng đường viền CSS

chiều rộng biên giới: gầy | vừa | dày | nghĩa;

• độ dày đường mỏng
• độ dày đường trung bình - trung bình
• dày - độ dày đường dày

Dưới đây là một số ví dụ. Điều bất thường nhất sẽ là độ dày khác nhau của đường viền ở mỗi bên.

chiều rộng đường viền: mỏng

chiều rộng đường viền: trung bình

chiều rộng đường viền: dày

Độ dày khác nhau ở biên giới

Đây là những gì nó trông giống như trên trang:

chiều rộng đường viền: mỏng

chiều rộng đường viền: trung bình

chiều rộng đường viền: dày

Độ dày khác nhau ở biên giới

4. Cách làm khung viền chỉ 1 cạnh (border)

Thuộc tính CSS border có các thuộc tính dẫn xuất để thiết lập đường viền một phía trên một phần tử:

• border-top - để đặt đường viền ở trên cùng (đường viền trên cùng)
• border-bottom - để đặt đường viền ở phía dưới ( điểm mấu chốt)
• border-right - để đặt đường viền bên phải (viền phải)
• border-left - để đặt đường viền bên trái (viền trái)

Những ranh giới này có thể được kết hợp, tức là Viết khung của riêng bạn cho mỗi hướng. Cú pháp hoàn toàn giống với đường viền.

Ngoài ra còn có tài sản

• border-top-color - thiết lập màu của đường viền trên cùng
• border-top-style - thiết lập kiểu đường viền trên cùng
• border-top-width - thiết lập độ dày của đường viền trên cùng
• vân vân. cho mỗi hướng

Theo ý kiến ​​của tôi, việc viết mọi thứ trên một dòng sẽ dễ dàng hơn là tạo ra văn bản bổ sung trong phong cách. Ví dụ: các thuộc tính sau sẽ giống nhau

/* Mô tả hai phong cách giống hệt nhau: */

4.1. Ví dụ. Khung đẹp để làm nổi bật những câu trích dẫn

Ví dụ về khung trích dẫn

Đây là những gì nó trông giống như trên trang:

Ví dụ về khung trích dẫn

Ghi chú
Bạn có thể đặt đường viền riêng cho mỗi bên.

5. Cách thêm nhiều đường viền vào phần tử html

Đôi khi bạn cần thực hiện một số đường viền. Hãy đưa ra một ví dụ

5.1. Tùy chọn đầu tiên có nhiều đường viền

Đây là những gì nó trông giống như trên trang:

Có một cách thứ hai thông qua việc tạo bóng.

5.2. Lớp phủ bóng để tạo nhiều đường viền

Đây là những gì nó trông giống như trên trang:

6. Làm tròn các góc ở đường viền (bán kính đường viền)

Để tạo khung hình đẹp sử dụng tài sản Bán kính đường viền CSS(chỉ có trong CSS3). Nó có thể được sử dụng để tạo các góc tròn, tạo ra một diện mạo hoàn toàn khác. Ví dụ

7. Dòng thụt lề CSS

Các đường nhấn có thể trông ấn tượng trên nền tối, không phù hợp với mọi trang web.

Đây là những gì nó trông giống như trên trang:

Để truy cập đường viền từ JavaScript, bạn cần viết cấu trúc sau:

document.getElementById("elementID").style.border="VALUE"

Đường viền là những đường bao quanh một phần tử (nội dung chứa trong đó và phần đệm xung quanh nó). Một ví dụ chúng ta đã gặp là các khung ô bên trong một bảng.

CSS cung cấp hai loại đường viền: đường viền bên trong và đường viền bên ngoài. Thuộc tính CSS, chịu trách nhiệm thiết kế khung, bắt đầu bằng từ “viền”, có thể dịch là “Khung”, “Biên giới”. Sự hiện diện và định dạng của đường viền bên ngoài được chỉ định bởi các thuộc tính bắt đầu bằng từ “đường viền”. Đường viền, không giống như đường viền, không ảnh hưởng đến chiều rộng và vị trí của khối được đóng khung. Ngoài ra, nó không thể chỉ được cài đặt ở một bên, vì ranh giới- chỉ từ mọi phía cùng một lúc.

Đầu tiên hãy nói về thiết kế đường viền, sau đó chúng ta sẽ chuyển sang phần đề cương.

chiều rộng biên giới

Đặt chiều rộng đường viền. Rõ ràng là theo mặc định, phần tử được bao quanh bởi các khung ở bốn phía. Thuộc tính này cho phép bạn đặt độ rộng của đường viền giống nhau cho tất cả các cạnh hoặc khác nhau cho mỗi cạnh. Tùy thuộc vào chiều rộng cần được gán cho đường viền nào, bạn có thể chỉ định từ một đến bốn giá trị trong quy tắc.

Bạn có thể đặt chiều rộng bằng cách sử dụng pixel, tỷ lệ phần trăm thông thường và các đơn vị độ dài CSS khác hoặc sử dụng các từ dành riêng gầy(2px), trung bình(4px) và dày(6px).

Độ rộng đường viền: 16px 12px 4px 8px;

kiểu viền

Xác định kiểu đường viền. Lưu ý rằng nếu bạn không đặt quy tắc này mà chỉ định thuộc tính chiều rộng biên giới, thì sẽ không có khung nào cả, vì vậy nếu bạn muốn hiển thị đường viền, hãy nhớ chỉ định kiểu viền.

Một thuộc tính có thể có khá nhiều giá trị, tất cả chúng đều được thể hiện rõ ràng trong hình bên dưới.

Đoạn cuối cho thấy rằng kiểu dáng, giống như độ dày, của khung ở mỗi bên có thể là của riêng nó:

kiểu đường viền: không có dấu chấm đôi liền nét

màu viền

Hoạt động tương tự như các thuộc tính trước đó, nhưng chịu trách nhiệm về màu sắc của đường viền. Bạn cũng có thể đặt từ một đến bốn giá trị và bạn đã biết kết quả. Nếu quy tắc không được đặt, các khung sẽ có màu văn bản của phần tử hiện tại hoặc, nếu điều này không được chỉ định, màu văn bản của phần tử cha.

Màu viền: #C85EFA;

ranh giới

Giúp viết và lưu mã dễ dàng hơn bằng cách cho phép bạn đặt tất cả thuộc tính được liệt kê cho đường viền trên tất cả các cạnh của một phần tử trong một dòng:

P (đường viền: 2px màu xanh lá cây; )

Đối với cài đặt quy tắc khác nhau khung với các mặt khác nhau có thể sử dụng các giá trị sau:

• đường viền trên cùng- giới hạn trên.
• biên giới bên phải- Phải.
• viền dưới- thấp hơn.
• biên giới bên trái- bên trái.

P ( border-left: 6px chấm vàng; )

chiều rộng phác thảo

Giống như chiều rộng biên giới, chỉ dành cho bên ngoài, không khung bên trong. Đặt độ dày của đường viền theo cùng giá trị như chiều rộng biên giới. Ngoài độ dày của khung của phần tử, bạn cần chỉ định kiểu của nó, nếu không sẽ không có đường viền.

kiểu phác thảo

Giá trị thuộc tính trùng lặp giá trị kiểu viền. Quy tắc chỉ định kiểu của đường viền bên ngoài.