【前端技巧】CSS常用知识碎片（六）
CSS常用知识碎片（六）
CSS的变量函数var()与自定义属性
-
CSS自定义属性命名：支持数字、短横线、空格、CJK文字等，不支持包含
$、[、]、^、(、)、%、"等特殊字符特殊字符,若要使用特殊字符，需要加上转义符 -
CSS自定义属性的作用域:若定义自定义属性在子元素，则无法作用域父元素，所以通常会将自定义属性定义在
:root伪类中，保证所有页面和任意标签元素都能使用自定义属性 -
CSS自定义属性不能自身赋值
-
CSS自定义属性不支持用在媒体查询中
-
在HTML标签中设置CSS自定义属性：
<div style="--color: deepskyblue;">
<img src="1.jpg" style="border: 10px solid var(--color);">
div>
- 在JavaScript中设置和获取CSS自定义属性
<div id="box">
<img src="1.jpg" style="border: 10px solid var(--color);">
div>
<script>
// 通过setProperty设置
box.style.setProperty('--color', 'deepskyblue');
// 通过getPropertyValue获取
var cssVarColor = getComputedStyle(box).getPropertyValue('--color');
script>
- 使用content属性显示CSS自定义属性值的技巧
<body>
<label>图片1：label>
<div class="bar" style="--percent: 60;">div>
<label>图片2：label>
<div class="bar" style="--percent: 40;">div>
<label>图片3：label>
<div class="bar" style="--percent: 20;">div>
body>
<style>
.bar {
height: 20px; width: 300px;
background-color: #f2f2f2;
}
.bar::before {
display: block;
/* 进度值信息显示 */
counter-reset: progress var(--percent);
content: counter(progress) '%\2002';
/* 宽度的设置 */
width: calc(1% * var(--percent));
color: #fff;
background-color: deepskyblue;
text-align: right;
white-space: nowrap;
overflow: hidden;
}
style>
文本字符处理能力的升级
- 利用
text-shadow实现3D投影文字效果
<body>
<span class="text-shadow-3d">立体投影span>
body>
<style>
/* .text-shadow-3d {
font-size: 60px;
color: deepskyblue;
text-shadow: 1px 1px #005A79, 2px 2px #005A79, 3px 3px
#005A79, 4px 4px #005A79, 5px
5px #005A79, 6px 6px #005A79, 7px 7px #005A79, 8px 8px #005A79;
} */
/* 利用 text-fill-color 简化8个颜色值 */
.text-shadow-3d {
font-size: 60px;
-webkit-text-fill-color: deepskyblue;
color: #005A79;
text-shadow: 1px 1px, 2px 2px, 3px 3px, 4px 4px, 5px 5px, 6px 6px, 7px 7px, 8px 8px;
}
style>
- 利用
text-shadow实现文字描边效果
<body>
<p class="text-stroke-out">外描边p>
body>
<style>
.text-stroke-out {
font-size: 60px;
color: #fff;
/* 如果描边宽度只有1px，则只需要4个方向的偏移，因为这里描边宽度为2px，所以使用了8个方向的偏移 */
text-shadow: 0 2px deeppink, 2px 0 deeppink, 0 -2px deeppink, -2px 0 deeppink, 2px 2px deeppink, -2px -2px deeppink, -2px 2px deeppink, 2px -2px deeppink;
}
style>
- 文字描边属性text-stroke
.stroke {
-webkit-text-stroke: 2px red;
}
/* 等同于 */
/* .stroke {
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: red;
} */
- 利用
text-fill-color实现文字渐变效果
<body>
<span class="text-fill-gradient">文字渐变填充效果span>
body>
<style>
.text-fill-gradient {
font-size: 60px;
-webkit-text-fill-color: transparent;
background: linear-gradient(to right, skyblue, deeppink,
deepskyblue);
-webkit-background-clip: text;
}
style>
- 利用
text-emphasis-style实现文字强调装饰符
<body>
宝贝，<span class="emphasis">爱你span>，<span class="emphasis">比心span>！
body>
<style>
.emphasis {
-webkit-text-emphasis-style: '❤';
text-emphasis-style: '❤';
}
style>
- 利用
text-size-adjust禁用iPhone横屏时字号自动调整的行为
body {
-webkit-text-size-adjust: none;
}
- 利用
font-variant实现英文字母的小型大写效果
p.small {
font-variant: small-caps;
}