css文字效果（文字剪貼蒙版，text-shodow的應用，文字排版等…）

記錄幾種常見的文字效果

示例查看：http://pangyongsheng.github.io/cssFont/

1、文字剪貼蒙版

在PS中，對文字圖層柵格化，而後可將其餘圖層建立爲文字的剪貼蒙版,而在css中要實現相似的文字效果，咱們須要先設置背景裁剪（background-clip）爲文字（text）,而後將字體顏色（color）或者文字填充（text-fill-color）設置爲透明（transparent）便可實現將背景轉化爲當前元素的剪貼蒙版的相同效果；

 

爲了更好的效果首先咱們定義一個簡單的的公共樣式，以下：

.div{
    font-weight: bold;
    font-size: 80px;
    margin: 50px;
    border: 10px dashed #666;
}

一、背景圖片剪貼蒙版

設置背景圖片，設置背景裁剪和文字顏色

.bg-clip{
    background-image: url(../img/1.jpg);
    background-size: cover;
    -webkit-background-clip: text;
    background-clip: text;
    color:transparent;
}

<div class="div bg-clip">圖片背景文字剪貼蒙版</div>

效果如上第一個

二、漸變條紋背景剪貼蒙版

使用線性漸變設置一個七彩條紋的背景，而後設置背景裁剪爲text和文字填充顏色爲透明：

.bg-clip2{
    background:linear-gradient(
        90deg,
            red 0%,red 14.3%,
            orange 0,orange 28.6%,
            yellow 0,yellow 42.9%,
            green 0,green 57.2%,
            blue 0, blue 71.5%,
            indigo 0,indigo 85.8%,
            violet 0, violet 100%
        );
    background-repeat:no-repeat;
    background-size: cover;
    -webkit-background-clip: text;
    background-clip: text;
        -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
}

<div class="div bg-clip2">漸變背景文字剪貼蒙版</div>

三、剪貼蒙版的動畫效果

同上，首先設置一個漸變背景，但這裏咱們background-size寬度設爲50%，最後在添加一個背景移動的動畫：

.bg-clip3{
    background-image: linear-gradient(
              45deg, 
              #ccc 0%, #ccc 30%, 
              #00B4F1 0%, #00B4F1 70%, 
              #ccc 0%, #ccc 100%);
    background-size: 50% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color:transparent;
    background-position: 0% 50%;
    animation: aitf 8s linear infinite;
}
@keyframes aitf {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

<div class="div bg-clip3">剪貼蒙版動畫效果</div>

2、text-shadow的應用

text-shadow有四個屬性值

屬性	值
h-shadow	水平陰影的位置。容許負值
v-shadow	必需。垂直陰影的位置。容許負值是
blur	可選。模糊的距離
color	可選。陰影的顏色

text-shadow屬性能夠向文本添加一個或多個陰影，咱們可由此做出許多不一樣的有趣效果，如下僅爲幾個參考示例：

一、文字的投影效果

最基本的投影效果

.shadow1 {
    color: red;
    text-shadow: 5px 5px 5px #000;
}

二、文字的描邊效果

對文字添加四個分別向上下左右位移爲1px的紅色投影，便可實現紅色描邊效果

.shadow2 {
    color: white;
    text-shadow: -1px 0px 1px red, 1px 0px 1px red, 0px -1px 1px red, 0px 1px 1px red;
}

三、文字的浮雕效果

對文字添加向左上偏移1px的黑色（暗）模糊值較小的投影，再分別添加向右和向下的藍色（亮色）模糊值較大的投影，便可實現文字浮雕特效

.shadow3 {
    color: white;
    text-shadow: -1px -1px 3px black, 0 0 5px blue, 0 0 8px blue;
}

四、文字的剪紙效果

文字設爲白色，添加向左1px的黑色投影，添加向右和向下的藍色投影：

.shadow4 {
    color:  white;
    text-shadow: 1px 0px 0px #00B4F1,2px 0px 0px #00B4F1,3px 1px 0px #00B4F1,0px 1px 0px #000;
}

五、文字的發光效果

添加兩層無偏移的白色投影

.shadow5 {
    color: blue;
    background-color:#949191;
    text-shadow: 0px 0px 3px white, 0px 0px 5px white;
}

3、文字的排版

一、文字的環形排版
這裏應用了svg路徑實現，建立一個圓形的路徑，在和元素寫入文本，經過xlink:href屬性把它鏈到咱們的圓上，設置圓形填充爲none,svg標籤overflow爲visib，參考以下：

<div class="circlar">
        <svg viewBox="0 0 100 100">
            <path d="M 0,50 a 50,50 0 1, 1 0, 1 z" id="circle"></path>
            <text>
                <textPath xlink:href="#circle">
                    這是一個圓形文字效果w(ﾟДﾟ)w ~~~！！！
                </textPath>
            </text>
        </svg>
    </div>

.circlar path{ 
    fill: none; 
}
.circlar{
    width: 300px;
    height: 300px;
    margin: 100px;
}
.circlar svg{
    display: block;
    overflow: visible;
}

二、自右向左的豎排文字

經過設置writing-mode的值內容塊固有的書寫方向

屬性	值
vertical-rl	垂直的自右到左
vertical-lr	垂直的自左到右
sideways-rl	水平的自右到左
sideways-lr	水平的自左到右

示例：

.tbl{
    margin: 100px;
    writing-mode:vertical-rl;
}
.tbl>span::after{
    content: '\A';
    white-space: pre;
}

<div class="tbl">
        <span>何日歸家洗客袍？</span>
        <span>銀字笙調，心字香燒。</span>
        <span>流光容易把人拋，紅了櫻桃，綠了芭蕉。</span>
    </div>

三、換行

最後安利一種文字換行的方法，在上一的示例中已有使用:在Unicode中有一個轉義字符是等同於換行的：0x000A。在CSS中，能夠寫成"\000A"，或"\A",經過僞類加入標籤，便可實現各個標籤的換行，如上示例中爲沒一句詩的span元素添加換行；