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;
}

.........完整代码请登录后点击上方下载按钮下载查看