Đường viền CSS: bán kính, màu sắc, kiểu dáng và các thuộc tính đường viền CSS khác. Tại sao bạn cần đường viền trong suốt trong CSS và cách thực hiện nó

Thuộc tính đường viền chung cho phép bạn đặt đồng thời độ dày, kiểu dáng và màu sắc của đường viền xung quanh một phần tử. Các giá trị có thể theo bất kỳ thứ tự nào, cách nhau bằng dấu cách, chính trình duyệt sẽ xác định giá trị nào trong số chúng tương ứng với thuộc tính mong muốn. Để chỉ đặt đường viền trên một số cạnh nhất định của một phần tử, hãy sử dụng các thuộc tính border-top, border-bottom, border-left, border-right.

thông tin ngắn gọn

Chỉ định

	Sự miêu tả	Ví dụ
<тип>	Cho biết loại giá trị.	<размер>
A && B	Các giá trị phải được xuất ra theo thứ tự được chỉ định.	<размер> && <цвет>
A | B	Cho biết rằng bạn chỉ cần chọn một giá trị trong số các giá trị được đề xuất (A hoặc B).	bình thường | vốn hóa nhỏ
Một || B	Mỗi giá trị có thể được sử dụng độc lập hoặc cùng với các giá trị khác theo bất kỳ thứ tự nào.	chiều rộng || đếm
	Các giá trị nhóm	[ cắt || đi qua ]
*	Lặp lại 0 hoặc nhiều lần.	[,<время>]*
+	Lặp lại một hoặc nhiều lần.	<число>+
?	Loại, từ hoặc nhóm được chỉ định là tùy chọn.	chèn vào?
(A, B)	Lặp lại ít nhất A, nhưng không quá B lần.	<радиус>{1,4}
#	Lặp lại một hoặc nhiều lần cách nhau bằng dấu phẩy.	<время>#

×

Giá trị

Giá trị chiều rộng đường viền xác định độ dày của đường viền. Một số giá trị kiểu đường viền được cung cấp để kiểm soát diện mạo của nó. Tên của họ và kết quả của hành động được trình bày trong Hình. 1.

Hình.1. Kiểu khung

border-color đặt màu của đường viền, giá trị có thể ở bất kỳ định dạng nào được CSS cho phép.

Ví dụ

TRONG trong ví dụ này Một đường viền kép được thêm vào xung quanh khối. Kết quả được hiển thị trong hình. 2.

Cơm. 2. Áp dụng tính chất đường viền

Mô hình đối tượng

Một đối tượng.style.border

Ghi chú

Trình duyệt trình duyệt web IE cho đến phiên bản thứ sáu, với độ dày đường viền là 1px, nó hiển thị các chấm là nét đứt . Với độ dày từ 2px trở lên, giá trị chấm hoạt động chính xác. Lỗi này đã được sửa trong IE7, nhưng chỉ với tất cả các đường viền 1px. Nếu một trong các đường viền khối có độ dày từ 2px trở lên thì trong IE7 giá trị chấm sẽ chuyển thành nét đứt .

Kiểu đường viền trong các trình duyệt khác nhau có thể thay đổi một chút khi sử dụng các giá trị rãnh, sườn, phần trong hoặc phần đầu.

Sự chỉ rõ

Mỗi thông số kỹ thuật đều trải qua nhiều giai đoạn phê duyệt.

• Khuyến nghị - Thông số kỹ thuật đã được W3C phê duyệt và được khuyến nghị làm tiêu chuẩn.
• Đề xuất ứng viên ( Khuyến nghị có thể) - nhóm chịu trách nhiệm về tiêu chuẩn hài lòng vì đã đáp ứng được mục tiêu của mình nhưng cần có sự trợ giúp từ cộng đồng phát triển để thực hiện tiêu chuẩn.
• Khuyến nghị đề xuất Khuyến nghị được đề xuất) - ở giai đoạn này, tài liệu được gửi tới Hội đồng tư vấn của W3C để phê duyệt lần cuối.
• Bản dự thảo đang hoạt động - Một phiên bản hoàn thiện hơn của bản dự thảo đã được thảo luận và sửa đổi để cộng đồng xem xét.
• Bản thảo của người biên tập ( bản thảo biên tập) - phiên bản dự thảo của tiêu chuẩn sau khi các biên tập viên dự án thực hiện các thay đổi.
• Bản nháp ( Thông số kỹ thuật dự thảo) - phiên bản dự thảo đầu tiên của tiêu chuẩn.

