Màu đường viền Css. Đườ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

Để kiểm soát đường viền của một phần tử, hãy sử dụng thuộc tính đường viền chung. Thuộc tính này cho phép bạn đặt độ dày, kiểu dáng và màu sắc của đường viền của một phần tử trong một khai báo.

Ba thuộc tính này (độ dày đường viền, kiểu đường viền và màu sắc) có thể được đặt trong một khai báo. Đây là một ví dụ:

Bạn có thể chỉ định kiểu đường viền trên một cạnh của phần tử. Để thực hiện việc này, hãy sử dụng các thuộc tính border-top (viền trên), border-right (viền phải), border-bottom (viền dưới), border-left (viền trái).

Trong ví dụ này, mỗi cạnh của khối có độ dày, kiểu dáng và màu sắc đường viền khác nhau.

Hãy suy nghĩ về cách Trợ giúp CSS bạn có thể tạo một hình dạng như thế này:

Các giá trị đường viền - độ dày, kiểu dáng và màu sắc - có thể được đặt riêng bằng các thuộc tính đặc biệt.

• phong cách biên giới - phong cách biên giới.
• chiều rộng đường viền - chiều rộng đường viền.
• màu viền - màu viền.

Chúng ta hãy xem xét từng giá trị riêng biệt.

thuộc tính kiểu đường viền Kiểu viền.

Thuộc tính border-style thiết lập kiểu của đường viền. Trong CSS, trong Sự khác biệt về HTML, đường viền của một phần tử không chỉ có thể chắc chắn. Các giá trị sau được chấp nhận cho kiểu đường viền:

1. không có - không có đường viền (mặc định).
2. đường viền chắc chắn - chắc chắn.
3. double - đường viền kép.
4. đường viền nét đứt - chấm.
5. chấm - một đường viền được tạo thành từ một loạt các dấu chấm.
6. sườn núi - đường viền "sườn núi".
7. rãnh - đường viền "rãnh".
8. inset - đường viền chán nản.
9. ngay từ đầu - đường viền ép đùn.

Ví dụ về những gì họ trông như thế nào.

không có biên giới (không có)

đường viền chắc chắn

đường viền đôi

đường viền của một loạt các dấu chấm (chấm)

đường viền nét đứt

đường viền rãnh

biên giới sườn núi

đường viền thụt vào (hình nhỏ)

đường viền ép đùn (bắt đầu)

Nhân tiện, nếu bạn đặt màu đường viền thành màu đen cho khung sườn núi, bạn sẽ nhận được kết quả này.

Một khối div có đường viền và kiểu đường gờ màu đen.

Khung trông chắc chắn, nhưng đó là do kiểu đường gờ được tạo bằng cách thêm hiệu ứng bóng đen và hiệu ứng đen không hiển thị trên khung đen.

Với sự giúp đỡ thuộc tính kiểu viền Kiểu đường viền có thể được đặt không chỉ cho tất cả các cạnh của khối. Có thể thiết lập nhiều giá trị cho một thuộc tính kiểu đường viền, tùy theo số lượng giá trị mà kiểu đường viền sẽ được gán số khác nhau các cạnh của khối. Bạn có thể đặt một, hai, ba hoặc bốn giá trị. Hãy xem xét các ví dụ cho từng trường hợp.

Một giá trị (rắn) - kiểu đường viền được đặt cho tất cả các cạnh của khối.

Hai giá trị (solid double) - giá trị đầu tiên đặt kiểu cho cạnh trên và dưới, giá trị thứ hai cho cạnh.

Ba giá trị (chấm kép liền nét) - giá trị đầu tiên cho mặt trên, giá trị thứ hai cho các cạnh, giá trị thứ ba cho mặt dưới.

Bốn giá trị (nét đứt đôi nét liền) - mỗi giá trị cho một bên theo chiều kim đồng hồ bắt đầu từ trên cùng.

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

Để đặt độ rộng đường viền của một phần tử, hãy sử dụng thuộc tính border-width. Độ dày đường viền có thể được chỉ định theo bất kỳ đơn vị đo lường tuyệt đối nào, ví dụ như bằng pixel.

Giống như thuộc tính kiểu đường viền, thuộc tính này cũng có thể được đặt thành một đến bốn giá trị. Hãy xem xét các ví dụ cho từng trường hợp.

Mã ví dụ:

Ngoài ra đối với thuộc tính border-width còn có các giá trị có dạng từ khóa. Tổng cộng có ba:

• viền mỏng - mỏng;
• độ dày trung bình - trung bình;
• dày - viền dày;

Độ dày viền: mỏng.

Độ dày viền: trung bình.

Độ dày viền: dày.

Thuộc tính màu đường viền. Màu viền.

Để kiểm soát màu đường viền, hãy sử dụng công cụ màu đường viền. Màu sắc cho thuộc tính này có thể được đặt bằng bất kỳ phương pháp nào được mô tả trong bài viết "Màu sắc trong CSS", cụ thể là:

