div+css实现图片长阴影效果代码
代码语言:html
所属分类:布局界面
代码描述:div+css实现图片长阴影效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> img { --c: #A7DBD8; --s: 10px; /* the border thickness*/ width: 200px; border-radius: 50%; /* works with any value or without */ outline: var(--s) solid var(--c) } .top { border-image: linear-gradient(var(--c) 50%,#0000 0) fill 0//100vh var(--s); } .bottom { border-image: linear-gradient(#0000 50%,var(--c) 0) fill 0//100vh var(--s); } .right { border-image: linear-gradient(90deg,#0000 50%,var(--c) 0) fill 0//var(--s) 100vw; } .left { border-image: linear-gradient(90deg,var(--c) 50%,#0000 0) fill 0//var(--s) 100vw; } img:nth-child(3n + 1) { border-radius: 20%; } body { margin: 0; min-height: 100vh; display: grid; grid-template-columns: auto auto; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0