×

Đường viền CSS phần tử là một hoặc nhiều dòng bao quanh nội dung của phần tử và phần đệm. Khung được thiết lập bằng cách sử dụng tài sản ngắn ranh giới . Kiểu khung được đặt bằng ba thuộc tính: phong cách, màu sắc Và chiều rộng.

Trang trí khung và đường viền của phần tử HTML bằng thuộc tính CSS

1. Kiểu viền

Theo mặc định, đường viền luôn được vẽ phía trên nền của phần tử, với nền kéo dài đến cạnh ngoài của phần tử. Kiểu khung xác định cách hiển thị của nó; nếu không có thuộc tính này, các khung sẽ không hiển thị chút nào. Đối với một phần tử, bạn có thể đặt đồng thời đường viền cho tất cả các cạnh bằng cách sử dụng thuộc tính border-style hoặc cho từng bên riêng biệt bằng cách sử dụng thuộc tính định tính border-top-style, v.v. Không được thừa kế.

kiểu viền (kiểu viền trên, kiểu viền phải, kiểu viền dưới, kiểu viền trái)
Giá trị:
không có	Giá trị mặc định có nghĩa là không có khung. Đồng thời xóa khung của một phần tử khỏi nhóm phần tử có giá trị của tập thuộc tính này.
ẩn giấu	Tương đương với không có.
say mê	say mê
nét đứt	nét đứt
chất rắn	chất rắn
gấp đôi	gấp đôi
rãnh	rãnh
cây rơm	cây rơm
chèn vào	chèn vào
sự khởi đầu	sự khởi đầu
{1,4}	Liệt kê bốn kiểu khác nhau cho đường viền của một phần tử cùng một lúc, chỉ dành cho thuộc tính border-style: (kiểu đường viền: liền nét không có chấm;)
ban đầu
thừa kế

Cú pháp

P (kiểu viền: liền khối;) p (kiểu viền trên cùng: liền khối;)

2. Màu khung viền-màu sắc

Thuộc tính đặt màu của khung ở tất cả các cạnh cùng một lúc. Sử dụng các thuộc tính làm rõ, bạn có thể đặt màu khác nhau cho đường viền của mỗi bên của phần tử. Nếu không có màu nào được chỉ định cho khung, nó sẽ giống với màu của văn bản của phần tử. Nếu không có văn bản trong phần tử thì màu đường viền sẽ giống với màu văn bản phần tử cha. Không được thừa kế.

