CSS3属性——text
生活随笔
收集整理的這篇文章主要介紹了
CSS3属性——text
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
目錄
1.text-shadow
2.text-stroke
3.word-break
4.column系列
（1）columns
（2）column-width
（3）column-count
（4）column-gap
1.text-shadow
設置文字的陰影，四個參數，陰影水平偏移 垂直偏移 模糊值 顏色
【例1】做雕刻
效果
代碼?
<!DOCTYPE html> <html lang="en"> <head><style>body {background-color: #f44444;}div {width: 800px;height: 100px;line-height: 100px;text-align: center;font-size: 70px;position: absolute;left: calc(50% - 400px);top: 100px;color: #ddd;text-shadow: 1px 1px #000,-1px -1px #fff;}</style> </head> <body><div>If We Had Each Other</div> </body> </html>【例2】做鏤空?
效果
代碼
div {width: 1000px;height: 100px;line-height: 100px;text-align: center;font-size: 70px;position: absolute;left: calc(50% - 500px);top: 100px;color: #eee;text-shadow: -1px -1px #000; }【例3】文字背景+文字陰影
效果
代碼
<!DOCTYPE html> <html lang="en"> <head><style>* {margin: 0;padding: 0;}body {background-color: #000;}div {width: 400px;height: 150px;line-height: 150px;font-size: 100px;color: #fff;position: absolute;left: calc(50% - 200px);top: 100px;background-repeat: no-repeat;background-image: url(./img/eye.jpeg);background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;/* text-fill-color: transparent; */background-size: 400px 300px;background-position: -400px -50px;transition: all 1s;text-shadow: 1px 1px 2px rgba(255, 0, 0, 0.2),5px 5px 4px rgba(129, 0, 97, 0.2),-5px -5px 4px rgba(255, 23, 0, 0.2);}div:hover {background-position: 0 -50px;}</style> </head> <body><div>死神來了</div> </body> </html>【注】這里顏色只能使用rgba，因為當給文字填充背景圖片后，會將文字背景化，導致文字在陰影下，效果如下圖，而為陰影設置透明度可解決這一問題
文字背景化2.text-stroke
給文字描邊
效果
代碼
<!DOCTYPE html> <html lang="en"> <head><style>div {width: 400px;height: 100px;line-height: 100px;text-align: center;font-size: 70px;position: absolute;left: calc(50% - 200px);top: 100px;color: transparent;-webkit-text-stroke: 1px #424242;background-image: linear-gradient(#f77,#77f);background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;}</style> </head> <body><div>桃花扇</div> </body> </html>3.word-break
四個參數：normal / keep-all / break-all / break-word
【例1】normal
<!DOCTYPE html> <html lang="en"> <head><style>div {position: absolute;left: calc(50% - 200px);top: 100px;width: 400px;word-break: normal;border: 1px solid #000;padding: 10px;}</style> </head> <body><div>One frightfully hot morning, when she was about nine years old, she awakened feeling very cross, and she became crosser still when she saw that the servant who stood by her bedside was not her Ayah. </body> </html>【結果】
【例2】 break-all，修改上例word-break的屬性值為break-all
【結果】單詞被斷開了
【例3】keep-all（API解釋：對于 CJK（中文，韓文，日文）文本不允許在字符內發生換行）
中文：以句子為基準，即使超出邊界也保留，不做斷句。
<!DOCTYPE html> <html lang="en"> <head><style>div {position: absolute;left: calc(50% - 200px);top: 100px;width: 320px;word-break: keep-all;border: 1px solid #000;padding: 10px;}</style> </head> <body><div>他是正經人，將正經女人與娼妓分得很清楚。可是他同時又是個忙人，談戀愛的時間有限，因此自然而然的喜歡比較爽快的對象。</div> </body> </html>?【結果】
英文：盡可能地不讓單詞溢出而換行，但是若一個單詞地長度大于盒子寬度時，就只能溢出
<!DOCTYPE html> <html lang="en"> <head><style>div {position: absolute;left: calc(50% - 200px);top: 100px;width: 100px;word-break: keep-all;border: 1px solid #000;padding: 10px;}</style> </head> <body><div>The woman looked frightened</div> </body> </html>【結果】
【例4】break-word：盡可能地不讓單詞溢出而換行，但是若一個單詞地長度大于盒子寬度時，就只能斷開單詞
<!DOCTYPE html> <html lang="en"> <head><style>div {position: absolute;left: calc(50% - 200px);top: 100px;width: 50px;word-break: break-word;border: 1px solid #000;padding: 10px;}</style> </head> <body><div>The woman looked frightened</div> </body> </html>【結果】
4.column系列
作用：設置多列
（1）columns
參數：width / count 即，每一列的寬度 / 總共多少列，但是這個參數實際上不能確定，會隨著視口大小改變，如下例
【例】
<!DOCTYPE html> <html lang="en"> <head><style>* {margin: 0;padding: 0;}div {width: 800px;height: 300px;border: 1px solid #424242;border-radius: 20px;padding: 20px;position: absolute;top: 50px;left: 50px;columns: 250px;}</style> </head> <body><div><p>振保的生命里有兩個女人，他說的一個是他的白玫瑰，一個是他的紅玫瑰。一個是圣潔的妻，一個是熱烈的情婦——普通人向來是這樣把節烈兩個字分開來講的。</p><p>也許每一個男子全都有過這樣的兩個女人，至少兩個。娶了紅玫瑰，久而久之，紅的變了墻上的一抹蚊子血，白的還是“床前明月光”；娶了白玫瑰，白的便是衣服上沾的一粒飯黏子，紅的卻是心口上一顆朱砂痣。在振?？刹皇沁@樣的，他是有始有終的，有條有理的。他整個地是這樣一個最合理想的中國現代人物，縱然他遇到的事不是盡合理想的，給他自己心問口，口問心，幾下子一調理，也就變得仿佛理想化了，萬物各得其所。</p><p>他是正途出身，出洋得了學位，并在工廠實習過，非但是真才實學，而且是半工半讀赤手空拳打下來的天下。他在一家老牌子的外商染織公司做到很高的位置。他太太是大學畢業的，身家清白、面目姣好、性情溫和、從不出來交際。一個女兒才九歲，大學的教育費已經給籌備下了。事奉母親，誰都沒有他那么周到；提拔兄弟，誰都沒有他那么經心；辦公，誰都沒有他那么火爆認真；待朋友，誰都沒有他那么熱心，那么義氣、克己。他做人做得十分興頭；他是不相信有來生的，不然他化了名也要重新來一趟?！话愀毁F閑人與文藝青年前進青年雖然笑他俗，卻都不嫌他，因為他的俗氣是外國式的俗氣。他個</p></div> </body> </html>【結果】當容器內容改變時，每列的寬度和總列數會改變
（2）column-width
作用：設置每列的寬度
（3）column-count
作用：設置總列數
（4）column-gap
作用：設置列于列之間間隙的寬度
這一屬性因為各大瀏覽器實現的并不好，所以并沒有達到它預期的效果，本來大家想用它做瀑布流，但是它在布局時的原則是，期望長度得到更多的極大值(有點含糊，例中有詳細的解釋)，而不是按照沿著某一方向增加的，如下例
【例】
<!DOCTYPE html> <html lang="en"> <head><style>* {margin: 0;padding: 0;}div {width: 400px;height: 400px;border: 1px solid #000;column-count: 4;column-gap: 0;}div img {width: 100px;height: 100px;}</style> </head> <body><div><img src="./img/c1.jpg" alt=""></div> </body> </html>【結果】依次增加圖片，結果如下
可以看出來，該屬性并沒有延某一方向鋪滿再換行，去鋪滿下一行。
布局原則筆者考慮了好久，終于總結出來了，當圖片數量大于4時，不能出現某一列的長度為最大值，即，至少有兩個相等的極大值，且期望的到更多的極大值。純自己總結的，沒有權威支持，期待大佬們的指正。
心情：寫博客真快樂，解決了想不通的點~
總結
以上是生活随笔為你收集整理的CSS3属性——text的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： linear-gradient rad
- 下一篇： CSS3属性之resize