本次使用的是css中的text-shadow做的一個小demo
簡單介紹一下text-shadow
text-shadow 為文字添加陰影”牛可以為文字與 decoration 添加多個陰影仗谆，陰影值之間用逗號隔開。每個陰影值由元素在 X 和 Y 方向的偏移量、模糊半徑和顏色值組成律姨。
| 參數(shù) | 描述 |
|---|---|
| h-shadow | 必需。水平陰影的位置臼疫。允許負值 |
| v-shadow | 必需择份。垂直陰影的位置。允許負值 |
| blur | 可選烫堤。模糊的距離 |
| color | 可選荣赶。陰影的顏色 |
首先新增一個html文件寫入標(biāo)簽h1
<h1>小樂子</h1>
將body背景設(shè)置黑色簡單設(shè)置一下h1樣式、準(zhǔn)備工作就完成了
body{
background-color: #000;
}
h1{
font-size: 6em;
color: #000;
}
先小試一下text-shadow在h1中加入一行代碼
h1{
font-size: 6em;
color: #000;
text-shadow: 1px 0 #fff;//新增的一行
}
效果如下
[圖片上傳失敗...(image-a0a313-1666927875150)]
這個只是加了一個方向的陰影效果所以咱們把八個方向補全就得到一個空心的文字效果啦 一起實現(xiàn)一下
h1{
font-size: 6em;
color: #000;
text-shadow: 1px 0 #fff,
1px 1px #fff,
1px -1px #fff,
0 1px #fff,
0 -1px #fff,
-1px 0 #fff,
-1px 1px #fff,
-1px -1px #fff;
}
下面是代碼片段和最終效果
代碼片段
