一分鐘教你如何實現惟美的文字描邊

前兩天有一個原來的同事問我文字描邊怎麼作,那麼今天咱們就來講說文字描邊這個樣式怎麼實現.

一.文字描邊
-webkit-text-stroke 文字描邊
參數:
參數1 描邊大小
參數2 描邊顏色

注意: webkit內核有效 只能使用在谷歌 ,safir有效

-webkit-text-stroke: 1px red;

二.實例

上圖的效果咱們怎樣來實現呢?

HTML結構
CSS樣式
字體樣式
字體顏色
文字描邊
文本陰影
那咱們來看一下具體代碼:

HTML:

<p>我最親愛的,你過得怎麼樣?沒個人日子,你別來無恙.</p>

CSS:

p{

  font-size: 45px;                               /*字體大小*/ 
  font-weight: 700;                             /*字體加粗*/ 
  font-family: "華文行楷";                       /*字體樣式*/ 
  text-align: center; 
  color: #fff; 
    
  -webkit-text-stroke: 1px pink;              /*字體描邊 1px的描邊大小 粉色*/ 
  text-shadow: 5px 5px 5px rgba(211,211,211,0.6);   /*文本陰影*/ 
  }

其實文字描邊很簡單,在給樣式的時候注意你給的樣式順序,以及大小,以達到目的爲基準就能夠了.樣式並不可怕,可怕的是你的粗枝大葉!