意想不到的CSS

丝绒拿铁有点甜
157 阅读20分钟

1. 文字溢出

单行文字溢出：

overflow: hidden; 
text-overflow: ellipsis; 
white-space: nowrap;

多行文字溢出：

使用旧版弹性布局模拟多行文字溢出，只能在Webkit内核中使用，局限性太大了。

  • display:-webkit-box：将容器作为弹性伸缩盒模型
  • -webkit-box-orient：弹性伸缩盒模型子节点的排列方式
  • -webkit-line-clamp：限制容器最多显示多少行文本
display: -webkit-box; 
overflow: hidden; 
text-overflow: ellipsis; 
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;

兼容性稳定的多行文字溢出： 使用::after 结合 max-height 与 line-height 计算最大显示行数，通过定位布局把省略号定位到整段文字的右下角，使用 linear-gradient() 调整渐变背景颜色稍微润色下省略号使其看上去自然一些：

.text {
    overflow: hidden; 
    position: relative; 
    max-height: 90px;
}
.text::after {
    position: absolute; 
    right: 0; bottom: 0; 
    padding-left: 40px; 
    background: linear-gradient(to right, transparent, #fff 50%); 
    content: "...";
}

2. 属性函数-attr()

attr(val) 用于返回节点属性，通常结合伪元素的 content 使用，是一个很优雅的函数。

<h1 class="Hello" data-name=" JowayYoung"></h1>

h1 {
	&::before {
		content: attr(class);
	}
	&::after {
		content: attr(data-name);
	}
}

  • ::before 通过 attr() 获取 <h1 class> 的属性值并赋值到 content 中;
  • ::after 通过 attr() 获取 <h1 data-name> 的属性值并赋值到 content 中;
  • 最终 <h1> 的 innerText 是 Hello JowayYoung 。

通过attr()结合:hover与:empty抓取节点需显示的内容是一个很不错的技巧。

  • 当按钮1触发悬浮状态:hover时，通过attr()获取节点的data-msg并赋值到::after的content中
  • 当按钮2内容为空:empty时，通过attr()获取节点的href并赋值到::after的content中

3. calc()

calc() 所有计量单位都能作为参数参与整个动态计算：

  •  数值：整数、浮点数
  •  长度：px、em、rem、vw、vh等
  •  角度：deg、turn
  •  时间：s、ms
  •  百分比：%

calc() 特性：

  • 四则运算：只能使用+、-、*、/作为运算符号
  • 运算顺序：遵循加减乘除运算顺序，可用()提升运算等级
  • 符号连接：每个运算符号必须使用空格间隔
  • 混合计算：可混合不同计量单位动态计算

在单页面应用中有遇到因为有滚动条或无滚动条而导致网页路由在跳转时发生向左或向右的抖动，可用calc() 巧妙解决该问题：

.elem { 
    padding-right: calc(100vw - 100%);
}

100vw是视窗宽度，100%是内容宽度，那100vw - 100%就是滚动条宽度了，声明padding-right用于保留滚动条出现的位置，这样滚动条出不出现都不会让网页抖动了。

4. clamp()/max()/min()

clamp()/max()/min()与calc()类似，所有计量单位都能作为参数参与整个动态计算，这些函数与calc()可互相嵌套使用。

.elem { 
    width: calc(min(1200px, 100%) / 5); 
}

  • max(...val)用于返回最大值，值间使用,间隔

  • min(...val)用于返回最小值，值间使用,间隔

    // 内容宽度自适应是100%，且不超过1200px
.elem { 
    width: min(1200px, 100%); 
 }
 // 等价于
 .elem { 
     width: 100%; 
     max-width: 1200px; 
}

  • clamp(min, val, max)用于返回区间范围值，即val在min~max区间，超过区间，最大是 max，最小是min

    .elem { 
    width: clamp(100px, 25vw, 300px); 
}

    节点宽度声明在100~300px，随着视窗宽度变化而变化。若视窗宽度大于300px则节点宽度一直保持300px，若视窗宽度在100~300px则节点宽度为25vw转化后的px，若视窗宽度小于100px则节点宽度一直保持100px。

5. css变量

CSS变量又称CSS自定义属性，指可在整个文档中重复使用的值。它由自定义属性--var与函数var()组成，var()用于引用自定义属性。使用规则，可以看阮一峰的 CSS 变量教程文章：

  • 声明：--变量名
  • 读取：var(--变量名, 默认值)
  • 类型
    • 普通：只能用作属性值不能用作属性名
    • 字符：与字符串拼接，"Hello, "var(--name)
    • 数值：使用calc()与数值单位连用，var(--width) * 10px
  • 作用域
    • 范围：在当前节点块作用域及其子节点块作用域中有效
    • 优先级别：内联样式 > ID选择器 > 类选择器 = 伪类选择器 = 属性选择器 > 标签选择器 = 伪元素选择器 > 通配选择器 = 兄弟选择器 = 后代选择器

5.1 条形加载条

常规的代码编写

<div class="bruce flex-ct-x">
	<ul class="strip-loading">
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
</div>

.strip-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px;
    height: 200px;
    li {
        border-radius: 3px;
        width: 6px;
        height: 30px;
        background-color: #f66;
        animation: beat 1s ease-in-out infinite;
        & + li {
            margin-left: 5px;
        }
        &:nth-child(2) {
            animation-delay: 200ms;
        }
        &:nth-child(3) {
            animation-delay: 400ms;
        }
        &:nth-child(4) {
            animation-delay: 600ms;
        }
        &:nth-child(5) {
            animation-delay: 800ms;
        }
        &:nth-child(6) {
            animation-delay: 1s;
        }
    }
}
@keyframes beat {
    0%,
    100% {
        transform: scaleY(1);
    }
    50% {
        transform: scaleY(.5);
    }
}