màu viền (màu viền trên, màu viền phải, màu viền dưới, màu viền trái)
Giá trị:
trong suốt	Đặt màu trong suốt cho đường viền. Đồng thời, chiều rộng của khung vẫn được giữ nguyên. Có thể dùng để thay đổi màu đường viền khi di chuột qua một phần tử để tránh phần tử đó bị dịch chuyển.
màu sắc	Màu của khung được đặt bằng cách sử dụng các giá trị của thuộc tính. (màu viền: #cacd58;)
{1,4}	Liệt kê bốn màu khác nhau cho đường viền của một phần tử cùng một lúc, chỉ dành cho thuộc tính border-color: (màu viền: #cacd58 #5faf8a #b9cea5 #aab238;)
ban đầu	Đặt giá trị thuộc tính thành giá trị mặc định.
thừa kế	Kế thừa giá trị thuộc tính từ phần tử cha.

Cú pháp

P (màu viền: #cacd58;)

3. Độ rộng đường viền

Chiều rộng khung được chỉ định bằng đơn vị chiều dài hoặc từ khóa. Nếu thuộc tính kiểu đường viền được đặt thành không và đường viền của phần tử được đặt thành chiều rộng nào đó, thì trong trường hợp nàyĐộ rộng khung được đặt thành 0. Không được thừa kế.

Cú pháp

P (độ rộng đường viền: 2px;)

4. Đặt khung với một thuộc tính

Thuộc tính border cho phép bạn kết hợp các thuộc tính sau: border-width, border-style, border-color chẳng hạn:

Div ( chiều rộng: 100px; chiều cao: 100px; đường viền: 2px màu xám đậm; )

Trong trường hợp này, các thuộc tính được chỉ định sẽ được áp dụng đồng thời cho tất cả các đường viền của phần tử. Nếu bất kỳ giá trị nào không được chỉ định, giá trị mặc định sẽ thay thế.

5. Đặt khung cho một đường viền của phần tử

Trong trường hợp bạn cần chỉ định kiểu đường viền khác cho một phần tử, bạn có thể sử dụng ký hiệu viết tắt cho đường viền tương ứng.
Các thuộc tính được liệt kê bên dưới kết hợp các thuộc tính sau thành một khai báo duy nhất: border-width , border-style và border-color . Danh sách các thuộc tính được chỉ định theo một thứ tự nhất định, trong khi một hoặc hai giá trị có thể được bỏ qua, trong trường hợp đó, giá trị của chúng sẽ lấy giá trị mặc định.

Kiểu của đường viền trên được đặt bằng cách sử dụng thuộc tính border-top, đáy - border-bottom, left - border-left và right - border-right.

Cú pháp

P (đường viền trên cùng: màu xám đậm 2px;)

6. Phác thảo đường viền bên ngoài

Thuộc tính chỉ định đường viền bên ngoài xung quanh các phần tử (tức là bên ngoài đường viền thông thường). Mục đích chính của thuộc tính này là làm nổi bật một phần tử. Không giống như thuộc tính border, việc áp dụng thuộc tính này không ảnh hưởng đến kích thước hoặc vị trí của phần tử, bởi vì đường viền được hiển thị trên đầu khối phần tử, do đó có thể dẫn đến sự chồng chéo lề phần tử và các khu vực lân cận.

Ngoài ra, đường viền bên ngoài, không giống như khung của phần tử, bao quanh phần tử ở tất cả các phía, tạo khung hoàn toàn cho phần tử đó.

Đường viền bên ngoài luôn là hình chữ nhật và không đi theo đường viền của khối được chỉ định bán kính đường viền.

Thuộc tính phác thảo cho phép bạn kết hợp các thuộc tính sau: màu phác thảo, kiểu phác thảo, chiều rộng phác thảo. Nếu bất kỳ giá trị nào không được chỉ định, giá trị mặc định sẽ thay thế.

Div ( chiều rộng: 100px; chiều cao: 100px; đường viền: #cacd58 Solid 2px; )

6.1. kiểu phác thảo

Hình thức của đường viền bên ngoài được thiết lập tương tự như kiểu khung của phần tử. Không được thừa kế.

Cú pháp

P (kiểu phác thảo: sườn núi;)

6.2. Màu đường viền bên ngoài màu đường viền bên ngoài

Màu sắc của đường viền bên ngoài chỉ có thể được xác định khi đặt giá trị phong cách phác thảo. Không được thừa kế.

Cú pháp

P (kiểu phác thảo: sườn núi; màu phác thảo: bạc; )

6.3. Độ dày đường viền bên ngoài chiều rộng đường viền bên ngoài

Độ dày của đường viền bên ngoài được đặt tương tự như độ dày của khung của phần tử. Không được thừa kế.

Cú pháp

P ( kiểu phác thảo: chấm; chiều rộng phác thảo: 5px; )

Một vài bài học trước đó, chúng ta đã xem xét cách trình bày sơ đồ của một khối trang web và cũng đã nói ngắn gọn về thuộc tính CSS border, có thể được sử dụng để đặt đường viền cho một phần tử. Lần này chúng ta sẽ xem xét thuộc tính này chi tiết hơn bằng cách sử dụng các ví dụ.

Đường viền nằm giữa lề và phần đệm. Điều này có nghĩa là mức ký quỹ là phía sau ranh giới. Đường viền có thể được đặt ở cả bốn cạnh (như thể bao quanh khối trong khung) hoặc trên một, hai hoặc ba cạnh. CSS cho phép bạn kiểm soát độ dày, màu sắc và kiểu đường viền. Hãy nghiên cứu điều này chi tiết hơn.

Border-width: chiều rộng đường viền

Thuộc tính border-width thiết lập độ rộng của đường viền. Thông thường kích thước này được biểu thị bằng pixel. Bạn có thể đặt độ rộng giống nhau hoặc khác nhau cho cả bốn đường viền, ví dụ:

/* cả 4 viền đều rộng 2px: */ border-width: 2px; /* Viền trên và dưới rộng 2px, trái và phải là 4px: */ border-width: 2px 4px; /* viền trên - 2px, trái và phải - 6px, dưới - 3px: */ border-width: 2px 6px 3px; /* viền trên - 2px, phải - 3px, dưới - 4px, trái - 5px: */ border-width: 2px 3px 4px 5px;

Ngoài ra còn có từ khóa chỉ độ rộng đường viền:

• mỏng - đường viền rộng 2px;
• trung bình - đường viền rộng 4px;
• dày - viền rộng 6px.

Màu viền: màu viền

Thuộc tính border-color chỉ định màu cho đường viền. Màu sắc có thể được chỉ định ở bất kỳ định dạng CSS nào: từ khóa, hệ thập lục phân hoặc RGB - tùy theo định dạng nào thuận tiện hơn cho bạn. Bằng cách tương tự với thuộc tính trước đó, bạn có thể đặt một màu cho tất cả các đường viền hoặc chọn các màu khác nhau cho mỗi đường viền.

Màu viền: #FFFF00;

Bạn cũng có thể đặt màu trong suốt bằng cách viết:

Màu viền: trong suốt;

Kiểu viền: kiểu viền

Nhờ thuộc tính kiểu đường viền, bạn có thể biến đường viền thông thường thành đường viền chấm, đôi hoặc ba chiều - có rất nhiều cách những nghĩa khác nhau. Để làm điều này, hãy sử dụng các từ khóa sau:

• đường viền liền khối - liền khối;
• chấm - đường viền của dấu chấm;
• nét đứt - đường viền chấm;
• đôi - đường viền đôi;
• rãnh - ranh giới khía thể tích;
• sườn núi - một đường viền đồ sộ với cạnh dày (về cơ bản là sự đảo ngược của kiểu trước đó);
• đầu - đường viền ép đùn;
• hình nhỏ - đường viền thụt vào (về cơ bản là đảo ngược kiểu trước đó).

Giống như các thuộc tính chiều rộng đường viền và màu đường viền, mỗi đường viền khối có thể được tạo kiểu khác nhau - ví dụ: bạn có thể tạo nét đứt cho đường viền trên và dưới, đồng thời đường viền bên phải và bên trái tăng gấp đôi. Ở đây mọi thứ chỉ phụ thuộc vào trí tưởng tượng.

Kiểu viền: chấm đôi;

Ghi chú: trong các trình duyệt khác nhau vẻ bề ngoài ranh giới có thể hơi khác nhau.

Đường viền thuộc tính CSS phổ biến: 3 trong 1

Để tạo kiểu cho đường viền, bạn không cần phải sử dụng lần lượt cả ba thuộc tính trên. Chỉ cần biết về CSS viền thuộc tính phổ quát chung là đủ, với sự trợ giúp của nó, bạn sẽ viết kiểu nhanh hơn nhiều và tiết kiệm dung lượng. Để thực hiện việc này, hãy ghi lại các giá trị cho cả ba thuộc tính theo thứ tự ngẫu nhiên:

Đường viền: 2px chấm #FF0000;

Ranh giới cho các bên cá nhân

Với sự giúp đỡ thuộc tính bổ sungđường viền trong CSS, bạn có thể tạo kiểu cho từng đường viền khối riêng lẻ. Các thuộc tính sau đây sẽ giúp bạn điều này:

• border-top - kiểu cho đường viền trên cùng;
• border-right - cho đường viền bên phải;
• border-bottom - cho đường viền dưới cùng;
• border-left - cho đường viền bên trái.

đường viền trên cùng: 2px rắn #0000FF; viền dưới: 7px đôi #000080;

Kết quả

Bây giờ bạn đã biết cách tạo đường viền cho các khối, bạn có thể thực hành tạo chúng. Có nhiều cách để mô tả ngắn gọn một phong cách mà không cần quá nhiều dòng trong đó. tập tin CSS. Kiến thức về các nguyên tắc của biểu định kiểu xếp tầng đóng một vai trò quan trọng ở đây. Hãy xem một ví dụ.

Giả sử bạn muốn tạo đường viền cho div có ba đường viền màu xám liền và đường viền dưới màu xanh lục nét đứt. Bạn có thể viết phong cách này như thế này:

Div ( border-right: 8px double #FF0000; border-left: 8px double #FF0000; border-bottom: 8px double #FF0000; border-top: 4px chấm #FDD201; )

Nhưng đây là một bài viết quá dài. Tất cả điều này có thể được viết ngắn gọn:

Div ( border: 8px double #FF0000; border-top: 4px chấm #FDD201; )

Như đã đề cập ở trên, ở đây chúng ta sẽ tận dụng các thuộc tính xếp tầng của CSS. Trước tiên, chúng tôi ghi lại kiểu cho cả bốn cạnh của khung, sau đó chỉ định kiểu riêng cho đường viền dưới cùng, từ đó ghi đè một phần kiểu trước đó. Điều rất quan trọng là phải tuân theo trình tự các dòng này.

Nhiệm vụ nhỏ

Hãy thử tạo đường viền cho div có kích thước 200x200 pixel. Các kiểu cho khung sẽ như thế này:

• Làm cho đường viền trên và dưới vững chắc chất rắn, cung cấp cho chúng cùng màu lựa chọn và chiều rộng 5 pixel.
• Làm viền trái nét đứt, rộng 3 pixel, chọn màu khác với màu trước đó.
• Làm cho đường viền bên phải tăng gấp đôi gấp đôi, rộng 7 pixel, màu khác với hai phần trước.

Cuối cùng, tác phẩm của bạn sẽ trông như thế này (ngoại trừ màu sắc bạn chọn):

Kết quả của tác vụ (xem trong Chrome)

Thuộc tính CSS border được sử dụng để tạo đường viền cho một đối tượng, cụ thể là độ dày của đường viền, màu sắc và kiểu dáng của đường viề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 : chiều rộng đường viền kiểu đường viền màu đường viền | 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
  • đường liền nét - đơ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 trong định dạng RGB(xem tên màu html cho trang web)

Ghi chú

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à khung CSSđường viền để 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 đã chỉ định nó trong một mô tả duy nhất về đường viền.

Cú pháp CSS chiều rộng biên giới

chiều rộng biên giới: gầy | trung bình | 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 (viền trên cùng)
• border-bottom - để đặt đường viền ở phía dưới (viền dưới)
• 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 tạo 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 thuộc tính 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 cái nhìn 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"

Tôi chắc rằng bạn đã quen với thuộc tính css viền. Bạn có học được điều gì mới mà trước đây bạn chưa biết không? đường viền css? Chà, bạn không chỉ học được mà còn học được một số điều mới mà bạn chưa từng biết trước đây!

CSS3 không chỉ có thể được sử dụng để tạo các góc tròn mà mã CSS thuần túy còn có thể được sử dụng để tạo hình dạng phức tạp. Trước đây, bạn có thể sử dụng hình nền để tạo ra các góc tròn. Nhờ các kỹ thuật mới để sử dụng đường viền, chúng ta có thể thực hiện việc này bằng mã CSS thuần túy.

Cơ bản về sử dụng đường viền css

Có lẽ bạn đã quen thuộc với sử dụng tiêu chuẩn Thuộc tính biên giới:

Đường viền: 1px màu đen;

Đoạn mã trên sẽ xuất ra đường viền 1px có màu đen. Đơn giản và dễ dàng. Bạn cũng có thể mở rộng cú pháp một chút:

Độ rộng đường viền: dày; kiểu viền: liền khối; màu viền: đen;

Ngoài ra, bạn có thể sử dụng các giá trị cụ thể cho thuộc tính border-width, ba từ khóa: mỏng, trung bình, dày.

Nhưng việc sử dụng cú pháp mở rộng không phải lúc nào cũng thực tế. Hãy xem một ví dụ khi bạn cần thay đổi màu của khung khối khi di chuột. Trong trường hợp này, sử dụng cú pháp tốc ký đơn giản hơn nhiều:

Hộp ( đường viền: 1px màu đỏ đậm; ) .box:hover ( đường viền: 1px màu xanh lá cây; )

Một cách thanh lịch và đơn giản hơn để làm điều này là:

Hộp ( border: 1px màu đỏ đậm; ) .box:hover ( border-color: green; )

Như bạn có thể thấy, kỹ thuật nâng cao cũng hữu ích khi chúng ta chỉ thay đổi một số thuộc tính: chiều rộng, kiểu dáng, màu sắc và các thuộc tính khác.

Bán kính đường viền

Ranh giới-bán kính- Đây là thuộc tính “vàng” của CSS3 - thuộc tính đầu tiên, phổ biến nhất đã trở nên thiết thực và hữu ích. Ngoại trừ IE8 và các phiên bản bên dưới, tất cả các trình duyệt đều hiển thị các góc tròn bằng cách sử dụng tính năng này.

Mặc dù vậy, cần phải sử dụng các tiền tố đặc biệt cho Webkit và Mozilla để kiểu dáng chính xác.

Bán kính đường viền Webkit: 10px; -moz-biên giới-bán kính: 10px; bán kính đường viền: 10px;

Ngày nay, chúng ta có thể loại bỏ các tiền tố đặc biệt và sử dụng dạng bán kính đường viền tiêu chuẩn.

Một lợi ích khác là chúng ta có thể sử dụng các giá trị đặc biệt cho mỗi bên của khối:

Bán kính đường viền trên cùng bên trái: 20px; bán kính đường viền trên cùng bên phải: 0; bán kính viền dưới bên phải: 30px; bán kính viền dưới bên trái: 0;

Trong đoạn mã trên, đặt bán kính đường viền trên cùng bên phải và bán kính đường viền dưới cùng bên trái thành "null" có thể đạt được một số hình dạng đáng kinh ngạc. Mặc dù phần tử có thể kế thừa một số thuộc tính cần được đặt lại.

Tương tự như lề và phần đệm, chúng ta có thể nén cú pháp:

/* trên cùng bên trái, trên cùng bên phải, dưới cùng bên phải, dưới cùng bên trái */ bán kính đường viền: 20px 0 30px 0;

Ví dụ như các ứng dụng thuộc tính bán kính đường viền, Tôi sẽ chỉ cho bạn loại “quả chanh” mà các nhà thiết kế thường sử dụng khi thiết kế trang web:

Lemon ( chiều rộng: 200px; chiều cao: 200px; nền: #F5F240; đường viền: 1px Solid #F0D900; bán kính đường viền: 10px 150px 30px 150px; )

Hãy vượt xa những điều cơ bản

Nhiều nhà thiết kế có tất cả kiến ​​thức về khu vực css thuộc tính biên giới kết thúc ở đây. Nhưng có một số thứ thú vị khác mà bạn có thể sử dụng để tạo ra những thứ tuyệt vời!

Cấu trúc đường viền css phức tạp

Có nhiều kỹ thuật để tạo ra các thiết kế sử dụng các cấu trúc đường viền phức tạp. Ví dụ, chúng ta hãy xem những điều sau đây...

Kiểu viền

Chúng tôi luôn sử dụng các tính chất nổi tiếng nhất là liền nét, nét đứt và chấm. Nhưng có một vài người khác thuộc tính kiểu viền: rãnh và sườn núi.

Đường viền: rãnh 20px #e3e3e3;

Hoặc theo cú pháp mở rộng:

Màu viền: #e3e3e3; chiều rộng đường viền: 20px; kiểu viền: rãnh;

Mặc dù các thuộc tính này hữu ích nhưng chúng không phải là cơ sở để tạo các khung phức tạp.

Đề cương

Kỹ thuật phổ biến nhất để tạo đường viền kép là sử dụng thuộc tính phác thảo.

Hộp ( đường viền: 5px Solid #292929; đường viền: 5px Solid #e3e3e3; )

Phương pháp này hoạt động rất tốt, mặc dù nó giới hạn chúng ta chỉ có hai khung hình. Đôi khi bạn cần tạo một đường viền chuyển màu bao gồm nhiều lớp... vậy thì làm thế nào?

Yếu tố giả

Khi kỹ thuật phác thảo là không đủ, phương tiện thay thế là sử dụng các phần tử giả:trước và:sau. Nhờ đó bạn có thể thêm các khung bổ sung vào một phần tử:

Hộp ( chiều rộng: 200px; chiều cao: 200px; nền: #e3e3e3; vị trí: tương đối; đường viền: 10px màu xanh lá cây; ) /* Tạo hai hộp có cùng chiều rộng của vùng chứa */ .box:after, .box:trước ( nội dung: ""; vị trí: tuyệt đối; trên cùng: 0; bên trái: 0; dưới cùng: 0; bên phải: 0; ) .box:after ( đường viền: 5px màu đỏ đậm; đường viền: 5px màu vàng đậm; ) .box:trước ( đường viền : 10px màu xanh đậm; )

Nó trông không thanh lịch lắm, nhưng ít nhất nó hoạt động. Hơi khó để tìm ra chuỗi màu sắc trong khung hình... nhưng bạn có thể tìm ra.

Bóng hộp

Một "cách dành cho trẻ em" thú vị để tạo hiệu ứng tương tự là sử dụng thuộc tính box-shadow CSS3:

Hộp (đường viền: 5px màu đỏ đặc; bóng hộp: 0 0 0 5px màu xanh lá cây, 0 0 0 10px màu vàng, 0 0 0 15px màu cam; )

Trong trường hợp này, chúng tôi đã thông minh hơn và sử dụng thuộc tính box-shadow chuyên dụng. Bằng cách thay đổi các thông số x, y, Blur về 0, chúng ta có thể sử dụng các màu sắc khác nhau để tạo ra nhiều khung hình.

Nhưng có một vấn đề: trong các trình duyệt cũ không hiểu thuộc tính box-shadow, chỉ hiển thị một khung màu đỏ 5px.

"Nhớ! Thiết kế trang web phải trông giống nhau trên nhiều trình duyệt, nghĩa là giống nhau trên tất cả các trình duyệt. Bao gồm cả các phiên bản cũ hơn."

Thay đổi góc độ

Ngoài cái được sử dụng ý nghĩa đơn giản bán kính đường viền, chúng ta có thể chỉ định hai cái riêng biệt - tách chúng ra / chúng ta sẽ chỉ ra bán kính ngang và bán kính dọc.

Ví dụ:

Bán kính đường viền: 50px / 100px; /* bán kính ngang, bán kính dọc */

... điều này tương đương với:

Bán kính đường viền trên cùng bên trái: 50px 100px; bán kính đường viền trên cùng bên phải: 50px 100px; bán kính viền dưới bên phải: 50px 100px; bán kính viền dưới bên trái: 50px 100px;

Kỹ thuật này phù hợp để tạo các hình dạng khối độc đáo. Ví dụ: đây là cách tạo hiệu ứng giấy gói:

Hộp ( chiều rộng: 200px; chiều cao: 200px; nền: #666; bán kính viền trên cùng bên trái: 15em 1em; bán kính viền dưới cùng bên phải: 15em 1em; )

Biểu mẫu CSS sử dụng đường viền

Kỹ thuật này cho thấy cách bạn có thể tạo các biểu mẫu CSS trong khi sử dụng các phần tử có kích thước chiều cao và chiều rộng bằng 0. Ngạc nhiên? Hãy xem một ví dụ...

Đối với một số ví dụ tiếp theo, chúng tôi sẽ sử dụng đánh dấu sau:

...và kiểu cơ bản sau:

Hộp ( chiều rộng: 200px; chiều cao: 200px; nền: đen; )

Hầu hết ví dụ phổ biến sử dụng biểu mẫu CSS - tạo mũi tên chảy. Bí quyết của mũi tên này nằm ở việc tạo đường viền có màu khác nhau cho mỗi bên. Sau đó, đặt thuộc tính chiều rộng và chiều cao thành 0.

Hãy giao cho khối div lớp mũi tên:

Mũi tên ( chiều rộng: 0; chiều cao: 0; viền trên: 100px màu đỏ đậm; viền bên phải: 100px màu xanh lá cây; viền dưới: 100px màu xanh lam; viền trái: 100px màu vàng đậm; )

Để chứng minh, trước tiên chúng tôi sử dụng cú pháp mở rộng. Tiếp theo, chúng ta có thể loại bỏ mã bổ sung bằng cú pháp tốc ký:

Mũi tên ( chiều rộng: 0; chiều cao: 0; đường viền: liền khối 100px; màu đường viền: đỏ xanh lục xanh vàng; )

Thật thú vị phải không? Bây giờ chúng ta sẽ cài đặt màu sắc trong suốtở tất cả các mặt ngoại trừ mặt xanh.

Mũi tên ( chiều rộng: 0; chiều cao: 0; đường viền: nét liền 100px; màu viền dưới: xanh lam; )

Nó trở nên tuyệt vời! Nhưng điều này mâu thuẫn bố cục ngữ nghĩa , tạo một div .arrow, chỉ để thêm một mũi tên vào trang. Với mục đích này, chúng ta có thể sử dụng các phần tử giả, đó là những gì chúng ta sẽ làm bây giờ.

Tạo bong bóng lời nói

Để tạo Bong bóng lời nói, chúng ta cần một mảnh nhỏ CSS thuần túy mã và một khối div.

Bong bóng lời nói ( vị trí: tương đối; màu nền: #292929; chiều rộng: 200px; chiều cao: 150px; chiều cao dòng: 150px; /* căn giữa theo chiều dọc */ màu: trắng; căn chỉnh văn bản: giữa; )

Speech-bubble:after ( nội dung: ""; )

Ở giai đoạn này, chúng ta sẽ tạo mũi tên mà chúng ta đã tạo trước đó, thêm nó vào phần tử và tất cả những gì còn lại là định vị nó:

Speech-bubble:after ( nội dung: ""; vị trí: tuyệt đối; chiều rộng: 0; chiều cao: 0; đường viền: 10px liền khối; màu đường viền: đỏ xanh lục xanh vàng; )

Nếu chúng ta muốn mũi tên hướng xuống dưới, chúng ta sẽ phải đặt tất cả các đường viền thành trong suốt ngoại trừ đường viền trên cùng.

Speech-bubble:after ( nội dung: ""; vị trí: tuyệt đối; chiều rộng: 0; chiều cao: 0; đường viền: 10px rắn; màu viền trên cùng: đỏ; )

Khi chúng tôi tạo ra cái này Hình dạng CSS, chúng tôi không thể chỉ ra cụ thể kích thước của mũi tên. Thay vào đó, chúng ta có thể đặt thuộc tính border-width để gán kích thước cho mũi tên. Chúng ta cũng sẽ đặt vị trí của mũi tên ở phía dưới ở giữa. Theo đó, để làm điều này, chúng tôi sử dụng các giá trị trên và bên trái.

Speech-bubble:after ( nội dung: ""; vị trí: tuyệt đối; chiều rộng: 0; chiều cao: 0; đường viền: 15px liền khối; đường viền trên cùng màu: đỏ; trên cùng: 100%; bên trái: 50%; )

Ngoài ra, chúng ta chỉ cần cho nó màu giống với khối là được. Hãy nhớ rằng, khi định vị, bạn cần tính đến kích thước của các đường viền khác, không nhìn thấy được (15px). Chúng tôi cũng sẽ làm tròn khối ở các góc.

Speech-bubble ( /* … các kiểu khác */ border-radius: 10px; ) .speech-bubble:after ( nội dung: ""; vị trí: tuyệt đối; chiều rộng: 0; chiều cao: 0; đường viền: nét liền 15px; đường viền trên cùng -color: #292929; top: 100%; left: 50%; lề trái: -15px; /* điều chỉnh độ rộng đường viền */ )

Không tệ nhỉ? Sử dụng một số lớp CSS và thủ thuật đường viền, bạn có thể tạo ra một thứ như vậy.

/* Cách sử dụng Speech Bubbles: Áp dụng lớp .speech-bubble và .speech-bubble-DIRECTION như hiển thị bên dưới

*/ .speech-bubble ( vị trí: tương đối; màu nền: #292929; chiều rộng: 200px; chiều cao: 150px; chiều cao dòng: 150px; /* căn giữa theo chiều dọc */ màu: trắng; căn chỉnh văn bản: giữa; viền- bán kính: 10px; họ phông chữ: sans-serif; ) .speech-bubble:after ( nội dung: ""; vị trí: tuyệt đối; chiều rộng: 0; chiều cao: 0; đường viền: 15px liền khối; ) /* Định vị mũi tên */ .speech-bubble-top:after ( border-bottom-color: #292929; left: 50%; Bottom: 100%; Margin-left: -15px; ) .speech-bubble-right:after ( border-left-color : #292929; left: 100%; top: 50%; lề-top: -15px; ) .speech-bubble-bottom:after ( border-top-color: #292929; top: 100%; left: 50%; lề trái: -15px; ) .speech-bubble-left:after ( border-right-color: #292929; top: 50%; right: 100%; lề-top: -15px; )

Thưởng! Định tâm dọc trong khối

Đối với một dòng văn bản, bạn có thể sử dụng chiều cao dòng. Nhưng nếu bạn có hai dòng văn bản trở lên... Giải pháp tốt nhất sẽ cài đặt thuộc tính hiển thị trên bàn và đặt tất cả văn bản vào một đoạn văn. Đây là những gì nó trông giống như trên đánh dấu html: