標籤：ack tmg ges map zrc btn rhn bsd tts
CSS3中包含幾個新的文本特徵。
在本章中您將瞭解以下文字屬性：
CSS3 的文本陰影
CSS3 中，text-shadow屬性適用於文本陰影。
您指定了水平陰影，垂直陰影，模糊的距離，以及陰影的顏色：
<style>h1{ text-shadow: 5px 5px 5px #FF0000;}</style>
1. CSS3 box-shadow屬性
CSS3 中 CSS3 box-shadow 屬性適用於盒子陰影
div
{
width:300px;
height:100px;
background-color:yellow;
box-shadow: 10px 10px 5px #888888;
}
接下來給陰影添加顏色
div { box-shadow: 10px 10px 5px grey;}
2. CSS3 Text Overflow屬性
CSS3文本溢出屬性指定應向使用者如何顯示溢出內容
<!DOCTYPE html><html><head><meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> <style> div.test{ white-space:nowrap; width:12em; overflow:hidden; border:1px solid #000000;}</style></head><body><p>以下 div 容器內的文本無法完全顯示，可以看到它被裁剪了。</p><p>div 使用 "text-overflow:ellipsis":</p><div class="test" style="text-overflow:ellipsis;">This is some long text that will not fit in the box</div><p>div 使用 "text-overflow:clip":</p><div class="test" style="text-overflow:clip;">This is some long text that will not fit in the box</div><p>div 使用自訂字串 "text-overflow: >>"(只在 Firefox 瀏覽器下有效):</p><div class="test" style="text-overflow:‘>>‘;">This is some long text that will not fit in the box</div></body></html>
3. CSS3的換行
如果某個單詞太長，不適合在一個地區內，它擴充到外面：
CSS3中，自動換行屬性允許您強制文本換行 - 即使這意味著分裂它中間的一個字：
CSS代碼如下：
p.test{ width:11em; border:1px solid #000000; word-wrap:break-word;}
CSS3 單詞拆分換行
CSS3 單詞拆分換行屬性指定換行規則：
CSS代碼如下：
p.test1{ width:9em; border:1px solid #000000; word-break:keep-all;}p.test2{ width:9em; border:1px solid #000000; word-break:break-all;}</style>
總結:
CSS3 文字效果(陰影)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
