css3——css 样式

本页面样式持续更新，如果有更多创意欢迎留言补充

常见布局

更多布局

列表渐入

.test { animation: fly-in 0.5s ease-in both; @for $i from 1 through 5 { &:nth-of-type(#{$i + 1}) { animation-delay: $i * 0.2s; } } } @keyframes fly-in { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

单列布局

<style> .header { margin: 0 auto; max-width: 960px; height: 100px; background-color: blue; } .content { margin: 0 auto; max-width: 960px; height: 400px; background-color: aquamarine; } .footer { margin: 0 auto; max-width: 960px; height: 100px; background-color: aqua; } </style> <header class="header"></header> <div class="content"></div> <footer class="footer"></footer>

两列布局

<style> .parent { overflow: hidden; /* 触发 BFC */ zoom: 1; } .left { float: left; margin-right: 20px; } .right { overflow: hidden; zoom: 1; } </style> <div class="parent" style="background-color: lightgrey;"> <div class="left" style="background-color: lightblue;"> <p>left</p> </div> <div class="right" style="background-color: lightgreen;"> <p>right</p> <p>right</p> </div> </div>

三栏布局

<div class="wrapper"> <div class="left">hello</div> <div class="center">world</div> <div class="right">!</div> </div> table

较为特殊，左、右、中的高度同步

.wrapper { background-color: #ccc; display: table; } .left, .center, .right { display: table-cell; text-align: center; color: #fff; } .left { min-width: 200px; background-color: #f00; } .right { min-width: 150px; background-color: #00f; } .center { width: 100%; background-color: #0f0; } flex .wrapper { background-color: #ccc; display: flex; } .left, .center, .right { height: 200px; text-align: center; color: #fff; } .left { min-width: 200px; background-color: #f00; } .right { min-width: 150px; background-color: #00f; flex-grow: 1; } .center { width: 100%; background-color: #0f0; } float <div class="wrapper"> <div class="left">hello</div> <div class="right">!</div> <div class="center">world</div> </div> .wrapper { background-color: #ccc; } .left, .center, .right { height: 200px; color: #fff; } .left { width: 200px; background-color: #f00; float: left; } .right { width: 150px; background-color: #00f; float: right; } .center { background-color: #0f0; margin-left: 200px; margin-right: 150px; }

粘连布局

固定 footer 高度 <div class="main">...</div> <div class="footer"></div> .main { width: 100%; min-height: calc(100vh - 100px); } .footer { width: 100%; height: 100px; background-color: gray; } 基于 Flexbox <div class="father"> <div class="main">...</div> <div class="footer"></div> </div> .father { display: flex; flex-flow: column; min-height: 100vh; } .main { flex: 1; } .footer { width: 100%; height: 100px; background-color: gray; } 高度继承 <div id="wrap"> <div class="main"></div> </div> <div id="footer">footer</div> html, body { height: 100%; /* 高度一层层继承下来 */ } #wrap { min-height: 100%; background: pink; text-align: center; overflow: hidden; } #wrap .main { padding-bottom: 50px; } #footer { height: 50px; line-height: 50px; background: deeppink; text-align: center; margin-top: -50px; }

继承

.fun { width: 200px; height: 100px; background-color: #fff; margin: 100px auto; border: 1px solid #000; position: relative; border-radius: 10px; &::before { content: ""; position: absolute; top: -6px; left: 20px; padding: 5px; transform: rotate(45deg); border: inherit; background: inherit; border-right: none; border-bottom: none; } }

多重边框

.fun { width: 200px; height: 100px; background-color: #fff; margin: 100px auto; border: 1px solid #000; box-shadow: 0 0 0 10px #fca, 0 0 0 15px #ccc, 0 0 20px 15px #ca0; }

.fun { width: 200px; height: 100px; background-color: #ccc; margin: 100px auto; border: 1px dashed #fff; outline:10px solid #ccc; }

.fun { width: 200px; height: 100px; margin: 100px auto; padding: 10px; border-radius: 10px; // 推荐 border-radius 的一半值 box-shadow: 0 0 0 5px #000; outline:10px solid #000; background-color: #ccc; }

背景定位

.fun { width: 200px; height: 100px; margin: 100px auto; padding: 10px; border: 1px dashed #fff; } /* 法一 */ .fun { background: pink url("./assets/logo.svg") no-repeat; background-size: 40px 40px; background-position: bottom 10px right 10px; } /* 法二：推荐 */ .fun { background: pink url("./assets/logo.svg") no-repeat bottom right; background-size: 40px 40px; background-origin: content-box; } /* 法三：请不要忘记在 calc() 函数 内部的 - 和 + 运算符的两侧各加一个空白符， 否则会产生解析错误！这个规则如此怪异，是为了向前兼容： 未来，在 calc() 内部可能会允许使用关键字，而这些关键字可能会包含连字符（即减号）*/ .fun { background: pink url("./assets/logo.svg") no-repeat; background-size: 40px 40px; background-position: calc(100% - 10px) calc(100% - 10px); }

渐变

.fun { width: 200px; height: 100px; margin: 100px auto; padding: 10px; background: linear-gradient(to right, /* 或 90deg */ #fb3 50%, #58a 0); background-size: 20px 100%; }

.fun { width: 200px; height: 100px; margin: 100px auto; padding: 10px; background: repeating-linear-gradient(45deg, #fb3, #58a 30px); }

.fun { width: 200px; height: 100px; margin: 100px auto; padding: 10px; background-color: #eee; background-image: linear-gradient( 90deg, rgba(200, 0, 0, 0.5) 50%, transparent 0 ), linear-gradient( rgba(200, 0, 0, 0.5) 50%, transparent 0); background-size: 20px 20px; }

.fun { width: 200px; height: 100px; margin: 100px auto; padding: 10px; background-color: #eee; background-image: linear-gradient(90deg, white 1px, transparent 0), linear-gradient(white 1px, transparent 0); background-size: 20px 20px; }

.fun { width: 200px; height: 100px; margin: 100px auto; padding: 10px; background-color: #ccc; background-image: linear-gradient(white 2px, transparent 0), linear-gradient(90deg, white 2px, transparent 0), linear-gradient(hsla(0, 0%, 100%, 0.3) 1px, transparent 0), linear-gradient(90deg, hsla(0, 0%, 100%, 0.3) 1px, transparent 0); background-size: 75px 75px, 75px 75px, 15px 15px, 15px 15px; }

.fun { width: 200px; height: 100px; margin: 100px auto; padding: 10px; background: #655; background-image: radial-gradient(tan 30%, transparent 0); background-size: 30px 30px; }

.fun { width: 200px; height: 100px; margin: 100px auto; padding: 10px; background: #655; background-image: radial-gradient(tan 30%, transparent 0), radial-gradient(tan 30%, transparent 0); background-size: 30px 30px; background-position: 0 0, 15px 15px; }

.fun { width: 200px; height: 100px; margin: 100px auto; padding: 10px; background: #eee; background-image: linear-gradient(45deg, #bbb 25%, transparent 0), linear-gradient(45deg, transparent 75%, #bbb 0), linear-gradient(45deg, #bbb 25%, transparent 0), linear-gradient(45deg, transparent 75%, #bbb 0); background-position: 0 0, 15px 15px, 15px 15px, 30px 30px; background-size: 30px 30px; }

裁角

@mixin fun($size ,$color) { background: $color; background: radial-gradient(circle at top left, transparent $size, $color 0) top left, radial-gradient(circle at top right, transparent $size, $color 0) top right, radial-gradient(circle at bottom left, transparent $size, $color 0) bottom left, radial-gradient(circle at bottom right, transparent $size, $color 0) bottom right; background-repeat: no-repeat; background-size: 50% 50%; } .fun { width: 200px; height: 100px; margin: 100px auto; @include fun(20px, skyblue) }

/* 这种剪裁角的优点，可以使用任意类型的背景 可以对替换元素（比如图片）进行剪裁 可以配合动画做特效 */ @mixin fun($size, $color, $width, $height) { background: $color; clip-path: polygon( 0 $size, $size 0, ($width - $size) 0, 100% $size, 100% ($height - $size), ($width - $size) 100%, $size 100%, 0 ($height - $size) ); } .fun { width: 200px; height: 100px; margin: 100px auto; @include fun(20px, pink, 200px, 100px) }

菱形

.fun { background-color: pink; width: 220px; clip-path: polygon(50% 0, 75% 50%, 50% 94%, 25% 50%); transition: clip-path .5s ease-in; &:hover { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } }

梯形

@mixin fun($fsz,$bg-color) { font-size: $fsz; height: $fsz*2; line-height: 2; position: relative; display: inline-block; padding: 0 $fsz*1.5; &::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; background-color: $bg-color; border-radius: .5em; transform: scaleY(1.3) perspective(.5em) rotateX(5deg); transform-origin: bottom; } } .fun { margin: 100px auto; color: white; @include fun(24px, skyblue) }

饼图

@mixin fun($rate, $r) { position: relative; width: $r * 2; line-height: $r * 2; border-radius: 50%; background: yellowgreen; background-image: linear-gradient(to right, transparent 50%, #655 0); color: transparent; text-align: center; animation-delay: $rate * -1s; @keyframes spin { to { transform: rotate(0.5turn); } } @keyframes bg { 50% { background: #655; } } &::before { content: ""; position: absolute; top: 0; left: 50%; width: 50%; height: 100%; border-radius: 0 100% 100% 0 / 50%; background-color: inherit; transform-origin: left; animation: spin 50s linear infinite, bg 100s step-end infinite; animation-play-state: paused; animation-delay: inherit; } &::after { content: $rate + "%"; position: absolute; top: 0; left: 0; right: 0; bottom: 0; font-size: $r/2; color: rgba(255, 255, 255, 0.8); } } .fun { @include fun(45, 50px); } 动画 <style> .father { background-color: #ccc; border-radius: 50%; width: 300px; height: 300px; position: relative; overflow: hidden; } .father>.before, .father>.after { content: ''; width: 150px; height: 100%; position: absolute; top: 0; left: 0; transform-origin: right center; z-index: 3; } .father>.before { background-color: #f88; } .father>.after { background-color: #ccc; } .father>.son { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 200px; height: 200px; border-radius: 50%; background-color: #fff; z-index: 4; text-align: center; line-height: 200px; } </style> <body> <div class="father" id='fun'> <div class="before"></div> <div class="son"></div> <div class="after"></div> </div> <script> function fun(speed = 300) { let target = document.getElementById('fun') let [timer, before, after, son] = [null, target.children[0], target.children[2], target.children[1]] let [beforeColor, targetColor] = [getComputedStyle(before, null).backgroundColor, getComputedStyle(target, null).backgroundColor] let move = (process = 0) => { let k = process / speed * 360 // 设置样式，大于 180° 反转 if (k <= 180) { before.style.transform = `rotate(${k}deg)` } else { [target.style.backgroundColor, before.style.backgroundColor, after.style.backgroundColor] = [beforeColor, targetColor, beforeColor] before.style.transform = `rotate(0deg)` after.style.transform = `rotate(${k}deg)` } son.innerText = `已完成 ${parseInt(process / speed * 100)}%` // 判断进度 if (process >= speed) { after.style.transform = `rotate(360deg)` cancelAnimationFrame(timer) } else timer = requestAnimationFrame(move) } move() } fun(10000) // 10s </script> </body>

投影

单侧 .fun { width: 200px; height: 100px; background-color: skyblue; margin: 200px auto; /* 扩展与模糊半径反向值 */ box-shadow: 0 5px 4px -4px black; } 邻边 .fun { width: 200px; height: 100px; background-color: skyblue; margin: 200px auto; /* 扩张半径为模糊半径的反向一半值 */ box-shadow: 3px 3px 6px -3px black; } 双侧 .fun { width: 200px; height: 100px; background-color: skyblue; margin: 200px auto; box-shadow: 5px 0 5px -5px black, -5px 0 5px -5px black; } 不规则投影 .fun { width: 200px; line-height: 100px; border: 6px dotted #000; margin: 200px auto; /* 不包括扩张半径、inset、逗号多段，剩下与 box-shadow 相似*/ filter: drop-shadow(0 0 5px rgba(0, 0, 0, .5)); }

染色

.fun { width: 200px; line-height: 100px; border: 6px dotted #000; margin: 200px auto; img { transition: .5s filter; /* 更多 filter 参见：https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter */ filter: sepia(1) saturate(4) hue-rotate(295deg); &:hover, &:focus { filter: none; } } }

毛玻璃

.fun { width: 800px; line-height: 400px; background: url('./assets/3.jpg') no-repeat 0/cover fixed; margin: 200px auto; overflow: hidden; .content-wrapper { width: 400px; height: 200px; margin: 100px auto; padding: 10px; background-color: rgba(255, 255, 255, .3); overflow: hidden; position: relative; .content { width: inherit; height: inherit; font-size: 14px; line-height: 1.5; position: absolute; z-index: 1; } &::before { content: ''; background: url('./assets/3.jpg') no-repeat 0/cover fixed; position: absolute; left: 0; right: 0; top: 0; bottom: 0; filter: blur(40px); margin: -50px; /* 取值比模糊度大 10px */ } } }

折纸效果

.fun { width: 400px; height: 200px; margin: 200px auto; font-size: 12px; padding: 30px; box-sizing: border-box; overflow: hidden; color: #fff; background: #58a; /* 回退样式 */ background: linear-gradient(to left bottom, transparent 50%, rgba(0, 0, 0, .3) 0) no-repeat 100% 0/2em 2em, linear-gradient(-135deg, transparent 1.4em, #58a 0); }

插入换行

<dl class="fun"> <dt>Name：</dt> <dd>Bob</dd> <dd>Lucy</dd> <dt>QQ：</dt> <dd>2361318963@qq.com</dd> </dl> .fun { margin: 200px; dt, dd { display: inline; } dd { margin: 0; font-weight: bold; } dd + dt::before { content: '\A'; /* Unicode 码 \000A 简化为 \A 相当于换行 */ white-space: pre; /* pre 效果 */ } dd + dd::before { content: '，'; margin-left: -.25em; font-weight: normal; } }

渐变斑马条纹

<ul class="fun"> <li>Tim</li> <li>Bob</li> <li>Lucy</li> </ul> .fun { width: 80px; margin: 200px; list-style: none; padding: .5em; line-height: 1.5; background: beige; background-size: auto 3em; background-origin: content-box;/* 规定从 content 开始 */ background-image: linear-gradient(rgba(0, 0, 0, .2) 50%, transparent 0); }

扩大可点击区域

基于这个想法做的好看的按钮

.fun { width: 40px; height: 40px; background-color: skyblue; margin: 100px auto; border-radius: 50%; cursor: pointer; border: 10px solid transparent; background-clip: content-box; box-shadow: 0 0 6px -3px black, 0 0 4px -1px black inset; }

方形范围内都是可点击区域

.fun { width: 40px; height: 40px; background-color: skyblue; margin: 200px auto; border-radius: 50%; cursor: pointer; position: relative; &::after { content: ''; position: absolute; top: -10px; left: -10px; right: -10px; bottom: -10px; background-color: rgba(25, 36, 78, .1); } }

自定义复选框

<input type="checkbox" id="fun"> <label for="fun">fun day</label> /* 展示样式 */ input[type='checkbox'] + label::before { content: '\a0'; /* Unicode 简写码：不换行空格 */ display: inline-block; vertical-align: .2em; width: .8em; height: .8em; margin-right: .6em; border-radius: .2em; background: skyblue; text-indent: .15em; line-height: .65; } /* 选中样式 */ input[type='checkbox']:checked + label::before { content: '\2713'; background: yellowgreen; } /* 焦距样式 */ input[type='checkbox']:focus + label::before { box-shadow: 0 0 4px -2px black; } /* 无法使用样式 */ input[type='checkbox']:disabled + label::before { background: gray; box-shadow: none; color: #555; } input[type='checkbox'] { position: absolute; clip: rect(0, 0, 0, 0); }

由复选框制作开关按钮

input[type='checkbox'] { position: absolute; clip: rect(0, 0, 0, 0); } input[type='checkbox'] + label { display: inline-block; padding: .3em .5em; background: #ccc; background-image: linear-gradient(#ddd, #bbb); border: 1px solid rgba(0, 0, 0, .2); border-radius: .3em; box-shadow: 0 1px white inset; text-align: center; text-shadow: 0 1px 1px white; } input[type='checkbox']:checked + label, input[type='checkbox']:checked + label { box-shadow: .05em .1em .2em rgba(0, 0, 0, .6) inset; border-color: rgba(0, 0, 0, .3); background: #bbb; }

通过阴影来弱化背景

伪元素方案 .fun { width: 400px; height: 200px; border-radius: 10px; margin: 200px auto; background-color: skyblue; text-indent: 2em; padding: 10px; box-sizing: border-box; &::before { content: ''; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; background: rgba(0, 0, 0, .5); } } box-shadow 方案 .fun { width: 400px; height: 200px; border-radius: 10px; margin: 200px auto; background-color: skyblue; text-indent: 2em; padding: 10px; box-sizing: border-box; /* 1vmax 相当于 1vh 和 1vw 两者中的较大值 而 100vw 等于整个视口的宽度，100vh 等于整个视口的高度 */ box-shadow: 0 0 0 50vmax rgba(0, 0, 0, .5); }

缺点： 一、当页面滚动，遮罩层边缘就出来了，除非给它加上 position: fixed 二、只可以在视觉上引导注意力，却无法阻止鼠标交互

vertical-align 方案 .father { position: fixed; top: 0; left: 0; right: 0; bottom: 0; /* width: 100%; height: 100%; */ background-color: rgba(0, 0, 0, .5); text-align: center; font-size: 0; white-space: nowrap; overflow: auto; } .father::after { content: ''; display: inline-block; height: 100%; vertical-align: middle; } .son { display: inline-block; vertical-align: middle; text-align: left; font-size: 14px; white-space: normal; background-color: #fff; }

通过模糊弱化背景

<main class="de-emphasized">...</main> <div class="fun">...</div> .fun { width: 400px; height: 200px; border-radius: 10px; background-color: skyblue; text-indent: 2em; padding: 10px; box-sizing: border-box; margin: 100px auto; &::before { content: ''; position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: -1; background-color: rgba(0, 0, 0, .4); } } main.de-emphasized { filter: blur(5px); }

阴影滚动提示以及滚动条样式设置

.fun { width: 60px; height: 100px; overflow-x: hidden; overflow-y: scroll; margin: 100px auto; list-style: none; padding: .3em .5em; border: 1px solid #ccc; background-image: linear-gradient(white 30%, transparent), radial-gradient(at 50% 0, rgba(0, 0, 0, .2), transparent 70%), linear-gradient(transparent, white 30%), radial-gradient(at bottom, rgba(0, 0, 0, .2), transparent 70%); background-repeat: no-repeat; background-size: 100% 50px, 100% 15px, 100% 50px, 100% 15px; background-position: top left, top left, bottom left, bottom left; background-attachment: local, scroll, local, scroll; &::-webkit-scrollbar { /*滚动条整体样式*/ width: 10px; /*高宽分别对应横竖滚动条的尺寸*/ height: 1px; } &::-webkit-scrollbar-thumb { /*滚动条里面小方块*/ border-radius: 10px; -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); background: #535353; } &::-webkit-scrollbar-track { /*滚动条里面轨道*/ -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); border-radius: 10px; background: rgba(200,200,200,.2); } }

图片对比控件

<div class="fun"> <img src="./assets/2.jpg" alt="Before"> <img src="./assets/3.jpg" alt="After"> </div> methods: { scroll () { this.$nextTick(() => { let sliders = document.querySelectorAll('.fun') sliders.forEach((slider) => { // 创建附加的 div 元素，并用它包住第一个图片元素 let div = document.createElement('div') let img1 = slider.querySelectorAll('img')[0] let img2 = slider.querySelectorAll('img')[1] div.appendChild(img1) slider.insertBefore(div, img2) // 创建滑块 let range = document.createElement('input') range.type = 'range' div.style.width = range.value + '%' range.oninput = function () { div.style.width = this.value + '%' } slider.appendChild(range) }) }) }, }, created () { this.scroll() }, .fun { position: relative; display: inline-block; } .fun > div { position: absolute; top: 0; left: 0; bottom: 0; overflow: hidden; } .fun img { display: block; user-select: none; width: 800px; } /* 设置滑条 */ .fun input[type="range"] { position: absolute; left: 0; bottom: 5%; margin: 0; -webkit-appearance: none; /* 清除默认样式 */ width: 100%; height: 10px; background-color: rgba(0, 0, 0, .2); outline: none; } /* 设置滑块 */ .fun input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; /* 清除默认样式 */ cursor: pointer; height: 20px; width: 20px; background-color: rgba(255, 129, 68, .8); border-radius: 50%; box-sizing: content-box; border: 10px solid transparent; background-clip: content-box; box-shadow: 0 0 6px -1px black, 0 0 4px -1px black inset; }

自适应内部元素

不指定元素 height ，它会自适应其内容高度，现在希望 width 有相同的行为

... <!-- <figure> 标签规定独立的流内容（图像、图表、照片、代码等等） --> <figure class="fun"> <img src="./assets/2.jpg" alt="" width="200"> <!-- 使用 <figcaption> 元素为 figure 添加标题 --> <figcaption> ... </figcaption> </figure> ... figure { max-width: 300px; /* 回退 */ max-width: min-content; /* 以内容最小的宽度为基准 */ margin: auto; border: 1px solid #000; padding: 10px; img { max-width: unset; } }

精确控制表格列宽

.fun { /* table-layout 默认值 auto，即表格规定样式 设置为 fixed，则样式部分由开发者规定 */ table-layout: fixed; width: 300px; background: #f00; td { background: #fff; } }

满幅的背景，定宽的内容

.fun { width: 400px; height: 200px; background-color: skyblue; /* margin: auto; 等同于页面宽度的一半减去内容的一半 */ padding: 1em calc(50% - 200px); }

垂直居中

基于视口单位 .fun { width: 400px; height: 200px; background-color: skyblue; margin: 50vh auto 0; transform: translateY(-50%); } 基于 Flexbox /* 不仅在垂直，水平也居中，且不用指定宽度（想指定也行） 默认宽度等于 max-content */ .father { display: flex; min-height: 100vh; margin: 0; } .fun { width: 400px; height: 200px; background-color: skyblue; margin: auto; }

加载

.fun { width: 200px; height: 200px; background-color: pink; margin: 200px auto; position: relative; /* steps 规定动画执行步数 */ animation: loading 2s infinite steps(6); &::before, &::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #fff; } &::before { width: 20px; height: 100px; } &::after { width: 100px; height: 20px; } } @keyframes loading { to { transform: rotate(360deg); } }

闪烁

.fun { width: 200px; height: 200px; background-color: pink; margin: 200px auto; position: relative; /* 动画次数为 6，实际执行 3 次闪烁，因为 alternate 翻倍 */ animation: 1s blink-smooth 6 alternate; } @keyframes blink-smooth { to { background-color: transparent; } }

打字机效果

h1 { /* em 单位是对应汉字字符距离，而 ch 对应 0 字形宽度，可以用于字母 */ width: 6em; overflow: hidden; white-space: nowrap; border-right: .05em solid; animation: typing 2s steps(6), caret .5s steps(1) infinite; }

hover 控制动画

.fun { animation-play-state: paused; } .fun:hover { animation-play-state: running; }

环形路径旋转动画

<div class="fun"> <div class="son"></div> </div> .fun { width: 300px; height: 300px; border-radius: 50%; margin: 200px auto; background-color: skyblue; animation: spin 3s infinite linear; animation-play-state: paused; .son { width: 100px; height: 100px; border-radius: inherit; background-color: pink; margin: 10px auto; animation: inherit; animation-name: spin-reverse; animation-play-state: inherit; &::before { content: ""; width: 100px; height: 10px; background-color: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } } &:hover { animation-play-state: running; .son { animation-play-state: inherit; } } }

三道杠 和 圆点图标

/* 三道杠 */ .son1 { display: inline-block; width: 140px; height: 10px; padding: 35px 0; border-top: 10px solid; border-bottom: 10px solid; background-color: currentColor; background-clip: content-box; } /* 圆点 */ .son2 { display: inline-block; width: 100px; height: 100px; padding: 10px; border: 10px solid; border-radius: 50%; background-color: currentColor; background-clip: content-box; }