这种方式不灵活也不易于封装成组件，所以使用变量表达式代替：

  • 对于HTML部分的修改，让每个<li>拥有一个自己作用域中的变量。
  • 对于CSS部分的修改，需分析哪些属性是随着index递增而发生规律变化的
<div class="bruce flex-ct-x" data-title="条形加载条">
	<ul class="strip-loading">
		<li style="--line-index: 1;"></li>
		<li style="--line-index: 2;"></li>
		<li style="--line-index: 3;"></li>
		<li style="--line-index: 4;"></li>
		<li style="--line-index: 5;"></li>
		<li style="--line-index: 6;"></li>
	</ul>
</div>

.strip-loading {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 200px;
	height: 200px;
	li {
		// 变量--line-index与--time使每个<li>拥有一个属于自己的作用域
		--time: calc((var(--line-index) - 1) * 200ms);
		border-radius: 3px;
		width: 6px;
		height: 30px;
		background-color: #f66;
		// 在当前节点的作用域内调用变量
		animation: beat 1.5s ease-in-out var(--time) infinite;
		& + li {
			margin-left: 5px;
		}
	}
}
@keyframes beat {
	0%,
	100% {
		transform: scaleY(1);
	}
	50% {
		transform: scaleY(.5);
	}
}

5.2 心形加载条

image.png

  • 每条线条的背景颜色与动画时延不同
  • 动画运行时的高度也不同
  • 第一条与第九条的高度一样，第二条与第八条的高度一样，依次类推，得到高度变换相同类的公式：对称index = 总数 + 1 - index
  • 背景颜色使用滤镜的色相旋转hue-rotate()
<div class="heart-loading">
	<ul style="--line-count: 9;">
		<li class="line-1" style="--line-index: 1;"></li>
		<li class="line-2" style="--line-index: 2;"></li>
		<li class="line-3" style="--line-index: 3;"></li>
		<li class="line-4" style="--line-index: 4;"></li>
		<li class="line-5" style="--line-index: 5;"></li>
		<li class="line-6" style="--line-index: 6;"></li>
		<li class="line-7" style="--line-index: 7;"></li>
		<li class="line-8" style="--line-index: 8;"></li>
		<li class="line-9" style="--line-index: 9;"></li>
	</ul>
