css盒子模型效果
代码语言:html
所属分类:布局界面
代码描述:css盒子模型效果
代码标签: 效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> html { --size: 8vmin; --width: calc(var(--size) * 4); --height: calc(var(--size) * 1); --font-size: calc(var(--size) * 0.25); --font-family: Arial, Verdana, sans-serif; --font-weight: bold; } html::before { content: "CSS Box Model"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, calc(var(--size) * -4.5)); font-size: calc(var(--font-size) * 3); font-family: var(--font-family); font-weight: bold; text-transform: uppercase; white-space: nowrap; } body { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: var(--width); height: var(--height); border: var(--size) solid #aaa; padding: var(--size); box-shadow: inset 0 0 0 var(--size) #cde, 0 0 0 var(--size) #fdd, inset 0 0 0 calc(var(--size) + 1px) rgba(0,0,0,0.25); font-size: var(--font-size); display: flex; align-items: flex-end; justify-content: center; font-family: var(--font-family); font-weight: var(--font-weight); outline: 1px dashed rgba(0,0,0,0.25); outline-offset: var(--size) } body::before { content: 'margin \a border \a padding \a content'; text-transform: uppercase; line-height: var(--size); text-align: center; white-space: pre; } body::after { content: 'margin edge \00a0\00a0\00a0\00a0\00a0 \a border edge \00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0 \a padding edge \00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a.........完整代码请登录后点击上方下载按钮下载查看
网友评论0