Phác thảo văn bản bằng CSS có nghĩa là: có hai cách để triển khai ví dụ. Tạo bóng cho văn bản bằng CSS. Phác thảo văn bản bằng CSS. Thuộc tính bán kính đường viền. Làm tròn các góc viền

Để 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 ( điểm mấu chốt), 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 bạn có thể tạo một hình dạng như thế này bằng CSS:

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 phép cho kiểu đường viền:

1. không có - không có đường viền (mặc định).
2. viền liền khối - 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.

Khối div có viền đen và kiểu đường gờ.

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ể đặt 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 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:

• đường viền trên cùng
• border-right (viề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ó 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 viền dưới 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; viền-đáy-màu: đỏ;

Vlad Merzhevich

Đã có lúc có một phong cách nhất định cho văn bản có bóng và hiệu ứng tương tự có thể được tìm thấy trên hầu hết mọi trang web. TRONG biên tập đồ họa Bóng được thêm vào một cách đơn giản, trông rất đẹp, đây là văn bản có bóng và được đưa lên trang web, bất kể phong cách của trang web và ý thức về tỷ lệ của người thiết kế. Khi hầu hết các trình duyệt bắt đầu hỗ trợ thuộc tính kiểu bóng văn bản, thời trang này đã qua và hiện nay văn bản có bóng là khá hiếm. Tuy nhiên, text-shadow còn có một số công dụng tiềm ẩn khác mà ít người nghi ngờ. Bằng cách sử dụng thuộc tính này, bạn có thể tạo văn bản phác thảo, “đùn” nó, tạo độ sáng, độ mờ, v.v.

Sử dụng bóng văn bản

Bốn tham số được viết dưới dạng giá trị: màu bóng, chuyển vị ngang và dọc và bán kính mờ bóng (Hình 1).

Cơm. 1. Tham số bóng văn bản

Màu sắc có thể được viết ở đầu hoặc cuối tất cả các tham số ở bất kỳ định dạng CSS phù hợp nào. Vì vậy, bạn có thể tạo một bóng mờ thông qua định dạng rgba. Các giá trị offset dương đổ bóng sang phải và xuống dưới, trong khi các giá trị offset âm tương ứng đổ bóng sang trái và lên trên. Để có bóng xung quanh văn bản, chỉ cần đặt giá trị offset về 0. Bán kính mờ xác định độ sắc nét của bóng. Làm sao bán kính lớn hơn mờ, bóng trông càng mềm.

Ưu điểm lớn của bóng văn bản là khả năng thêm nhiều bóng khác nhau cùng một lúc, liệt kê các tham số của chúng được phân tách bằng dấu phẩy. Tính năng này về cơ bản cho phép bạn tạo các hiệu ứng khác nhau.

Đáng tiếc là IE trước phiên bản 10.0 không hỗ trợ text-shadow nên chúng ta sẽ không thấy được vẻ đẹp nào ở trình duyệt này.

Văn bản phác thảo được đặc trưng bởi thực tế là mỗi chữ cái được bao quanh bởi một dòng, màu của nó khác với màu của văn bản (Hình 2). Hiệu ứng này trông đẹp nhất với phông chữ sans serif. size lớn, ví dụ: tiêu đề. Đối với nội dung văn bản, việc sử dụng dàn ý chỉ làm giảm khả năng đọc.

Cơm. 2. Dàn ý văn bản

Một đường viền có thể được tạo bằng hai phương pháp. Trong phương pháp đầu tiên, chúng tôi đặt độ lệch bóng bằng 0 và bán kính mờ nhỏ, nghĩa đen là 1-2 pixel (ví dụ 1). Việc tăng giá trị độ mờ sẽ biến đường viền thành ánh sáng xung quanh văn bản, đây là một hiệu ứng khác.

Ví dụ 1: Dàn ý văn bản

phác thảo văn bản

Đường viền được thực hiện bằng phương pháp này được hiển thị trong Hình. 1. Đường viền hơi mờ nên đối với những ai muốn có đường nét rõ ràng thì nên sử dụng phương pháp thứ hai. Nó bao gồm việc sử dụng bốn bóng sắc nét cùng màu, chúng được dịch chuyển sang các góc khác nhau bằng một pixel (ví dụ 2).

Ví dụ 2. Bốn bóng cho đường viền

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

phác thảo văn bản

Sự xuất hiện của một đường viền như vậy được hiển thị trong Hình. 3. Điều đáng chú ý là đường viền biểu cảm hơn.

Cơm. 3. Đường viền với bốn bóng

Để thêm hiệu ứng văn bản 3D như trong Hình. 4, một số bóng được áp dụng đồng thời, được dịch chuyển tương đối với nhau một pixel theo chiều ngang và chiều dọc.

Cơm. 4. Văn bản 3D

Cá nhân tôi, loại văn bản này làm tôi nhớ đến kiểu chữ cổ điển và một lần nữa, nó phù hợp nhất cho các tiêu đề hơn là nội dung của trang web.

Số lượng bóng phụ thuộc vào mức độ bạn muốn “kéo” văn bản về phía trước. Số lượng lớn làm tăng “độ sâu” của các chữ cái, ngược lại, làm giảm tính ba chiều. Ví dụ 3 sử dụng năm bóng cùng màu.

Ví dụ 3: Bóng để thêm ba chiều

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Tủ lạnh mười buồng

Đối với tất cả các bóng, chúng tôi đặt bán kính mờ về 0 và cùng màu. Các bóng chỉ khác nhau ở giá trị offset của chúng.

dập nổi văn bản

Để tạo hiệu ứng dập nổi văn bản hay nói cách khác là phù điêu, màu sắc của chữ phải trùng với màu nền. Một phần của các chữ “nhô ra” trên bề mặt dường như được chiếu sáng, trong khi phần còn lại nằm trong bóng tối (Hình 5).

Cơm. 5. Văn bản dập nổi

Để thêm hiệu ứng tương tự, chúng ta cần hai bóng - chúng ta di chuyển bóng trắng lên bên trái một pixel và bóng màu xám đậm xuống bên phải (ví dụ 4).

Ví dụ 4: Chữ nổi

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Văn bản dập nổi

Sự nhẹ nhõm trông đẹp nhất trên nền màu xám, nên hiệu quả không phù hợp với tất cả mọi người bảng màuđịa điểm. Nhân tiện, nó dễ dàng được nhấn hơn là văn bản được ép đùn; chỉ cần hoán đổi màu bóng.

Bóng văn bản: #333 -1px -1px 0, #fff 1px 1px 0;

Ánh sáng

Ánh sáng xung quanh văn bản là cùng một bóng, chỉ có điều nó sáng và tương phản. Vì vậy, để tạo hiệu ứng phát sáng, chỉ cần thay đổi màu của bóng và đặt bán kính mờ mong muốn là đủ. Vì ánh sáng xung quanh văn bản phải đồng nhất nên độ lệch bóng phải được đặt thành 0. Trong bộ lễ phục. Hình 6 cho thấy một ví dụ về phát sáng với nhiều màu sắc khác nhau.

Cơm. 6. Văn bản phát sáng

Ví dụ 5. Phát sáng

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Bên sáng

Mặt tối

Mơ hồ

Bản thân bóng bị mờ, vì vậy nếu chúng ta chỉ để lại bóng và ẩn văn bản, chúng ta sẽ nhận được các chữ cái mờ (Hình 7) và có thể dễ dàng điều chỉnh mức độ mờ bằng cách sử dụng tham số text-shadow.

Cơm. 7. Văn bản bị mờ

Trốn văn bản gốc chỉ cần đặt màu là trong suốt là đủ (ví dụ 6). Khi đó, màu bóng sẽ đóng vai trò là màu văn bản và bán kính mờ sẽ đặt mức độ mờ của các chữ cái.

Ví dụ 6: Làm mờ văn bản

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Văn bản bị mờ

Lớp bóng và lớp giả

Bóng không cần phải được thêm trực tiếp vào văn bản; thuộc tính text-shadow hoạt động tốt với các lớp giả :hover và :first-letter. Nhờ đó chúng tôi nhận được hiệu ứng thú vị với văn bản như đường viền của chữ cái đầu tiên của đoạn văn hoặc ánh sáng của một liên kết khi bạn di con trỏ chuột qua nó. Ví dụ 7 cho thấy những kỹ thuật như vậy.

Ví dụ 7: Sử dụng các lớp giả

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Dự án ngách đang chậm lại kênh truyền thống bất kể chi phí. Cấu trúc thị trường, loại bỏ các chi tiết, ổn định bộ phận tiếp thị và bán hàng, sử dụng kinh nghiệm của các chiến dịch trước đó. Tất nhiên, việc xây dựng thương hiệu sẽ đẩy lùi PR hội tụ một cách tự nhiên, giành được một phân khúc thị trường. Vai trò đồng bộ hóa đầu tư địa vị xã hội, Cạnh tranh gia tăng. Nhãn hiệu xác định kế hoạch vị trí một cách tự nhiên, sử dụng kinh nghiệm của các chiến dịch trước đó.

Tất nhiên, bạn có thể tạo vẻ đẹp trong Photoshop, nhưng phải làm gì nếu bạn cần lưu văn bản và không dán kèm theo một bức ảnh đẹp?

Ví dụ: để lập chỉ mục tốt hơn, tôi muốn đặt văn bản tiêu đề trong thẻ

. Nhưng đồng thời vẫn giữ được vẻ đẹp. Như thế này:

Vì vậy, hãy tạo một số văn bản có bóng bằng CSS:

CSS cấp 3 có thuộc tính "text-shadow" để thêm bóng vào mỗi chữ cái của bất kỳ văn bản nào.

1. Hình thức đơn giản nhất: h3 (bóng văn bản: 0,1em 0,1em #333)
2. Bóng chữ mờ: h3.b (bóng văn bản: 0,1em 0,1em 0,2em đen)
3. Có thể đọc được văn bản màu trắng: h3.a (màu: trắng; bóng văn bản: đen 0,1em 0,1em 0,2em)
4. Bóng nhiều lớp: h3 (bóng văn bản: 0,2em 0,5em 0,1em #600, -0,3em 0,1em 0,1em #060, 0,4em -0,3em 0,1em #006)
5. Vẽ chữ và phác thảo: h3 (bóng văn bản: -1px 0 đen, 0 1px đen, 1px 0 đen, 0 -1px đen)
6. Đèn neon phát sáng: h3.a (bóng văn bản: 0 0 0.2em #8F7) h3.b (bóng văn bản: 0 0 0.2em #F87, 0 0 0.2em #F87) h3.c (bóng văn bản: 0 0 0.2em #87F, 0 0 0.2em #87F, 0 0 0.2em #87F)

Một ví dụ thú vị khác:

Phác thảo văn bản bằng CSS

Có thể phác thảo văn bản bằng CSS mà không cần dùng đến tập lệnh. Hiệu ứng này có thể được tạo bằng thuộc tính text-shadow. Mặc dù IE không chấp nhận thuộc tính này trong bất kỳ phiên bản nào của nó - trong các phiên bản khác trình duyệt phổ biến Công thức được mô tả sẽ hoạt động tốt.

Hãy xem xét đoạn mã dưới đây:

Ví dụ số 1

H1(bóng văn bản: đỏ 1px 0px, đỏ 1px 1px, đỏ 0px 1px, đỏ -1px 1px, đỏ -1px 0px, đỏ -1px -1px, đỏ 0px -1px, đỏ 1px -1px;)

Tham số đầu tiên của thuộc tính text-shadow đặt màu của bóng, tham số thứ hai là độ lệch ngang của bóng so với văn bản, tham số thứ ba là độ lệch dọc. Khi bạn chỉ định lần lượt độ lệch bóng theo mọi hướng xung quanh văn bản 1 pixel, bạn sẽ có được hiệu ứng nét vẽ.

Ví dụ cú đánh số 1

Để làm cho nét vẽ bão hòa hơn, bạn có thể sử dụng tham số thứ tư text-shadow, tham số này chịu trách nhiệm về bán kính mờ của bóng:

Ví dụ số 2

H1(bóng văn bản: đỏ 1px 0px, đỏ 1px 1px, đỏ 0px 1px, đỏ -1px 1px, đỏ -1px 0px, đỏ -1px -1px, đỏ 0px -1px, đỏ 1px -1px, đỏ 0 0 3px, đỏ 0 0 3px, đỏ 0 0 3px, đỏ 0 0 3px, đỏ 0 0 3px, đỏ 0 0 3px, đỏ 0 0 3px, đỏ 0 0 3px;)

Ví dụ cú đánh số 2

Nếu bạn để ý, thuộc tính "red 0 0 3px" được lặp lại nhiều lần. Đây là nơi có hiệu ứng bão hòa. Để đạt được sự xuất hiện rõ ràng hơn của nét vẽ, thuộc tính có thể được thêm vào bằng các tham số khác một số lượng lớn một lần. Nhược điểm duy nhất là nó có thể làm chậm trình duyệt trên các máy tính yếu hơn rất nhiều.

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 biên giới màu viền kiểu 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
  • 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 của 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 qua

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đườ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 đã 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: mỏng | trung bình | dày | nghĩa;

• độ dày đường mỏ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 tạo 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 (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 tôi, việc viết mọi thứ thành một dòng sẽ dễ dàng hơn là tạo thêm văn bản theo kiểu. 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 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 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"