div+css实现图片立体长阴影效果代码
代码语言:html
所属分类:布局界面
代码描述:div+css实现图片立体长阴影效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> img { --c: #CBE86B; /* the main color */ --t: 5px; /* thickness of the outline */ width: 200px; /* the image size */ aspect-ratio: 1; /* only square images, don't change this */ object-fit: cover; border-image: linear-gradient(45deg, color-mix(in srgb,var(--c),#000 20%) 50%, color-mix(in srgb,var(--c),#000 40%) 0) 9999/9999px/9999px; clip-path: polygon(0 100%,0 0,100% 0, calc(100% + 9999px) 9999px, 9999px calc(100% + 9999px)); outline: var(.........完整代码请登录后点击上方下载按钮下载查看
网友评论0