From 9ec76d2a7f9c30cee34fa757dabdcc5aa227f383 Mon Sep 17 00:00:00 2001 From: mx Date: Sat, 17 Aug 2024 12:58:04 +0800 Subject: [PATCH] feat: add tabs round radius content --- docs/.vitepress/config.ts | 1 + .../CSS/Tabs\345\234\206\350\247\222.md" | 186 ++++++++++++++++++ 2 files changed, 187 insertions(+) create mode 100644 "docs/hand-notes/CSS/Tabs\345\234\206\350\247\222.md" diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts index 5d067211..bdeaf258 100644 --- a/docs/.vitepress/config.ts +++ b/docs/.vitepress/config.ts @@ -80,6 +80,7 @@ export default { { text: 'CSS实现类似微信头像效果', 'link': '/hand-notes/CSS/CSS实现类似微信头像效果'}, { text: '虚线边框', 'link': '/hand-notes/CSS/虚线边框'}, { text: '图片加载出错样式设置', 'link': '/hand-notes/CSS/图片加载出错样式设置'}, + { text: 'Tabs圆角', 'link': '/hand-notes/CSS/Tabs圆角'}, ] }, { diff --git "a/docs/hand-notes/CSS/Tabs\345\234\206\350\247\222.md" "b/docs/hand-notes/CSS/Tabs\345\234\206\350\247\222.md" new file mode 100644 index 00000000..af03e316 --- /dev/null +++ "b/docs/hand-notes/CSS/Tabs\345\234\206\350\247\222.md" @@ -0,0 +1,186 @@ +--- +layout: doc +--- + +# Tabs圆角 + +## Tabs圆角简单效果 + +- [最终效果预览](https://mx52jing.github.io/Notes/css-related/tabs-round-radius/index.html) + +> `css代码` + +```css +* { + padding: 0; + margin: 0; +} +#app { + width: 100vw; + height: 100vh; + background-color: #F7F8F9; + padding-top: 100px; + box-sizing: border-box; + overflow: hidden; +} +.tabs-box { + --text-primary-color: #EF4034; + --bg-primary-color: #E08638; + --h: 50px; + --base-radius: 12px; + width: 380px; + height: var(--h); + display: flex; + background-color: var(--bg-primary-color); + border-radius: var(--base-radius) var(--base-radius) 0 0; + margin: 0 auto; + overflow: hidden; + cursor: pointer; +} +.tabs-item { + flex: 1; + height: var(--h); + position: relative; + display: flex; + justify-content: center; + align-items: center; + font-size: 16px; + font-weight: 600; + color: #FFFFFF; +} +.tabs-item--selected { + color: var(--text-primary-color); + background-color: #FFFFFF; + /*添加上面两个圆角*/ + border-radius: var(--base-radius) var(--base-radius) 0 0; + /*添加box-shadow*/ + box-shadow: var(--base-radius) var(--base-radius) 0 0 #FFFFFF, calc(-1 * var(--base-radius)) var(--base-radius) 0 0 #FFFFFF; +} + +.tabs-item--selected::before, +.tabs-item--selected::after { + content: ""; + width: var(--base-radius); + height: var(--h); + position: absolute; + top: 0; + background-color: var(--bg-primary-color); +} + +.tabs-item--selected::before { + left: calc(-1 * var(--base-radius)); + border-radius: 0 0 var(--base-radius) 0; +} + +.tabs-item--selected::after { + right: calc(-1 * var(--base-radius)); + border-radius: 0 0 0 var(--base-radius); +} +``` + +## Tabs圆角升级效果 + +- [最终效果预览](https://mx52jing.github.io/Notes/css-related/tabs-round-radius-plus/index.html) + +> `css代码` + +```css +* { + padding: 0; + margin: 0; +} +#app { + width: 100vw; + height: 100vh; + background-color: #F7F8F9; + padding-top: 100px; + box-sizing: border-box; + overflow: hidden; +} +.tabs-box { + --text-primary-color: #EF4034; + --bg-primary-color: #E08638; + --h: 50px; + --base-radius: 12px; + width: 800px; + height: var(--h); + display: flex; + background-color: var(--bg-primary-color); + margin: 0 auto; + border-radius: var(--base-radius) var(--base-radius) 0 0; + overflow: hidden; + cursor: pointer; +} +.tabs-item { + flex: 1; + height: var(--h); + position: relative; + display: flex; + justify-content: center; + align-items: center; + font-size: 16px; + font-weight: 600; + color: #FFFFFF; + border-radius: var(--base-radius) var(--base-radius) 0 0; +} +.tabs-item--selected { + color: var(--text-primary-color); + background-color: #FFFFFF; + /*添加box-shadow 必须要有这个 这个设置的颜色其实就是圆角的背景色*/ + box-shadow: calc(var(--base-radius) * -2) 40px 0 0 #FFFFFF, calc(var(--base-radius) * 2) 40px 0 0 #FFFFFF; +} + +.tabs-item--selected::before, +.tabs-item--selected::after { + content: ""; + width: var(--base-radius); + height: var(--h); + position: absolute; + top: 0; + background-color: #FFFFFF; +} + +.tabs-item--selected::before { + left: calc(-.5 * var(--base-radius)); + transform: skewX(-15deg); + border-radius: var(--base-radius) 0 0 0; +} + +.tabs-item--selected::after { + right: calc(-.5 * var(--base-radius)); + transform: skewX(15deg); + border-radius: 0 var(--base-radius) 0 0; +} + +.tabs-item--not-selected { + z-index: 2; +} + +.tabs-item--not-selected::before, +.tabs-item--not-selected::after { + content: ""; + width: var(--base-radius); + height: var(--h); + position: absolute; + top: 0; + background-color: var(--bg-primary-color); +} + +.tabs-item--not-selected::before { + transform: skewX(15deg); + left: calc(.5 * var(--base-radius)); + border-radius: 0 0 0 var(--base-radius); +} + +.tabs-item--not-selected::after { + transform: skewX(-15deg); + right: calc(.5 * var(--base-radius)); + border-radius: 0 0 var(--base-radius) 0; +} +``` + +## 参考 + +- [实现tabs圆角及反圆角效果](https://juejin.cn/post/7224311569777934392) + +- [实现tabs圆角及反圆角效果（PLUS）](https://juejin.cn/post/7230737419842633788) \ No newline at end of file