想不想讓網頁中的文字更美一些吶?

lixinfang101發表於2018-01-02

1. 文字陰影效果

(1) 使用text-shadow可以使文字有陰影,其使用方式為
  text-shadow : x軸偏移 y軸偏移 擴散度 顏色;

<style type="text/css">
    div{
        font-size:60px;
        text-shadow : 5px 20px 3px red;
    }
</style>
<body>
    <div>文字陰影</div>
</body>
複製程式碼

執行效果如下:

想不想讓網頁中的文字更美一些吶?

(2) 設定文字模糊效果的幾種方式

1) 使用rgba製作文字模糊

2) 用opacity製作文字模糊

3) 設定文字陰影,然後再利用text-fill-color屬性將文字填充顏色設定為透明,也可以達到文字模糊的效果

<style type="text/css">
    .demo1{
        font-size:60px;
        color:rgba(0,0,0,.3);
    }
    .demo2{
        font-size:60px;
        opacity: 0.3;
    }
    .demo3{
        font-size:60px;
        text-shadow:0 0 8px;
        -webkit-text-fill-color: transparent;   /*將文字填充顏色設定為透明*/
    }
</style>
<body>
    <div class="demo1">示例文字1</div>
    <div class="demo2">示例文字2</div>
    <div class="demo3">示例文字3</div>
</body>
複製程式碼

執行效果如下:

想不想讓網頁中的文字更美一些吶?

(3) 設定文字鏤空效果

需要利用text-stroke屬性來設定文字鏤空。

<style type="text/css">
    div{
        font-size:60px;
        -webkit-text-fill-color: transparent;
        -webkit-text-stroke: 1px red;
    }
</style>
<body>
    <div>文字鏤空</div>
</body>
複製程式碼

執行效果如下:

想不想讓網頁中的文字更美一些吶?

(4) 文字的漸變效果

<style type="text/css">
    div{
        font-size:60px;
        -webkit-text-fill-color: transparent;
        background:linear-gradient(to bottom,#fff,red);
        -webkit-background-clip: text; /*規定背景的繪製區域*/
    }
</style>
<body>
    <div>文字漸變</div>
</body>
複製程式碼

執行效果如下:

想不想讓網頁中的文字更美一些吶?

(5) CSS3新增了一些文字對齊的屬性

1) text-align新增加了如下四個屬性值:

justify 兩端對齊,但是對於換行及最後一行不做處理;

start 如果是水平方向,則類似於left;如果是垂直方向,則類似於top;

end 如果是水平方向,則類似於right;如果是垂直方向,則類似於bottom;

justify-all 效果等同於justify,但是會對最後一行也兩端對齊(Chrome瀏覽器不支援此屬性)

<style type="text/css">
    div{
        width:300px;
        border:1px solid #dedede;
        margin-bottom:10px;
    }
    div:nth-of-type(1){
        text-align:justify;
    }
    div:nth-of-type(2){
        text-align:start;
    }
    div:nth-of-type(3){
        text-align:end;
    }
    div:nth-of-type(4){
        text-align: justify-all;
    }
</style>
<body>
    <div>這是justify對齊</div>
    <div>這是start對齊</div>
    <div>這是end對齊</div>
    <div>這是justify-all對齊</div>
</body>
複製程式碼

執行效果如下:

想不想讓網頁中的文字更美一些吶?

如果想讓start和end在垂直方向上起作用,還需要配合一些其他的屬性:

<style type="text/css">
    div{
        width:100px;
        height:200px;
        float:left;
        writing-mode: vertical-lr;
        border:1px solid #dedede;
        margin-right:10px;
    }
    div:nth-of-type(1){
        text-align:start;
    }
    div:nth-of-type(2){
        text-align:end;
    }
</style>
<body>
    <div>這裡是start</div>
    <div>這裡是end</div>
</body>
複製程式碼

執行結果如下:

想不想讓網頁中的文字更美一些吶?

2) 末尾文字對齊

text-align-last,它是用來設定最後一行文字的對齊方式,與text-align幾乎相同。

