css实现9种阴影效果代码
代码语言:html
所属分类:布局界面
代码描述:css实现9种阴影效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> .wshadow { display: flex; aling-items: center; justify-content: space-around; padding: 3rem 0; background-color: #e3e3e3; } .shadow { display: block; width: 25%; aspect-ratio: 1; height: auto; background: linear-gradient(120deg, #c3c3c3, #FFFFFF); border-radius: 999px; } .sh1{ box-shadow: 28px 28px 50px rgba(13, 39, 80, .16), -23px -23px 45px rgba(255,255,255, 1); } .sh2{ box-shadow: 28px 28px 50px rgba(13, 39, 80, .16), -23px -23px 45px rgba(255,255,255, 1), inset -31px -31px 43px rgba(255,255,255, .64), inset 26px 26px 48px rgba(13, 39, 80, .16); } .sh3{ display: flex; aling-items: center; justify-content: space-around; box-shadow: 28px 28px 50px rgba(13, 39, 80, .16), -23px -23px 45px rgba(255,255,255, 1), inset -31px -31px 43px rgba(255,255,255, .64), inset 26px 26px 48px rgba(13, 39, 80, .16); } .sh4 { margin-top: 25%; width: 50%; height: 50%; box-shadow: 28px 28px 50px rgba(13, 39, 80, .16), -23px -23px 45px rgba(255,255,255, 1); } .shadow2 { display: block; width: 25%; aspect-ratio: 1; height: auto; background: #F0F0F3; border-radius: 999px; } .sh21{ box-shadow: -10px -10px 30px rgba(255,255,255,1), 10px 10px 30px rgba(174,174,192,.4); } .sh22{ box-shadow: -10px -10px 30px rgba(255,255,255,1), 10px 10px 30px rgba(174,174,192,.4), inset -10px -10px 10px rgba(174,174,192,.4), inset 10px 10px 10px rgba(255,255,255,1); } .sh23{ display: flex; aling-items: center; justify-content: space-around; box-shadow: inset -10px -10px 10px rgba(255,255,255,.7), inset 10px 10px 10px rgba(174,174,192,.2); } .shadow3 { display: block; width: 25%; aspect-ratio: 1; height: auto; background: #F0F0F3; border-radius: 999px; } .sh31{ display: flex; aling-items: center; justify-content: space-around; font-family: "Arial Bl.........完整代码请登录后点击上方下载按钮下载查看
网友评论0