</div>

.heart-loading {
    margin: 0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 200px;
	height: 200px;
	ul {
		display: flex;
		justify-content: space-between;
		width: 150px;
		height: 10px;
	}
	li {
		--angle: calc(var(--line-index) / var(--line-count) * .5turn);
		--time: calc((var(--line-index) - 1) * 40ms);
		border-radius: 5px;
		width: 10px;
		height: 10px;
		background-color: #3c9;
        // 背景颜色使用滤镜的色相旋转hue-rotate()
		filter: hue-rotate(var(--angle));
		animation-duration: 2s;
		animation-delay: var(--time);
		animation-iteration-count: infinite;
		&.line-1,
		&.line-9 {
			animation-name: beat-1;
		}
		&.line-2,
		&.line-8 {
			animation-name: beat-2;
		}
		&.line-3,
		&.line-7 {
			animation-name: beat-3;
		}
		&.line-4,
		&.line-6 {
			animation-name: beat-4;
		}
		&.line-5 {
			animation-name: beat-5;
		}
	}
}
@keyframes beat-1 {
	0%,
	10%,
	90%,
	100% {
		height: 10px;
	}
	45%,
	55% {
		height: 30px;
		transform: translate3d(0, -15px, 0);
	}
}
@keyframes beat-2 {
	0%,
	10%,
	90%,
	100% {
		height: 10px;
	}
	45%,
	55% {
		height: 60px;
		transform: translate3d(0, -30px, 0);
	}
}
@keyframes beat-3 {
	0%,
	10%,
	90%,
	100% {
		height: 10px;
	}
	45%,
	55% {
		height: 80px;
		transform: translate3d(0, -40px, 0);
	}
}
@keyframes beat-4 {
	0%,
	10%,
	90%,
	100% {
		height: 10px;
	}
	45%,
	55% {
		height: 90px;
		transform: translate3d(0, -30px, 0);
	}
}
@keyframes beat-5 {
	0%,
	10%,
	90%,
	100% {
		height: 10px;
	}
	45%,
	55% {
		height: 90px;
		transform: translate3d(0, -20px, 0);
	}
}

5.3 标签导航

实现思路：

  • 使用 css 变量标记每个标签的背景颜色
  • 使用 js 切换标签的显示状态
    • 读取变量：elem.style.getPropertyValue()
    • 设置变量：elem.style.setProperty()
    • 删除变量：elem.style.removeProperty()
<div class="bruce flex-ct-x">
	<div class="tab-navbar">
		<nav>
			<label class="active">标题1</label>
			<label>标题2</label>
			<label>标题3</label>
			<label>标题4</label>
		</nav>
		<main>
			<ul style="--tab-count: 4;">
				<li style="--bg-color: #f66;">内容1</li>
				<li style="--bg-color: #66f;">内容2</li>
				<li style="--bg-color: #f90;">内容3</li>
				<li style="--bg-color: #09f;">内容4</li>
			</ul>
		</main>
	</div>
</div>

css 实现：

  • 在<ul>中定义--tab-index表示标签当前的索引
  • 当点击按钮时重置--tab-index的值，可实现移动<ul>的位置显示指定标签
  • 定义--tab-move，通过calc()计算--tab-index与--tab-move的关系，以操控transform:translate3d()移动<ul>
.tab-navbar {
	display: flex;
	overflow: hidden;
	flex-direction: column-reverse;
	border-radius: 10px;
	width: 300px;
	height: 400px;
	nav {
		display: flex;
		height: 40px;
		background-color: #f0f0f0;
		line-height: 40px;
		text-align: center;
		label {
			flex: 1;
			cursor: pointer;
			transition: all 300ms;
			&.active {
				background-color: #3c9;
				color: #fff;
			}
		}
	}
	main {
		flex: 1;
		ul {
			--tab-index: 0;
			--tab-width: calc(var(--tab-count) * 100%);
			--tab-move: calc(var(--tab-index) / var(--tab-count) * -100%);
			display: flex;
			flex-wrap: nowrap;
			width: var(--tab-width);
			height: 100%;
			transform: translate3d(var(--tab-move), 0, 0);
			transition: all 300ms;
		}
		li {
			display: flex;
			justify-content: center;
			align-items: center;
			flex: 1;
			background-color: var(--bg-color);
			font-weight: bold;
			font-size: 20px;
			color: #fff;
		}
	}
}

