小程序
小游戏
企业微信
微信支付
扫描小程序码分享
4 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
css box-shadow
你好，麻烦通过点击下方“反馈信息”按钮，提供出现问题的。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <style> body { background-color: #1d1c21; height: 400px; width: 100%; } .container { margin-top: 100px; width: 300px; height: 100px; border-radius: 20px; box-shadow: 3px 3px #010101, -1px -1px #47474b; } .flex-center { display: flex; justify-content: space-around; align-items: center; } .box { height: 100%; } .left, .right { display: inline-block; font-size: 40px; color: #f0f0f0; } .left { width: 80px; height: 80px; font-size: 20px; border-radius: 80px; box-shadow: 1px 1px #47474b, -2px -2px #010101; } .left-content { line-height: 80px; text-align: center; } </style> <body> <div class="container"> <div class="box flex-center"> <div class="left"> <div class="left-content">手/自</div> </div> <div class="right"> <span>自动</span> </div> </div> </div> </body> </html>
剩下的自己补充吧
如果你真的尝试不出来，你可以让你家的UI切两张图片代替
box-shadow和text-shadow了解一下
关注后，可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
css box-shadow
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <style> body { background-color: #1d1c21; height: 400px; width: 100%; } .container { margin-top: 100px; width: 300px; height: 100px; border-radius: 20px; box-shadow: 3px 3px #010101, -1px -1px #47474b; } .flex-center { display: flex; justify-content: space-around; align-items: center; } .box { height: 100%; } .left, .right { display: inline-block; font-size: 40px; color: #f0f0f0; } .left { width: 80px; height: 80px; font-size: 20px; border-radius: 80px; box-shadow: 1px 1px #47474b, -2px -2px #010101; } .left-content { line-height: 80px; text-align: center; } </style> <body> <div class="container"> <div class="box flex-center"> <div class="left"> <div class="left-content">手/自</div> </div> <div class="right"> <span>自动</span> </div> </div> </div> </body> </html>剩下的自己补充吧
如果你真的尝试不出来，你可以让你家的UI切两张图片代替
box-shadow和text-shadow了解一下