css实现纸条贴边粘贴纸效果代码
代码语言:html
所属分类:布局界面
代码描述:css实现纸条贴边粘贴纸效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link href="https://fonts.googleapis.com/css2?family=Caveat&display=swap" rel="stylesheet"> <style> :root { --pink: #ecb2ba; --pink-dark: #c6939a; --tape-gray: #dbd8be; --tape-edge-gray: #b7b49d; --transparent: rgba(255, 255, 255, 0); } body { background: #ebf4e9; padding: 20px; display: flex; justify-content: center; flex-direction: column; } .pink { --paper-color: var(--pink); --paper-dark: var(--pink-dark); --shadow-size: 1px; --transparent: rgba(236, 178, 186, 0); } .blue { --paper-color: #d5e0f9; --paper-dark: #c2d0ea; --shadow-size: 3px; --transparent: rgba(213, 224, 249, 0); } .paper { position: relative; background: linear-gradient( to bottom right, var(--paper-dark), 20%, var(--transparent) ), var(--paper-color); min-width: 250px; min-height: 130px; display: flex; align-items: center; justify-content: center; font-family: "Caveat", cursive; font-size: 2rem; box-shadow: var(--shadow-size) var(--shadow-size) 2px var(--paper-dark); margin: auto; margin-top: 50px; } .paper::after { content: ""; position: absolute; width: 100%; height: 100%; background: linear-gradient( var(--transparent), 50%, var(--paper-dark), 51%, var(--transparent) ), linear-gradient( to right, var(--transparent), 50%, v.........完整代码请登录后点击上方下载按钮下载查看
网友评论0