const navs = document.querySelectorAll(".tab-navbar nav label");
const tabs = document.querySelector(".tab-navbar main ul");

navs.forEach((v, i) => v.addEventListener("click", e => {
	navs.forEach(v => v.classList[v === e.target ? "add" : "remove"]("active"));
	tabs.style.setProperty("--tab-index", i);
}));

5.4 悬浮跟踪按钮

image.png 实现思路：先对按钮布局与着色，然后使用伪元素标记鼠标的位置，定义--x与--y表示伪元素在按钮中的坐标，通过JS获取鼠标在按钮中的offsetX与offsetY分别赋值给--x与--y，再对伪元素添加径向渐变的背景颜色，大功告成，一个酷炫的鼠标悬浮跟踪效果就这样诞生了。

6. 选择器

基础选择器

选择器别名说明版本
tag标签选择器指定类型的标签1
#idID选择器指定身份的标签1
.class类选择器指定类名的标签1
*通配选择器所有类型的标签2

层次选择器

选择器别名说明版本
elemP elemC后代选择器元素的后代元素1
elemP>elemC子代选择器元素的子代元素2
elem1+elem2相邻同胞选择器元素相邻的同胞元素2
elem1~elem2通用同胞选择器元素后面的同胞元素3

集合选择器

选择器别名说明版本
elem1,elem2并集选择器多个指定的元素1
elem.class交集选择器指定类名的元素1

条件选择器

选择器说明版本
:lang指定标记语言的元素2
:dir()指定编写方向的元素4
:has包括指定元素的元素4
:is指定条件的元素4
:not非指定条件的元素4
:where指定条件的元素4
:scope指定元素作为参考点4
:any-link所有包括href的链接元素4
:local-link所有包括href且属于绝对地址的链接元素4

状态选择器

选择器说明版本
:active鼠标激活的元素1
:hover鼠标悬浮的元素1
:link未访问的链接元素1
:visited已访问的链接元素1
:target当前锚点的元素3
:focus输入聚焦的表单元素2
:required输入必填的表单元素3
:valid输入合法的表单元素3
:invalid输入非法的表单元素3
:in-range输入范围内的表单元素3
:out-of-range输入范围外的表单元素3
:checked选项选中的表单元素3
:optional选项可选的表单元素3
:enabled事件启用的表单元素3
:disabled事件禁用的表单元素3
:read-only只读的表单元素3
:read-write可读可写的表单元素3
:target-within内部锚点元素处于激活状态的元素4
:focus-within内部表单元素处于聚焦状态的元素4
:focus-visible输入聚焦的表单元素4
:blank输入为空的表单元素4
:user-invalid输入合法的表单元素4
:indeterminate选项未定的表单元素4
:placeholder-shown占位显示的表单元素4
:current()浏览中的元素4
:past()已浏览的元素4
:future()未浏览的元素4
:playing开始播放的媒体元素4
:paused暂停播放的媒体元素4

结构选择器

选择器说明版本
:root文档的根元素3
:empty无子元素的元素3
:nth-child(n)元素中指定顺序索引的元素3
:nth-last-child(n)元素中指定逆序索引的元素3
:first-child元素中为首的元素2
:last-child元素中为尾的元素3
:only-child父元素仅有该元素的元素3
:nth-of-type(n)标签中指定顺序索引的标签3
:nth-last-of-type(n)标签中指定逆序索引的标签3
:first-of-type标签中为首的标签3
:last-of-type标签中为尾的标签3
:only-of-type父元素仅有该标签的标签3