• Ký hiệu thập lục phân (#ff00aa) của màu.
• Định dạng RGB là rgb(255,12,110) . định dạng RGBA cho CSS3.
• định dạng HSL và HSLA cho CSS3.
• Tên màu, ví dụ màu đen. Danh sách đầy đủ Tên màu được đưa ra trong bảng tên màu CSS.

Thuộc tính border-color cũng có thể có từ một đến bốn giá trị và xử lý chúng tương tự như các thuộc tính trước đó.

Một giá trị (màu đỏ).

Hai giá trị (đỏ đen).

Ba giá trị (đỏ đen vàng).

Bốn giá trị (đỏ đen vàng xanh).

Bây giờ chúng ta hãy quay lại bài toán đã nêu ở trên và vẽ hình:

Đây là đoạn mã vẽ một hình như vậy, chỉ có kích thước lớn hơn:

Đặt giá trị cho các bên riêng biệt

Ở trên đã đề cập rằng bạn có thể chỉ định các giá trị thuộc tính đường viền cho chỉ một cạnh của khối. Có những tài sản cho những mục đích này:

• border-top (đường viền trên cùng)
• biên giới bên phải
• viền dưới
• viền trái (viền trái)

Hãy để tôi nhắc bạn rằng đối với tất cả các thuộc tính, ba giá trị được chỉ định (độ dày, kiểu dáng và màu sắc) theo bất kỳ thứ tự nào. Nhưng có những thuộc tính cho phép bạn đặt độ dày, màu sắc và kiểu dáng cho từng mặt riêng biệt. Việc viết các thuộc tính này bắt nguồn từ những điều trên.

Tùy chọn đường viền trên cùng (border-top).

• border-top-color - đặt màu của đường viền trên cùng của phần tử.
• border-top-width - đặt độ dày của đường viền trên cùng của phần tử.
• border-top-style - đặt kiểu đường viền trên cùng của phần tử.

Tùy chọn viền phải (viền-phải).

• border-right-color - đặt màu cho đường viền bên phải của phần tử.
• border-right-width - đặt độ dày của đường viền bên phải của phần tử.
• border-right-style - thiết lập kiểu đường viền bên phải của phần tử.

Tùy chọn viền dưới (border-bottom).

• border-bottom-color - đặt màu cho đường viền dưới cùng của phần tử.
• border-bottom-width - đặt độ dày của đường viền dưới cùng của phần tử.
• border-bottom-style - đặt kiểu đường viền dưới cùng của phần tử.

Tùy chọn viền trái (viền trái).

• border-left-color - đặt màu cho đường viền bên trái của phần tử.
• border-left-width - đặt độ dày của đường viền trái của phần tử.
• border-left-style - thiết lập kiểu đường viền trái của phần tử.

Một ví dụ về việc sử dụng các thuộc tính này:

Thuộc tính bán kính đường viền. Làm tròn các góc viền.

Thuộc tính bán kính đường viền nhằm mục đích làm tròn các góc của đường viền của một phần tử. Thuộc tính này xuất hiện trong CSS3 và hoạt động chính xác trong tất cả trình duyệt hiện đại, ngoại trừ trình duyệt web IE 8 (và các phiên bản cũ hơn).

Các giá trị có thể là bất kỳ số nào được sử dụng trong CSS.

Thuộc tính bán kính đường viền: 15px.

Nếu khung khối không được chỉ định thì phần phi lê sẽ xuất hiện cùng với nền. Dưới đây là ví dụ về khối tròn không có đường viền nhưng có màu nền:

Thuộc tính bán kính đường viền: 15px.

Có các thuộc tính để làm tròn từng góc riêng lẻ của một phần tử. Ví dụ này sử dụng tất cả chúng:

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

Thuộc tính bán kính đường viền: 15px.

Mặc dù mã này có thể được viết trong một khai báo: border-radius : 15px 0 15px 0 . Thực tế là thuộc tính bán kính đường viền có thể được đặt từ một đến bốn giá trị. Bảng dưới đây phác thảo các quy tắc chi phối các thông báo như vậy.

Sau khi nghiên cứu kỹ bảng này, bạn có thể hiểu rằng điều quan trọng nhất ghi chú ngắn kiểu mong muốn sẽ như thế này: border-radius : 15px 0 . Chỉ có hai ý nghĩa.

Một chút luyện tập

Vẽ một quả chanh bằng CSS.

Đây là mã cho một khối như vậy:

Ký quỹ: 0 tự động; /* Căn giữa khối */ width: 200px; chiều cao: 200px; nền: #F5F240; đường viền: 1px liền khối #F0D900; bán kính đường viền: 10px 150px 30px 150px;

Chúng tôi đã vẽ hình:

Bây giờ hãy để lại một hình tam giác từ nó:

Mã tam giác là:

Ký quỹ: 0 tự động; /* Căn giữa khối */ đệm: 0px; chiều rộng: 0px; chiều cao: 0; đường viền: 30px màu trắng; màu viền dưới: đỏ;

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ể thiết lập màu trong suốt, viết:

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

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

Nhờ thuộc tính border-style, bạn có thể biến đường viền thông thường thành đường viền chấm, đường viền đôi, đường viền liền nét - có nhiều ý 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 phần trên cùng và phần Giơi hạn dươi chấm, và phải và trái - 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ú: V. 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ẽ sử dụng thuộc tính Xếp tầng CSS. Đầu tiên chúng ta viết 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)

Tôi chắc rằng bạn đã quen với thuộc tính css viền. Bạn sẽ học được điều gì mới mà trước đây bạn chưa biết về đường viền css chứ? 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 đặc quyền khác là chúng ta có thể sử dụng ý nghĩa đặ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ụ về cách sử dụng thuộc tính border-radius, tôi sẽ chỉ cho bạn một 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ó đủ kiến ​​thức trong lĩnh vực này thuộc tính css biên giới, đó là nơi nó kết thúc. 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 số thuộc tính kiểu đường viền khác: rãnh và đường gờ.

Đườ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 giá trị bán kính đường viền đơn giản được sử dụng, chúng ta có thể chỉ định hai giá trị riêng biệt - tách chúng bằng / chúng ta chỉ định bán kính ngang và 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ẽ đặt màu trong suốt ở tất cả các mặt ngoại trừ mặt màu 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: