CSS 例項之文字的凸起與凹陷

Assist發表於2018-08-15
CSS

一些頁面會有一些凹凸文字效果，這個主要是設定背景+文字陰影來達成這個效果的。文字陰影使用方法如下：

text-shadow: 水平位置 垂直位置 模糊距離 陰影顏色
具體程式碼如下：
 body {
            background-color: grey;
        }
        
        div {
            color: grey;
            font-size: 200px;
            font-family: "微軟雅黑";
        }
        
        div:first-child {
            /* text-shadow: 水平位置 垂直位置 模糊距離 陰影顏色 */
            text-shadow: 1px 1px 2px black, -1px -1px 2px white;
        }
        
        div:last-child {
            text-shadow: 1px 1px 2px white, -1px -1px 2px black;
        }
<body>
    <div>凸起</div>
    <div>凹陷</div>
</body>

結果如下圖所示

將文字上方陰影設為亮色，下方陰影設為暗色則是凸起效果

上方陰影設為暗色，下方陰影設為亮色則是凹陷效果

相關文章