属性选择器

选择器说明版本
[attr]指定属性的元素2
[attr=val]属性等于指定值的元素2
[attr*=val]属性包括指定值的元素3
[attr^=val]属性以指定值开头的元素3
[attr$=val]属性以指定值结尾的元素3
[attr~=val]属性包括指定值(完整单词)的元素(不推荐使用)2

伪元素

选择器说明版本
::before在元素前加入的内容2
::after在元素后加入的内容2
::first-letter元素的首字母1
::first-line元素的首行1
::selection鼠标选中的元素3
::backdrop全屏模式的元素4
::placeholder表单元素的占位4

6.1 +与~

6.2 :hover

:hover 作用于鼠标悬浮的节点，结合attr()有一个很好用的场景，就是鼠标悬浮在某个节点中显示提示浮层，提示浮层中包括着该动作的文本：

  • 给节点标记一个用户属性data-*
  • 当鼠标悬浮在该节点中触发:hover
  • 通过attr()获取data-*的内容
  • 将data-*的内容赋值到伪元素的content中

6.3 :valid与:invalid

表单验证相关的 HTML 属性：

  • placeholder：占位，在未输入内容时显示提示文本
  • pattern：正则，在输入内容时触发正则验证
  • :valid：作用于输入合法的表单节点
  • :invalid：作用于输入非法的表单节点

6.4 :checked

:checked 作用于选项选中的表单节点，当 <input> 的 type 设置为 radio 与 checkbox 时可用。在 CSS 神操作骚技巧中是一个很重要的技巧，主要是用于模拟鼠标点击事件。

image.png

<input> 与 <label> 的巧妙搭配：使用<label>绑定<input>可将<input>的鼠标选择事件转移到<label>中，由<label>控制选中状态。<input>使用id与<label>使用for关联起来，而hidden使<input>隐藏起来，不占用网页任何位置，此时<label>放置在网页任何位置都行。

6.5 :empty

:empty作用于无子节点的节点，该子节点也包括行内匿名盒(单独的文本内容)。以下三种情况都为非空状态，若不出现这三种状态则为空状态，此时:empty才会触发。

  •  仅存在节点：<div><p>CSS</p></div>
  •  仅存在文本：<div>CSS</div>
  •  同时存在节点与文本：<div>Hello <p>CSS</p></div>

6.6 ::before与::after

::before/::after最常见场景就是气泡对话框，圆滚滚的身子带上一个三角形的尾巴。像以下第二个挖空的气泡对话框，其实使用白色填充背景颜色，而小尾巴使用白色的::after叠加橙色的::before形成障眼法。

7. 渐变

渐变指两种或多种颜色在指定区域内平滑过渡的效果。曾经渲染带有渐变的背景只能使用图像实现，如今CSS3增加了以下渐变函数，让代码渲染渐变成为可能。

  •  linear-gradient() ：线性渐变
  •  radial-gradient() ：径向渐变
  •  conic-gradient() ：锥形渐变
  •  repeating-linear-gradient() ：重复线性渐变
  •  repeating-radial-gradient() ：重复径向渐变
  •  repeating-conic-gradient() ：重复锥形渐变

CSS渐变分为三种，每种都有自身的特性。

  •  线性渐变：沿着指定方向从起点到终点逐渐改变颜色，渐变形状是一条直线
  •  径向渐变：沿着任意方向从圆心往外面逐渐改变颜色，渐变形状是一个圆形或椭圆形
  •  锥形渐变：沿着顺时针方向从圆心往外面逐渐改变颜色，渐变形状是一个圆锥体

每个渐变函数都必须在background或background-image中使用，可认为gradient()就是一个图像，只不过是通过函数生成的图像。

7.1 线性渐变

线性渐变是三种渐变效果中最简单的渐变，以直线的方式向指定方向扩散，使用频率很高，是渐变函数中最好用的函数。掌握它几乎能应付很多需求，其使用语法如下：

