CSS 代码片断

效果

text-shadow

另见 CSS#text-shadow。

text-shadow

Firefox

链接背景上滑效果

:root {
  --color-fg: #ff7690;
  --color-fg-visited: #cc5e73;
}
a {
  color: var(--color-fg);
  text-decoration: none;
  padding: 0 .1em;
  background-image: linear-gradient(var(--color-fg), var(--color-fg));
  background-position: 0% 100%;
  background-repeat: no-repeat;
  background-size: 100% 0%;
  transition: background-size cubic-bezier(0,.5,0,1) 0.15s;
}
a:visited {
  color: var(--color-fg-visited);
}
a:hover, a:active, a:focus {
  color: white;
  background-size: 100% 100%;
  text-shadow: 1px 1px 1px #666666;
}

评分星星

只支持火狐：

<style type="text/css">
<!--
.rating-star {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-image: url(star-min.svg);
}
#rating-stars {
  display: inline-block;
  width: 5em;
  height: 1em;
  mask-image: url(star-min.svg#mask);
  background-image: linear-gradient(yellow, yellow);
  background-repeat: no-repeat;
  background-size: 70% 100%;
}
div {
  font-size: 10em;
}
-->
</style>
<div><span id="rating-stars"><span class="rating-star"></span><span class="rating-star"></span><span class="rating-star"></span><span class="rating-star"></span><span class="rating-star"></span></span></div>

SVG：

<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1" viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <path id="star" d="m0.7814 0.9105c-0.0051 0.0037-0.2705-0.1462-0.2767-0.1462s-0.2723 0.1488-0.2774 0.1451c-0.0051-0.0037 0.0555-0.3024 0.0535-0.3084-0.0019-0.0060-0.2256-0.2130-0.2237-0.2190s0.3048-0.0407 0.3099-0.0444c0.0051-0.0037 0.1328-0.2804 0.1391-0.2804 0.0063 0.0000 0.1329 0.2773 0.1379 0.2810s0.3078 0.0397 0.3097 0.0456c0.0019 0.0060-0.2226 0.2121-0.2246 0.2180-0.0020 0.0060 0.0574 0.3049 0.0523 0.3086z" stroke-linejoin="round" stroke-width="0.0806"/>
    <mask id="mask" maskContentUnits="objectBoundingBox">
      <g transform="scale(.2 .8)">
        <use xlink:href="#star" fill="white" stroke="white"/>
        <use xlink:href="#star" fill="white" stroke="white" transform="translate(1 0)"/>
        <use xlink:href="#star" fill="white" stroke="white" transform="translate(2 0)"/>
        <use xlink:href="#star" fill="white" stroke="white" transform="translate(3 0)"/>
        <use xlink:href="#star" fill="white" stroke="white" transform="translate(4 0)"/>
      </g>
    </mask>
  </defs>
  <use xlink:href="#star" fill="none" stroke="#ccc"/>
</svg>

兼容 Google Chrome 的方案，使用叠加层：

<style type="text/css">
<!--
.rating-star {
  display: inline-block;
  width: 1em;
  height: 1em;
}
#rating-stars, #rating-stars-overlay {
  display: inline-block;
  width: 5em;
  height: 1em;
  background-image: url(star-min.svg);
  background-repeat: repeat-x;
  background-size: 20% 200%;
}
#rating-stars-overlay {
  position: absolute;
  top: 0;
  left: 0;
  background-position: 0% 100%;
  clip-path: polygon(0% 0%, 52% 0%, 52% 100%, 0% 100%);
  pointer-events: none;
}
div {
  position: relative;
  font-size: 10em;
}
-->
</style>
<div><span id="rating-stars"><span class="rating-star"></span><span class="rating-star"></span><span class="rating-star"></span><span class="rating-star"></span><span class="rating-star"></span></span><span id="rating-stars-overlay"></span></div>

SVG:

<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1" viewBox="0 0 1 2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <path id="star" d="m0.7814 0.9105c-0.0051 0.0037-0.2705-0.1462-0.2767-0.1462s-0.2723 0.1488-0.2774 0.1451c-0.0051-0.0037 0.0555-0.3024 0.0535-0.3084-0.0019-0.0060-0.2256-0.2130-0.2237-0.2190s0.3048-0.0407 0.3099-0.0444c0.0051-0.0037 0.1328-0.2804 0.1391-0.2804 0.0063 0.0000 0.1329 0.2773 0.1379 0.2810s0.3078 0.0397 0.3097 0.0456c0.0019 0.0060-0.2226 0.2121-0.2246 0.2180-0.0020 0.0060 0.0574 0.3049 0.0523 0.3086z" stroke-linejoin="round" stroke-width="0.0806"/>
  </defs>
  <use xlink:href="#star" fill="none" stroke="#ccc"/>
  <use xlink:href="#star" fill="yellow" stroke="#ccc" transform="translate(0 1)"/>
</svg>

中文不要用斜体

/* 中文不要斜体 */
@font-face {
  font-family: i;
  unicode-range: U+3000-303F, U+3400-4DBF, U+FF00-FFEF, U+4E00-9FFF, U+20000-323AF;
  font-style: italic;
  src:
    local("LXGW WenKai"),
    local("Iansui"),
    local("AR PL UKai CN"),
    local("AR PL KaitiM GB"),
    local("STKaiti"),
    local("KaiTi_GB2312"),
    local("Adobe Kaiti Std"),
    local("STFangsong"),
    local("FangSong_GB2312"),
    local("Adobe Fangsong Std");
}

i {
  font-family: i;
}

pre i, code i, tt i, kbd i, samp i, .mw-code i {
  font-family: i, monospace;
}

参见

• CSS