css3新增屬性??

邊框屬性
背景屬性
文本屬性
顏色屬性

文本屬性??

屬性	說明
text-shadow	為文字添加陰影
box-shadow	在元素的框架上添加陰影效果
text-overflow	確定如何向用戶發出未顯示的溢位內容信號
word-wrap	允許對長的不可分割的單詞進行分割并換行到下一行
word-break	指定了怎樣在單詞內斷行

1. text-shadow（文字陰影）??

text-shadow為文字添加陰影，陰影值之間用逗號隔開，每個陰影值由元素在X和Y方向的偏移量、模糊半徑和顏色值組成

語法：

div{
/* offset-x | offset-y | blur-radius | color */
text-shadow: 1px 1px 2px black;

/* color | offset-x | offset-y | blur-radius */
text-shadow: #fc0 1px 0 10px;

/* offset-x | offset-y | color */
text-shadow: 5px 5px #558abb;

/* color | offset-x | offset-y */
text-shadow: white 2px 5px;

/* offset-x | offset-y
/* Use defaults for color and blur-radius */
text-shadow: 5px 10px;

/* Global values */
text-shadow: inherit;
text-shadow: initial;
text-shadow: unset;  
}

注意：

陰影相對文字的偏移量必寫，顏色和模糊半徑可選
當陰影大于一個時要用逗號區別開陰影之間的引數
當所給的陰影大于一個時，陰影應用的順序為從前到后, 第一個指定的陰影在頂部.
這個屬性同時適用于 ::first-line 以及 ::first-letter 偽元素

例：

h1
{
    /*水平陰影，垂直陰影，模糊的距離，以及陰影的顏色*/ 
    text-shadow: 5px 5px 5px #FF0000;
}

2. box-shadow（盒子陰影）??

box-shadow 屬性用于在元素的框架上添加陰影效果，可以設定多個陰影效果，并用逗號將他們分隔開

該屬性可設定的值包括陰影的X軸偏移量、Y軸偏移量、模糊半徑、擴散半徑和顏色，

幾乎可以在任何元素上使用box-shadow來添加陰影效果，如果元素同時設定了 border-radius 屬性，那么陰影也會有圓角效果，

語法：

div{
/* x偏移量 | y偏移量 | 陰影顏色 */
box-shadow: 60px -16px teal;

/* x偏移量 | y偏移量 | 陰影模糊半徑 | 陰影顏色 */
box-shadow: 10px 5px 5px black;

/* x偏移量 | y偏移量 | 陰影模糊半徑 | 陰影擴散半徑 | 陰影顏色 */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

/* 插頁(陰影向內) | x偏移量 | y偏移量 | 陰影顏色 */
box-shadow: inset 5em 1em gold;

/* 任意數量的陰影，以逗號分隔 */
box-shadow: 3px 3px red, -1em 0 0.4em olive;

/* 全域關鍵字 */
box-shadow: inherit;
box-shadow: initial;
box-shadow: unset;
}

在這里，如果 border-radius 屬性的值：

兩個值：表示x和y的偏移量
三個值：第三個值越大，模糊面積越大，陰影就越大越淡，但不能為負值（模糊度）
四個值：第四個值取正值時，陰影擴大；取負值時，陰影收縮（模糊范圍），默認為0，此時陰影與元素同樣大
inset 關鍵字：如果沒有指定inset，默認陰影在邊框外，即陰影向外擴散；使用 inset 關鍵字會使得陰影落在盒子內部

例：

<style>
    blockquote {
        padding: 20px;
        box-shadow:
                inset 0 -3em 3em rgba(0,0,0,0.1),
                0 0 0 2px rgb(255,255,255),
                0.3em 0.3em 1em rgba(0,0,0,0.3);
    }
</style>
<body>
    <blockquote><q>You may shoot me with your words,<br/>
        You may cut me with your eyes,<br/>
        You may kill me with your hatefulness,<br/>
        But still, like air, I'll rise.</q>
        <p>&mdash; Maya Angelou</p>
    </blockquote>
</body>

3.text-overflow（文本溢位）??

text-overflow 文本溢位屬性指定應向用戶如何顯示溢位內容，它可以被剪切，顯示一個省略號（'...'，U + 2026 HORIZONTAL ELLIPSIS）或顯示一個自定義字串，

注意：

這個屬性只對那些在塊級元素溢位的內容有效，但是必須要與塊級元素行內(inline)方向一致（舉個反例：內容在盒子的下方溢位，此時就不會生效）
這個屬性并不會強制“溢位”事件的發生

文本可能在以下情況下溢位：當其因為某種原因而無法換行(例子：設定了"white-space:nowrap")，或者一個單詞因為太長而不能合理地被安置(fit)

“關于更多text-overflow 屬性的使用，在這里我已經做出了詳解：點擊鏈接跳轉 ”

3.word-wrap（單詞換行）??

word-wrap 自動換行屬性允許您強制文本換行 - 即使這意味著分裂它中間的一個字

注意：

word-wrap屬性原本屬于微軟的一個私有屬性，在CSS3現在的文本規范草案中已經被重名為overflow-wrap
word-wrap現在被當作overflow-wrap的 “別名”，穩定的谷歌 Chrome 和 Opera 瀏覽器版本支持這種新語法，

p {
    /*表示如果行內沒有多余的地方容納該單詞到結尾，則那些正常的不能被分割的單詞會被強制分割換行*/
    word-wrap:break-word;
}

4.word-break（單詞拆分換行）??

word-break 指定了怎樣在單詞內斷行

div{
word-break: normal;
word-break: break-all;
word-break: keep-all;
word-break: break-word; /* deprecated */
}

normal ：使用默認的斷行規則
break-all ：對于non-CJK (CJK 指中文/日文/韓文) 文本，允許在單詞內換行，
keep-all ：只能在半角空格或連字符處換行

OK，在這里我大概把css3中新增的文本屬性介紹完了，有不對的望各位大佬明確指出~~??????????????

本文來自博客園，作者：不知名前端李小白，轉載請注明原文鏈接：https://www.cnblogs.com/libo-web/p/15414629.html

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/319606.html

標籤：其他

上一篇：AutoCAD云產品平臺ForgeViewer格式離線部署思路分析

下一篇：Curl命令（或無頭的Python替代品）用于從新的www.ffiec.gov網站刮取銀行控股公司（FRY-9C）的資料？

css3新增文本屬性

css3新增屬性??

文本屬性??

1. text-shadow（文字陰影）??

語法：

2. box-shadow（盒子陰影）??

語法：

3.text-overflow（文本溢位）??

3.word-wrap（單詞換行）??

4.word-break（單詞拆分換行）??