background-image: linear-gradient(direction, color-stop)

  • Direction：方向

    • Keyword：方向关键字to left/right/top/bottom/top left/top right/bottom left/bottom right(默认to bottom)
    • Angle：角度，以顺时针方向的垂直线与渐变线的夹角计算，超出N圈则计算剩余角度

  • ColorStop：色标

    • Color：颜色，可参考background-color取值，在指定位置产生渐变效果所使用的颜色
    • Position：位置，可参考background-position的Position取值，在指定位置产生渐变效果
.elem { 
    width: 400px; 
    height: 200px; 
    background-image: linear-gradient(to bottom, #f66, #66f); 
    /* 等价于 */
    background-image: linear-gradient(to bottom, #f66 0, #66f 100%); 
}

color-stop()在指定位置使用指定颜色，可用多个色标，其连写方式如下。第一个值为Color，第二个值为Position，形式为#f66 30%，若第二个值不声明则浏览器会自动分配位置。

.elem { 
    background-image: linear-gradient(to bottom, #f66 0, #66f 20%, #f90, 40%, #09f 60%, #9c3 80%, #3c9 100%); 
}

7.2 径向渐变

径向渐变是一个很奇妙的渐变效果，以圆形或椭圆形的方式向任意方向扩散。其使用语法如下。

background-image: radial-gradient(shape size at position, color-stop)

  • Shape：形状

    • ellipse：椭圆形(默认)
    • circle：圆形

  • Size：尺寸

    • farthest-corner：从圆心到离圆心最远的角为半径(默认)
    • farthest-side：从圆心到离圆心最远的边为半径
    • closest-corner：从圆心到离圆心最近的角为半径
    • closest-side：从圆心到离圆心最近的边为半径
    • Size：尺寸，可用任何长度单位，宽与高必须同时声明

  • Position：位置

    • Keyword：位置关键字left/right/top/bottom/center(默认center)
    • Position：位置，可用任何长度单位

  • ColorStop：色标

    • Color：颜色，可参考background-color取值，在指定位置产生渐变效果所使用的颜色
    • Position：位置，可参考background-position的Position取值，在指定位置产生渐变效果
.elem {
	width: 400px;
	height: 200px;
	background-image: radial-gradient(100px 100px, #f66, #66f);
	/* 等价于 */
	background-image: radial-gradient(ellipse 100px 100px at center, #f66, #66f);
}

7.3 锥形渐变

锥形渐变比其他两个渐变效果更新潮，，以圆锥体的方式向顺时针方向扩散，产生的渐变效果就像俯视圆锥体的顶部。因为兼容性较差也无实际应用，不过认识它也是一件很不错的事情，其使用语法如下。

background-image: conic-gradient(color-stop)
  • ColorStop：色标
    • Color：颜色，可参考background-color取值，在指定位置产生渐变效果所使用的颜色
    • Position：位置，可参考background-position的Position取值，在指定位置产生渐变效果
.elem { 
    width: 400px; 
    height: 200px; 
    background-image: conic-gradient(#f66, #66f); 
    /* 等价于 */ 
    background-image: conic-gradient(#f66 0, #66f 100%); 
}

7.4 渐变背景

声明linear-gradient()产生从左上角往右下角的渐变效果，将背景定位在左边，通过animation控制背景定位左右徘徊产生动态的渐变背景。

7.5 渐变文本

实现原理与上述镂空文本和渐变背景一样，在声明background-image时由图像路径改成linear-gradient()，再通过filter:hue-rotate()在指定时间内改变背景色相。

7.6 闪烁文本

实现原理与上述渐变文本一样，额外声明background-blend-mode为强光模式是为了模拟闪烁效果。

8. 阴影

能实现阴影效果的有：

  • box-shadow ：属性，使盒子轮廓产生阴影效果；
  • text-shadow ：属性，使文本轮廓产生阴影效果；
  • drop-shadow()：filter中的滤镜函数，使透明图像的非透明部分轮廓产生阴影效果；

具备的参数：

  • OffsetX：水平偏移，阴影的水平位置(必选)
    • Offset：偏移，可用任何长度单位，允许负值，正值向右负值向左(默认0)
  • OffsetY：垂直偏移，阴影的垂直位置(必选)
    • Offset：偏移，可用任何长度单位，允许负值，正值向下负值向上(默认0)
  • Blur：模糊半径，阴影的清晰程度(虚色)
    • Length：长度，可用任何长度单位，值越大边缘越模糊(默认0)
  • Spread：扩展距离，阴影的实体尺寸(实色)
    • Length：长度，可用任何长度单位，允许负值，正值扩大负值缩小(默认0)
  • Color：投影颜色
    • transparent：透明(默认)
    • Keyword：颜色关键字
    • HEX：十六进制色彩模式
    • RGB或RGBA：RGB/A色彩模式
    • HSL或HSLA：HSL/A色彩模式
  • Position：投影位置
    • outset：阴影显示在外部(默认)
    • inset：阴影显示在内部

上述参数都是box-shadow标配的，而text-shadow与drop-shadow()除了spread与position，其余全部标配。

box-shadow: offset-x offset-y blur spread color position
text-shadow: offset-x offset-y blur color
filter: drop-shadow(offset-x, offset-y, blur, color)

多重阴影，使用逗号隔开。先声明的阴影层叠等级最高，会遮挡后面声明的阴影，排列方向由position决定。后面声明的阴影接着上一个排列下去，此时需将blur或spread增大，防止被先声明的阴影遮挡。

滤镜-filter filter 包括十个函数，每个函数包括以下参数:

  • blur()：模糊

    • Length：长度，可用任何长度单位，值为 0 显示原图，值越大越模糊

  • brightness()：亮度

    • Percentage：百分比，可用 0~1 代替，值为 0 显示全黑，值为 100% 显示原图

  • contrast() ：对比度

    • Percentage：百分比，可用0~1代替，值为0显示全黑，值为100%显示原图

  • drop-shadow() ：阴影， 参考 box-shadow

  • grayscale() ：灰度

    • Percentage：百分比，可用0~1代替，值为0显示原图，值为100%显示全灰

  • hue-rotate() ：色相旋转

    • Angle：角度，值为0显示原图，值为0~360deg减弱原图色彩，值超过360deg则相当绕N圈再计算剩余的值

  • invert() ：反相

    • Percentage：百分比，可用0~1代替，值为0显示原图，值为100%完全反转原图色彩

  • opacity() ：透明度

    • Percentage：百分比，可用0~1代替，值为0显示透明，值为100%显示原图

  • saturate() ：饱和度

    • Percentage：百分比，可用0~1代替，值为0完全不饱和原图，值为100%显示原图

  • sepia() ：褐色

    • Percentage：百分比，可用0~1代替，值为0显示原图，值为100%显示褐

悼念模式： 把<html>替换成<html style="filter:grayscale(1)">，意思是把当前节点及其后代节点声明为100%的灰度模式。

9. 动感心形

image.png

  • 声明<div>的尺寸为一个正方形并以中心顺时针旋转45deg
  • 声明两个伪元素继承<div>的尺寸并绝对定位
  • 声明两个伪元素的圆角率为100%并平移到相应位置

巧妙利用了transform将两个伪元素平移到相应位置产生叠加错觉。

10. 像素边框问题

1px边框在桌面端网站看上去无大问题，但在移动端网站看上去却觉得很粗。可以使用一个伪元素的边框去当作节点边框，声明border为1px并将其宽高声明成200%，最终效果是该节点的2倍大小，再通过声明transform:scale(.5)将该伪元素缩小到原来的0.5倍，现在与节点尺寸一样了，而border也通过浏览器自动计算成0.5px了，最终实现0.5px边框。其实现原理就是将边框宽度计算交由浏览器处理。

11. 手风琴

image.png

12. 登录注册

文章摘录：

avatar
文章
阅读
粉丝