Tạo bóng cho văn bản bằng CSS. Phác thảo văn bản bằng CSS. Phác thảo văn bản bằng CSS có nghĩa là: có hai cách để triển khai ví dụ. Đường viền mỏng, sắc nét

Để 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 đườ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. 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 đườ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 (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ó 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; /* Đặt khối vào giữa */ đệ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: đỏ;

Đườ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. Đường viền được chỉ định bằng cách sử dụng thuộc tính đường viền tốc ký. 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, các khung luôn được vẽ 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ị. Đố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ự bắt đầu	sự bắt đầ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 văn bản của phần tử. Nếu phần tử không có văn bản thì màu đường viền sẽ giống với màu văn bản của 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	Số lượt cài đặt màu trong suốt cho khung. Đồ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; )

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 : 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
  • đườ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 ở đị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

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 đã 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
• độ 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 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"

3,5 trên 5

Bạn có nghĩ rằng điều đó là có thể với một vài thẻ và CSS thuần túy tạo một hình tam giác có thể mở rộng? Còn hình ngũ giác thì sao? Nhưng một ngôi sao như vậy? Tôi nghĩ nhiều người nghĩ là không. Trên thực tế điều đó là có thể.

Vì vậy, hôm nay chúng ta có một bài thí nghiệm sau. Chúng tôi sẽ chơi với tất cả mọi người được biết đến Thuộc tính CSS- đường viền (và tất cả những gì liên quan đến nó). Trong quá trình thử nghiệm, chúng ta sẽ xem xét cách tạo một số đa giác đơn giản, một ngôi sao và xem xét một trường hợp mà những kỹ thuật này có thể được sử dụng trong thực tế. Đi!

Hình dạng hình học đơn giản

Vì vậy hãy bắt đầu với ví dụ đơn giản. Bạn có biết vẽ hình tam giác không? sử dụng HTML và CSS? Và như thế này:

HTML

CSS

.hình thang ( Vertical-align: text-bottom; )

Hình thang,
.polygon ( hiển thị: -moz-inline-block; )

đa giác,
.hình thang ( lề:0; phần đệm: 0; nền: không có; )

Đa giác ( chiều rộng: 10em; chiều cao: 10em; đường viền: không có; hiển thị: khối nội tuyến; căn chỉnh văn bản: giữa; )
.hình thang(
hiển thị: khối nội tuyến; chiều rộng: 1px; chiều cao: 0; lề: 0 tự động;
viền trái: 5em trong suốt; viền bên phải: 5em trong suốt;
}

Đa giác .aa ( viền-đáy: 10em; viền-trên: không có; )

Polygon.r2 ( chiều cao: 0em; )

Polygon.r3 ( chiều cao: 8,66em; )
.polygon.r3 .trapezoid ( chiều rộng đường viền: 8,66em 5em; )

div.eg ( chiều rộng: 10em; nền: #FFF; lề: 0 0; phần đệm: 1em; )
div.eg .polygon ( hiển thị: khối; lề: 0 tự động; )

R3 (màu: đỏ; cỡ chữ: 0,5em;)

Ngôi sao

HTML

Ngôi sao

CSS

#ngôi sao(
chiều rộng: 15em;
chiều cao: 14,27em;
vị trí: tương đối;
}

#khoảng sao,
#ngôi sao(
hiển thị: khối;
}

#đứng đầu(
chiều rộng: 0;
chiều cao: 0;
lề: tự động;
viền bên phải: 4,64em trong suốt;
viền trái: 4,64em trong suốt;
viền-đáy: 14,27em rắn;
}

#trung tâm(
chiều rộng: 5,7em;
viền bên phải: 4,65em trong suốt;
viền trái: 4,65em trong suốt;
viền trên: 3,36em rắn;
chiều cao: 0;
vị trí: tuyệt đối;
trên cùng: 5,46em;
trái: 0;
chỉ số z: 100;
căn chỉnh văn bản: giữa;
}

#đáy(
vị trí: tuyệt đối;
đáy: 0;
trái: 2.852em;
viền bên phải: 4.635em trong suốt;
viền trái: 4.635em trong suốt;
viền dưới: 3,4em rắn #fff;
chiều rộng: 0;
chiều cao: 0;
}

#nhịp trung tâm(
lề trên: -2em;
màu: #000;
độ dày phông chữ: đậm;
}

a#star:di chuột #khoảng trung tâm(
màu sắc: #fff;
màu nền: trong suốt;
}

một ngôi sao(
màu: #f90;
màu nền: trong suốt;
}
a#star:di chuột(
màu: #fc3;
màu nền: trong suốt;
}

Một số ví dụ khác

• Cây thông Noel và cách bố trí khác thường của Eric Meyer;
• Các ô và menu từ kỹ thuật viên trưởng của Technocracy;

