css布局实现堆叠文字卡片效果代码
代码语言:html
所属分类:布局界面
代码描述:css布局实现堆叠文字卡片效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url(https://fonts.googleapis.com/css?family=Didact+Gothic|Comfortaa:400,700&subset=latin,cyrillic); *, *:before, *:after{box-sizing:border-box} .wrap { position: relative; margin: 50px auto; text-align: center; width: 320px; height: 370px; background: white; padding: 30px 40px; border: 1px solid rgba(0,0,0,.1); } .wrap:before, .wrap:after { content:""; position: absolute; width: inherit; height:inherit; border: 1px solid rgba(0,0,0,.1); background: white; } .wrap:before { top: 5px; left: -5px; z-index:-1; } .wrap:after { top: 10px; left: -10px; z-index:-2; } .cat span { font-family: 'Comfortaa', cursive; font-size: 13px; text-transform: uppercase; margin-bottom: 20px; color: #ff6f5a; font-weight: bold; } h2 { font-family: 'Comfortaa', cursive; font-size: 18px; font-weight: 400; margin-bottom: 16px; text-transform: uppercase; letter-spacing: 2px; color: #333333; } .public { font-family: 'Didact Gothic', sans-serif; color: #999; font-size: 13px; } p { font-family: 'Didact Gothic', sans-serif; color:#555; font-size: 14px; line-height:22px; } .more-button { font-family: 'Comfortaa', cursive; color:.........完整代码请登录后点击上方下载按钮下载查看
网友评论0