css实现圆角边框的tab选项卡切换代码-html代码-BFW代码库

css实现圆角边框的tab选项卡切换代码

代码语言：html

所属分类：选项卡

代码描述：css实现圆角边框的tab选项卡切换代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
  

</head>

<body>
    <style>
    @import url("https://fonts.googleapis.com/css2?family=Kode+Mono:wght@400..700&family=Shantell+Sans:wght@300..800&display=swap");
/* grid 'em all  */
html, body, main, section, nav, div {
  display: grid;
}

html {
  min-height: 100%;
}

body {
  place-content: center;
  grid-template-columns: min(100%, 40em);
  overflow-x: hidden;
  /* juust in case */
  /* image background to show there are no covers */
  background: url(//repo.bfw.wiki/bfwrepo/image/5d653a3d2a1fe.png) 50%/cover #191c1f;
  background-blend-mode: multiply;
  color: #ededed;
  /* contrasting text */
  font: 300 clamp(.75em, 6.25vw, 1.5em)/1.125 shantell sans, cursive;
}

/* svg only to contain filter which alters graphic result
 * so it's functionally the same as a style element, 
 * take it out of document flow */
svg[aria-hidden=true] {
  position: fixed;
}

h1 {
  font-weight: 500;
  text-align: center;
  text-wrap: balance;
}

a, button, div {
  --hov: 0 ;
}

a {
  color: limegreen;
}

:focus {
  outline: dotted 1px;
}

:is(a, button):is(:hover, :focus) {
  --hov: 1 ;
}

.tabs {
  --r: calc(var(--u)*1px);
  /* no gap between tab & corresponding tab panel (row)
   * only between tabs (column gap) */
  grid-gap: 0 Max(0.375em, calc(2*var(--r)));
  grid-template: repeat(2, max-content)/max(5%, 3 * var(--r)) repeat(var(--n), max-content) 1fr;
  font-family: kode mono, monospace;
}

[role=tablist] {
  /* ensure it's on top of selected tab panel */
  z-index: 2;
  /* make it occupy the entire first row */
  grid-area: 1/1/span 1/-1;
  /* and inherit columns */
  grid-template-columns: subgrid;
}

[role*=tab] {
  /* difference between selected tab & this tab index */
  --dif: var(--k) - var(--i);
  /* NOT selected flag; 
   * 0 if selected (ON), 1 if not selected (OFF) */
  --not: Min(1, Max(var(--.........完整代码请登录后点击上方下载按钮下载查看