CSS相关笔记

文字相关

.text {
  width: 200px;
  line-height: 1.5em;
  background: beige;
  background-size: auto 3em;
  background-origin: content-box;
  background-image: linear-gradient(rgba(0, 0, 0, 0.2) 50%,
      transparent 0);

  font-variant-ligatures: common-ligatures discretionary-ligatures historical-ligatures;
}

<pre class="text">
  &#xfb01
  de&#xfb01;ne
  
  while (true) {
    var d = new Date();
    if (d.getDate() == 1 && d.getMonth == 3) {
      alert("TROLOLOL");
    }
  }
</pre>

 <style>
      .line {
        color: #333;
        text-decoration-color: red;
        text-decoration-style: double;
        text-decoration-skip-ink: auto;
        text-underline-position: auto;
        text-decoration-line: line-through;
      }
    </style>
    <a href="javascript:void(0);" class="line">测试下划线absfgghjji</a>

<style>
    .text2 {
      width: 200px;
      background: hsl(210, 13%, 40%);
      color: hsl(210, 13%, 75%);
      text-shadow: 0 -1px 1px black;
    }
  </style>
  <div class="text2">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam earum neque nihil accusantium impedit ea fugit
    aperiam veniam corporis aut, illo obcaecati suscipit atque vero, facilis rerum perferendis ab porro?
  </div>

<style>
    h1 {
      font: 500%/1 Rockwell, serif;
      background: deeppink;
      color: white;
      display: block;
      width: 200px;
      height: 200px;
      /* display: flex;
      align-items: center;
      justify-content: center; */
    }
    h1 #css {
      fill: currentColor;

    }
    h1 svg {
      overflow: visible
    }
    h1 use {
      stroke: black;
      stroke-width: 6;
      stroke-linejoin: round;
    }
  </style>
  <h1>
    <svg width="2em" height="1.2em">
      <use xlink:href="#css" />
      <text x="0" y="1.2em" id="css">CSS</text>
    </svg>
  </h1>

<style>
    a {
      background: #203;
      color: white;
      transition: 1s;
      padding: 20px;
      font-size: 36px;
      font-weight: bolder;
      text-decoration: none;
    }

    a:hover {
      color: transparent;
      text-shadow: 0 0 .1em white, 0 0 .3em white;
    }
  </style>
  <a href="">DIzzy</a>

<style>
    .text4 {
      font-size: 36px;
      font-weight: bolder;
      padding: 20px;
      background: #58a;
      color: white;
      text-shadow: 0 1px hsl(0, 0%, 85%),
        0 2px hsl(0, 0%, 80%),
        0 3px hsl(0, 0%, 75%),
        0 4px hsl(0, 0%, 70%),
        0 5px hsl(0, 0%, 65%),
        0 5px 10px black;
    }
  </style>
  <span class="text4">CSS3D</span>

<style>
    .circular {
      width: 100px;
      height: 100px;
      margin: 50px;
      display: inline-block;
    }

    .circular path {
      fill: none;
    }

    .circular svg {
      display: block;
      overflow: visible;
    }
  </style>
  <!-- <div class="circular">
    <svg viewBox="0 0 100 100">
      <path d="M 0,50 a 50,50 0 1,1 0,1 z" id="circle" />
      <text>
        <textPath xlink:href="#circle">
          circular reasoning works because
        </textPath>
      </text>
    </svg>
  </div> -->
  <span class="circular">
    circular reasoning works because
  </span>
  <span class="circular">
    circular 中文效果
  </span>

<style>
    .text5 {
      display: inline-block;
      width: 200px;
      height: 100px;
      padding: 15px;
      border: 1px solid silver;
      overflow: auto;
      background:
        linear-gradient(white, hsla(0, 0%, 100%, 0)),
        radial-gradient(at top, rgba(0, 0, 0, .2), transparent 70%),
        linear-gradient(to top, white, hsla(0, 0%, 100%, 0)) bottom,
        radial-gradient(at bottom, rgba(0, 0, 0, .2), transparent 70%) bottom;
      background-repeat: no-repeat;
      background-size: 100% 30px, 100% 15px, 100% 30px, 100% 15px;
      background-attachment: local, scroll
    }
  </style>
  <div class="text5">
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sit neque ab iure tempore sint dolorum aut quia! Atque,
    reiciendis. Illo voluptates autem pariatur maxime. Tenetur commodi quia magni tempora odit?
  </div>

<style>
    .image-slider {
      position: relative;
      display: inline-block;
      width: 500px;
      height: 280px;
    }

    .image-slider>div {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      width: 50%;
      overflow: hidden;
    }

    .image-slider img {
      display: block;
      width: 500px;
      user-select: none;
    }

    .image-slider input {
      position: absolute;
      left: 0;
      bottom: 10px;
      width: 100%;
      margin: 0;
    }
  </style>
  <div class="image-slider">
    <img src="./images/14.png" alt="Before" />
    <img src="./images/14-2.png" alt="After" />
  </div>

<style>
    figure {
      padding: 10px;
      border: 1px solid silver;
      max-width: 300px;
      max-width: min-content;
    }
  </style>
  <h2>自适应内部环境</h2>
  <div>
    <p>Lorem ...</p>
    <figure>
      <img style="max-width:inherit" src="https://picsum.photos/400/300" />
      <figcaption>
        The great Sir Adam Catlace was named after
        Countess Ada Lovelace, the first programmer.
      </figcaption>
    </figure>
    <p>Lorem ...</p>
  </div>