Thứ Hai, 30 tháng 12, 2013
CSS3 Text Effects
Hiệu ứng CSS3 Tiêu đề
CSS3 có một số tính năng văn bản mới.
Trong chương này, bạn sẽ tìm hiểu về các thuộc tính văn bản sau đây:
- text-shadow
- word-wrap
Hỗ trợ trình duyệt
| Tài sản | Hỗ trợ trình duyệt | ||||
|---|---|---|---|---|---|
| text-shadow | |||||
| word-wrap | |||||
Internet Explorer 10, Firefox, Chrome, Safari, và Opera hỗ trợ các thuộc tính văn bản-bóng.
Tất cả các trình duyệt hỗ trợ các thuộc tính word-wrap.
Lưu ý: Internet Explorer 9 và các phiên bản trước đó, không hỗ trợ tài sản text-shadow.
CSS3 Text Shadow
Trong CSS3, tài sản text-shadow áp dụng bóng tối để văn bản.
Bạn chỉ định bóng ngang, bóng thẳng đứng, khoảng cách mờ, và màu sắc của bóng:
Ví dụ
Thêm một bóng tối để một tiêu đề:
<!DOCTYPE html>
<html>
<head>
<style>
h1
{
text-shadow: 5px 5px 5px #FF0000;
}
</style>
</head>
<body>
<h1>Text-shadow effect!</h1>
<p><b>Note:</b> Internet Explorer 9 and earlier versions, does not support the text-shadow property.</p>
</body>
</html>
Thử nó cho mình »
CSS3 Lời Gói
Nếu một từ quá dài để phù hợp trong một khu vực, nó mở rộng bên ngoài:
Đoạn này có một từ rất lâu: thisisaveryveryveryveryveryverylongword.Từ lâu sẽ phá vỡ và quấn vào dòng tiếp theo.
Trong CSS3, tài sản word-wrap cho phép bạn để buộc các văn bản để bọc - ngay cả khi nó có nghĩa là phải tách nhỏ ở giữa một từ:
Đoạn này có một từ rất lâu: thisisaveryveryveryveryveryverylongword.Từ lâu sẽ phá vỡ và quấn vào dòng tiếp theo.
Các mã CSS như sau:
Ví dụ
Cho phép từ lâu để có thể phá vỡ và quấn vào dòng tiếp theo:
<!DOCTYPE html>
<html>
<head>
<style>
p.test
{
width:11em;
border:1px solid #000000;
word-wrap:break-word;
}
</style>
</head>
<body>
<p class="test"> This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p>
</body>
</html>
Thử nó cho mình »
Đăng ký:
Đăng Nhận xét (Atom)
Không có nhận xét nào:
Đăng nhận xét