div+css实现立体照片相册边框阴影效果代码
代码语言:html
所属分类:布局界面
代码描述:div+css实现立体照片相册边框阴影效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> figure { --c: 50px; --p: 30px; --d: 10px; background: red; display: inline-block; padding: var(--p); background: radial-gradient(farthest-side at 0 0, #000, #0000) 0 0 / var(--c) var(--c), radial-gradient(farthest-side at 100% 100%, #000, #0000) 100% 100% / var(--c) var(--c), linear-gradient(#fff 0 0) 50% 50% / calc(100% - var(--p)) calc(100% - var(--p)), linear-gradient(#0000, #000 25% 75%, #0000) 50% 50% / calc(100% - var(--p)) calc(100% - var(--d)), linear-gradient(90deg, #0000, #000 25% 75%, #0000) 50% 50% / calc(100% - var(--d)) calc(100% - var(--p)), radial-gradient(farthest-side at 0 100%, #00000018, #0000) calc(100% - var(--d) * 0.5) calc(var(--d) * 0.5) / var(--d) var(--d), radial-gradient(farthest-side at 100% 0, #00000018, #0000) calc(var(--d) * 0.5) calc(100% - var(--d) * 0.5) / var(--d) var(--d) ; background-repeat: no-repeat; clip-path: polygon(0 var(.........完整代码请登录后点击上方下载按钮下载查看
网友评论0