[CSS]文字-立体

CSS 文字立体效果语法text-shadow 属性详解text-shadow:offset-x offset-y blur-radius color;offset-x: 水平偏移距离offset-y: 垂直偏移距离blur-radius: 模糊半径可选color: 阴影颜色效果核心.simple-3d { text-align: center; text-shadow: 1px -1px #fff, -1px 1px #999, -10px 10px 5px #80808080; }未添加属性demo!DOCTYPE html html langzh-CN head meta charsetUTF-8 / meta nameviewport contentwidthdevice-width, initial-scale1.0 / style body { background-color: rgb(219, 211, 211); display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } .test { color: white; font-size: 80px; text-align: center; font-weight: bold; font-family: Arial, sans-serif; } /style /head body div classtesthelloworld/div /body /html添加属性demo!DOCTYPE html html langzh-CN head meta charsetUTF-8 / meta nameviewport contentwidthdevice-width, initial-scale1.0 / style body { background-color: rgb(219, 211, 211); display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } .test { color: white; font-size: 80px; text-align: center; font-weight: bold; font-family: Arial, sans-serif; text-shadow: 1px -1px#fff,-1px 1px #999,-10px 10px 5px#80808080; } /style /head body div classtesthelloworld/div /body /html