CSS 示例代码

2015-12-15 web css language example

介绍一些常见的 CSS 简单相关示例。

背景

背景边界

也就是箱子模型的背景设置。

<!DOCTYPE html>
<html>
  <head>
    <style>
      .toggle-item {
        width: 100px;
        height: 100px;
        background-color: blue;
      }
      #toggle-trigger:checked ~ .toggle-item {
        display: none;
      }
      #toggle-trigger:not(checked) ~ .toggle-item {
        display: block;
      }
    </style>
  </head>

  <body>
    <div class="toggle">
      <input id="toggle-trigger" type="checkbox" />
      <div class="toggle-item"></div>
    </div>
  </body>
</html>

多边设置

可以通过 box-shadow 设置边界效果，不过只能是实心的，还可以通过 outline 以及 outline-offset 设置边的属性，例如点、虚线等等。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <style>
      main{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-around;
      }
      div:nth-of-type(1) {
        width: 60px; height: 60px;
        margin: 105px 29px;
        border-radius: 50%;
        background: #FAFAFA;
        box-shadow: 0 0 0 10px #E8E2D6, 0 0 0 20px #E1D9C9,
                    0 0 0 30px #D9CFBB, 0 0 0 40px #D2C6AE,
                    0 0 0 50px #CABCA0, 0 0 0 60px #C3B393,
                    0 0 0 70px #BBA985, 0 0 0 80px #B4A078;
      }
      div:nth-of-type(2){
        width: 200px; height: 120px;
        background: #efebe9;
        border: 5px solid #B4A078;
        outline: #B4A078 dashed 1px;
        outline-offset: -10px;
        margin-bottom: 20px;
      }
    </style>
  </head>

  <body>
    <main>
      <div></div>
      <div></div>
    </main>
  </body>
</html>