<style type="text/css">
    div{
        width:256px;
        float:left;
        margin-right:10px;
        border:1px solid #dedede;
    }
    div:nth-of-type(1){
        text-align-last:justify;
    }
    div:nth-of-type(2){
        text-align-last: start;
    }
    div:nth-of-type(3){
        text-align-last: end;
    }
</style>
<body>
    <div>這是一段很長的文字這是一段很長的文字</div>
    <div>這是一段很長的文字這是一段很長的文字</div>
    <div>這是一段很長的文字這是一段很長的文字</div>
</body>
複製程式碼

執行效果如下:

想不想讓網頁中的文字更美一些吶?

可以看到它只對最後一行文字起作用。

3) 文字書寫模式

在CSS3中,還新增了一個文字書寫模式的屬性writing-mode,它的屬性值有:
horizontal-tb 水平方向,從上到下的書寫方式;
vertical-rl 垂直方向,從右到左的書寫方式;
vertical-lr 垂直方向,從左到右的書寫方式;
lr-tb 效果同horizontal-tb(用在IE中)
tb-rl 效果同vertical-rl(用在IE中)
<style type="text/css">
    div{
        width:150px;
        height:100px;
        border:1px solid red;
        margin-bottom:10px;
    }
    div:nth-of-type(1){
        writing-mode: horizontal-tb;
    }
    div:nth-of-type(2){
        writing-mode: vertical-rl;
    }
    div:nth-of-type(3){
        writing-mode: vertical-lr;
    }
    div:nth-of-type(4){
        writing-mode: lr-tb;
    }
    div:nth-of-type(5){
        writing-mode: tb-rl;
    }
</style>
<body>
    <div>水平方向,從上到下的書寫方式</div>
    <div>垂直方向,從右到左的書寫方式</div>
    <div>垂直方向,從左到右的書寫方式</div>
    <div>水平方向,從上到下的書寫方式</div>
    <div>垂直方向,從右到左的書寫方式</div>
</body>
複製程式碼

執行效果如下:

想不想讓網頁中的文字更美一些吶?

4) 關於文字的一些其他屬性

文字超出容器寬度,文字隱藏

文字在一行顯示,超出的文字顯示為省略號,程式碼如下:

<style type="text/css">
    div{
        width:150px;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
        border:1px solid red;
    }
</style>
<body>
    <div>文字超出容器溢位文字超出容器溢位文字超出容器溢位</div>
</body>
複製程式碼

執行效果如下:

想不想讓網頁中的文字更美一些吶?

除了用CSS,還可以用javascript來實現超出文字隱藏的效果,判斷文字的length屬性,如果length大小達到指定個數時就讓它隱藏。

在實際的業務需求中,有時文字可能不是單行隱藏,而是超過兩行才隱藏。在webkit核心的瀏覽器中有一個line-clamp屬性,它可以用來限制一個塊元素顯示的文字行數。
<style type="text/css">
    div{
        width:150px;
        overflow:hidden;
        text-overflow: ellipsis;
        display:-webkit-box;    /*必須結合該屬性,將物件作為彈性盒模型*/
        -webkit-line-clamp:2;   
        -webkit-box-orient: vertical;   /*必須結合該屬性,設定或檢索彈性盒子的子元素的排列方式*/
        border:1px solid red;
    }
</style>
<body>
    <div>今天是元旦,告別2017,迎來2018。今天是元旦,告別2017,迎來2018。</div>
</body>
複製程式碼

執行效果如下:

想不想讓網頁中的文字更美一些吶?

CSS還有一個將字母轉換大小寫的屬性————text-transform

<style type="text/css">
    .box div:nth-of-type(1){
        text-transform:capitalize;
    }
    .box div:nth-of-type(2){
        text-transform: uppercase;
    }
    .box div:nth-of-type(3){
        text-transform: lowercase;
    }
</style>
<body>
    <div class="box">
        <div>css樣式:capitalize(首字母大寫)</div>
        <div>css樣式:uppercase(全部大寫)</div>
        <div>css樣式:lowercase(全部小寫)</div>
    </div>
</body>
複製程式碼

執行效果如下:

想不想讓網頁中的文字更美一些吶?

相關文章