一分鐘教你如何實現(xiàn)唯美的文字描邊

書館兒 2022-06-07 發(fā)布于湖北

展開全文

前兩天有一個原來的同事問我文字描邊怎么做,那么今天我們就來說說文字描邊這個樣式怎么實現(xiàn).

一.文字描邊

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

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

-webkit-text-stroke: 1px red;

二.實例

上圖的效果我們怎樣來實現(xiàn)呢?

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);   /*文本陰影*/ 
  }

其實文字描邊很簡單,在給樣式的時候注意你給的樣式順序,以及大小,以達到目的為基準就可以了.樣式并不可怕,可怕的是你的粗心大意