Xin chào các độc giả thân mến. Hôm nay tôi sẽ nói với bạn và chỉ cho bạn cách bạn có thể làm điều đó trong đột quỵ css chữ. Chúng tôi sẽ thực hiện tất cả các thao tác chỉ với thuộc tính text-shadow.

Đường nét mỏng, sắc nét

Là một văn bản mà chúng tôi sẽ kiểm tra tất cả các ý tưởng của mình, tôi đề xuất sử dụng văn bản này:

Ở đây bạn có thể thấy khối có văn bản có lớp text-dec. Bằng cách này, chúng ta sẽ truy cập phần tử của mình trong css, áp dụng cho nó thuộc tính cần thiết. Vì vậy, làm thế nào để tạo một nét mỏng:

Văn bản-dec( cỡ chữ: 50px; màu: vàng; bóng văn bản: 1px 1px 0 đen, -1px -1px 0 đen )

Hãy hỏi ngay size lớn phông chữ để mọi thứ có thể nhìn thấy rất rõ ràng và màu văn bản chẳng hạn là màu vàng. Dòng thứ ba trong trường hợp của chúng ta thực hiện chính nét đó.

Thuộc tính text-shadow cho phép bạn thêm bóng vào văn bản, bạn có thể thêm bao nhiêu bóng tùy thích, phân tách bằng dấu phẩy. Cú pháp thuộc tính là:

Bóng văn bản: bù ngang | dọc | mờ | màu sắc

Trong trường hợp của chúng tôi, trước tiên chúng tôi đặt một khoảng lệch nhỏ xuống và sang trái, sau đó lên và sang phải. Kết quả là văn bản đã được phác thảo dọc theo toàn bộ đường viền của nó. Nếu bạn thêm độ mờ 10 pixel cho mỗi bóng, nó sẽ trông như thế này:

nét mờ

Một cách tiếp cận khác là không chỉ định phần bù mà chỉ xác định độ mờ - khi đó văn bản cũng sẽ được viền nhưng không rõ ràng. Hãy thêm cùng một văn bản vào html, nhưng chỉ cần đặt một lớp kiểu khác - text-dec2:

Text-dec2( cỡ chữ: 50px; màu: xanh; bóng văn bản: 0 0 7px đỏ; )

Nó trông như thế này:

nét đậm

Điều này khó thực hiện hơn vì việc di chuyển bóng quá nhiều có thể khiến văn bản không thể đọc được. Tuy nhiên, có thể đạt được một hiệu ứng nhất định, mặc dù điều này sẽ yêu cầu thêm nhiều bóng hơn so với các trường hợp trước. Theo đó, bổ sung vào html mới đoạn văn bản với các lớp text-dec3 và text-dec4 . Và đây là phong cách dành cho họ:

Text-dec3( cỡ chữ: 50px; màu: vàng; bóng văn bản: 1px 1px 0 đen, -1px -1px 0 đen, 2px 2px 0 đen, -2px -2px 0 đen, 3px 3px 0 đen, -3px - 3px 0 đen, 4px 4px 0 đen, -4px -4px 0 đen ) .text-dec4( cỡ chữ: 50px; màu: vàng; bóng văn bản: -1px 1px 0 đen, 1px -1px 0 đen, -2px 2px 0 đen, 2px -2px 0 đen, -3px 3px 0 đen, 3px -3px 0 đen, -4px 4px 0 đen, 4px -4px 0 đen )

Như bạn có thể thấy, văn bản vẫn dễ đọc và đồng thời nhận được đường viền màu đen khá đẹp. Bản chất của phương pháp này là chúng tôi dần dần thêm các bóng mới, tăng độ lệch lên 1 pixel mỗi lần.

Hành trình thậm chí còn dày hơn ở tất cả các mặt

Hơn nữa - khó khăn hơn. Cá nhân tôi không biết cách thực hiện đúng nét trên tất cả các cạnh, nhưng sau đó tôi tình cờ thấy trên Internet một trình tạo bóng văn bản, cho phép bạn tùy chỉnh bóng ở chế độ trực quan và sau đó bạn chỉ cần sao chép mã của nó . Đây là một liên kết đến máy phát điện.
Với sự giúp đỡ của nó, tôi đã có thể tạo ra một cái bóng như thế này:

Tôi sẽ không cung cấp mã, nó chiếm tới 50 dòng. Tuy nhiên, hãy tìm chính bạn trong trình tạo.

CSS chưa phải là toàn năng

Trên này tính năng cssđang kết thúc. Nếu bạn muốn một nét vẽ đậm đẹp mắt như thế này:
Sau đó, tạo nó bằng Photoshop và chính văn bản sẽ phải được chèn vào trang web dưới dạng hình ảnh

Cho đến nay tôi đã biết các tùy chọn như cách phác thảo văn bản trong CSS. Có thể bạn biết một số, hãy viết bình luận. Lần tới tôi sẽ chỉ cho bạn một số hiệu ứng khác mà bạn có thể thực hiện với văn bản bằng thuộc tính text-shadow.