<div class="wrapper">
  <p>测试CSS text-decoration 属性样式</p>
</div>

<div class="form">
  <div class="control">
    <label for="text-decoration-line">text-decoration-line:</label>
    <select id="text-decoration-line">
      <option value="none">none</option>
      <option value="underline">underline</option>
      <option value="overline">overline</option>
      <option value="line-through">line-through</option>
      <option value="blink">blink</option>
    </select>
  </div>

  <div class="control">
    <label for="text-decoration-style">text-decoration-style:</label>
    <select id="text-decoration-style">
      <option value="solid">solid</option>
      <option value="double">double</option>
      <option value="dotted">dotted</option>
      <option value="dashed">dashed</option>
      <option value="wavy">wavy</option>
    </select>
  </div>

  <div class="control">
    <label for="text-decoration-color">text-decoration-color:</label>
    <input type="color" id="text-decoration-color" value="#ff3366" />
  </div>

  <div class="control">
    <label for="text-decoration-thickness">text-decoration-thickness:</label>
    <select id="text-decoration-thickness">
      <option value="auto">auto</option>
      <option value="from-font">from-font</option>
      <option value="6px">6px</option>
      <option value="5%">5%</option>
      <option value="3vh">3vh</option>
      <option value="2em">2em</option>
      <option value="2rem">2rem</option>
    </select>
  </div>

  <div class="control">
    <label for="text-decoration-skip">text-decoration-skip:</label>
    <select id="text-decoration-skip">
      <option value="none">none</option>
      <option value="objects">objects</option>
      <option value="spaces">spaces</option>
      <option value="leading-spaces">leading-spaces</option>
      <option value="trailing-spaces">trailing-spaces</option>
      <option value="edges">edges</option>
      <option value="box-decoration">box-decoration</option>
    </select>
  </div>

  <div class="control">
    <label for="text-decoration-skip-ink">text-decoration-skip-ink:</label>
    <select id="text-decoration-skip-ink">
      <option value="auto">auto</option>
      <option value="none">none</option>
    </select>
  </div>

  <div class="control">
    <label for="text-underline-position">text-underline-position:</label>
    <select id="text-underline-position">
      <option value="auto">auto</option>
      <option value="under">under</option>
      <option value="left">left</option>
      <option value="right">right</option>
    </select>
  </div>

  <div class="control">
    <label for="text-underline-offset">text-underline-offset:</label>
    <select id="text-underline-offset">
      <option value="auto">auto</option>
      <option value="6px">6px</option>
      <option value="5%">5%</option>
      <option value="3vh">3vh</option>
      <option value="2em">2em</option>
      <option value="2rem">2rem</option>
    </select>
  </div>
</div>
@import url('https://fonts.googleapis.com/css?family=Gochi+Hand');

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}


body {
  margin: 0;
  padding: 0;
  background-color: #291642;
  font-family: 'Gochi Hand', sans-serif;
  color: #fff;
  font-size: 130%;
  letter-spacing: 0.1rem;
  display: flex;
  align-items: center;
  width: 100vw;
  min-height: 100vh;
}


.form {
  width: 300px;
  margin-left: 20px;
}

.wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  
  p {
    font-size: 3vw;
  }
  
  select,
  input{
    display: block;
    width: 200px;
  }
}

.control:not(:last-child) {
  margin-bottom: 10px;
}

.control {
  label {
    display: block;
    margin-bottom: 5px;
  }
}

:root {
  --text-decoration-line: none;
  --text-decoration-style: solid;
  --text-decoration-color: #f36;
  --text-decoration-thickness: auto;
  --text-decoration-skip: none;
  --text-decoration-skip-ink: auto;
  --text-underline-position: auto;
  --text-underline-offset: auto;
}

p {
  text-decoration-line: var(--text-decoration-line);
  text-decoration-style: var(--text-decoration-style);
  text-decoration-color: var(--text-decoration-color);
  text-decoration-width: var(--text-decoration-thickness);
  text-decoration-skip: var(--text-decoration-skip);
  text-decoration-skip-ink: var(--text-decoration-skip-ink);
  text-underline-position: var(--text-underline-position);
  text-underline-offset: var(--text-underline-offset);
}
View Compiled
const selects = document.querySelectorAll("select");
const input = document.querySelector("input");

selects.forEach(select => select.addEventListener("change", handleUpdate));
input.addEventListener("input", handleUpdate);

function handleUpdate(e) {
  document.documentElement.style.setProperty(`--${this.id}`, this.value);
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.