《css揭秘》- 47个不为人知的高阶操作🔥(下篇20-47， 7K长文多图预警)（二）-阿里云开发者社区

《css揭秘》- 47个不为人知的高阶操作🔥(下篇20-47， 7K长文多图预警)（二）

2023-06-26 62

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 《css揭秘》- 47个不为人知的高阶操作🔥(下篇20-47， 7K长文多图预警)（二）

26-自定义下划线

背景知识：css 渐变、background-size、text-shadow、'条纹背景'

介绍：默认的下划线虽然很实用，但是太普通，可能无法满满广大设计师们的审美需求，这里介绍一种自定义下划线的最佳方案。

防止下划线穿过文字底部、虚线下划线

<p>“The only way to <a>get rid of a temptation</a> is to <a>yield</a> to it.”</p>
<p>“The only way to <a>get rid of a temptation</a> is to <a>yield</a> to it.”</p>
/**
 * Custom underlines
 */
body {
    font: 250%/1.6 Baskerville, Palatino, serif;
}
a {
    background: linear-gradient(gray, gray) no-repeat;
    background-size: 100% 1px;
    background-position: 0 1.02em;
    text-shadow: .05em 0 white, -.05em 0 white;
}
p:nth-child(2) a {
    background: linear-gradient(90deg, gray 66%, transparent 0) repeat-x;
    background-size: .2em 2px;
    background-position: 0 1em;
}

波浪下划线

<p>“The only way to <a>get rrid of a temptatoin</a> is to <a>yeild</a> to it.”</p>
/**
 * Wavy underlines
 */
body {
    font: 250%/1.6 Baskerville, Palatino, serif;
}
a {
    background: linear-gradient(-45deg, transparent 40%, red 0, red 60%, transparent 0) 0 1em,
    linear-gradient(45deg, transparent 40%, red 0, red 60%, transparent 0) .1em 1em;
    background-repeat: repeat-x;
    background-size: .2em .1em;
    text-shadow: .05em 0 white, -.05em 0 white;
}

27-现实中的文字效果

背景知识：text-shadow

介绍：介绍几种艺术文字的实现方案

凸版印刷效果

/**
 * Letterpress
 */
body {
    font: 250%/1.6 Baskerville, Palatino, serif;
}
p {
    padding: .8em 1em;
    background: hsl(210, 13%, 60%);
    color: hsl(210, 13%, 30%);
    text-shadow: 0 1px 1px hsla(0,0%,100%,.8);
}
p + p {
    background: hsl(210, 13%, 30%); 
    color: hsl(210, 13%, 60%);
    text-shadow: 0 -1px 1px black;
}

空心字效果

/**
 * Stroked text
 */
h1 {
    margin: 0;
    color: white;
}
h1:first-child {
    text-shadow: 1px 1px black, -1px -1px black, 1px -1px black, -1px 1px black;
}
h1 text { fill: currentColor }
h1 use {
    stroke: black; 
    stroke-width: 6;
    stroke-linejoin: round;
}
body {
    background: deeppink;
    font: bold 200%/1 Rockwell, serif;
}

文字外发光效果

<a href="http://csssecrets.io">Glow</a>
/**
 * Glowing text
 */
body {
    background: #203;
    font: bold 500%/1 Rockwell, serif;
}
a {
    color: #ffc;
    text-decoration: none;
    transition: 1s;
}
a:hover { text-shadow: 0 0 .1em, 0 0 .3em; }

文字凸起效果

/**
 * Extruded text
 */
body {
    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;
    font: bold 500%/1 Rockwell, serif;
}

28-环形文字

背景知识：基本的 SVG

介绍：通过使用 SVG 路径来实现环形排列的文字效果

/**
 * Text on a circle
 */
body {
    font: bold 120% Helvetica, sans-serif;
}
.circular {
    width: 30em;
    height: 30em;
    margin: 4em auto 0;
}
.circular svg {
    display: block;
    overflow: visible;
    transition: 10s linear transform;
}
.circular svg:hover { transform: rotate(-2turn); }
.circular text { fill: currentColor }
.circular path { fill: none; }

29-选中合适的鼠标光标

主要就是介绍了 css3 中提供的一些新的鼠标光标效果，其中重点推荐了 cursor: not-allowed 和隐藏光标的方法 cursor：none;

30-扩大可点击区域

介绍：根据Fitts 法则，我们推论出，目标越大，越容易到达，所以在目标大小固定的情况下，将可点击范围扩大，也可以提高用户体验，这里介绍两种方法。

透明边框 border 来实现

<button>+</button>
/**
 * Extending the hit area — with generated content
 */
button {
    position: relative;
    padding: .3em .5em;
    background: #58a;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,.3);
    box-shadow:  0 .1em .2em -.05em rgba(0,0,0,.5);
    color: white;
    font: bold 150%/1 sans-serif;
    cursor: pointer;
}
button:before {
    content: '';
    position: absolute;
    top: -10px; right: -10px;
    bottom: -10px; left: -10px;
}

伪元素来实现

使用透明伪元素覆盖，并将半径向外延伸10px 来实现

<button>+</button>
/**
 * Extending the hit area — with generated content
 */
button {
    position: relative;
    padding: .3em .5em;
    background: #58a;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,.3);
    box-shadow:  0 .1em .2em -.05em rgba(0,0,0,.5);
    color: white;
    font: bold 150%/1 sans-serif;
    cursor: pointer;
}
button:before {
    content: '';
    position: absolute;
    top: -10px; right: -10px;
    bottom: -10px; left: -10px;
}