《CSS揭秘》一书揭示了 47 个鲜为人知的 CSS 技巧，主要内容包括背景与边框、形状、 视觉效果、字体排印、用户体验、结构与布局、过渡与动画等。本书将带领读者循序渐进地探寻更优雅的解决方案，攻克每天都会遇到的各种网页样式难题。
- 此篇文章只是用于记录下《CSS揭秘》一书中提到的CSS效果解决方案，并附带代码链接。
- DRY: don’t repeat yourself,减少代码重复
- WET：we enjoy typing/write everything twice,与DRY正相反
一、背景与边框
- 半透明边框
- 原理：利用
background-clip:padding-box实现背景色不占用边框底部（默认情况下background-clip的初始值是border-box，这意味着当边框设置半透明色值时，显示的会是背景色叠加透明色的效果）
- 原理：利用
- 多重边框
- 原理：1、利用
box-shadow可以创建任意数量的投影（实色即边框），但注意投影是不占用元素布局的。 2、利用outline实现双重边框
- 原理：1、利用
- 灵活背景定位
- 原理：
background-positioon:right 10px bottom 20px;指背景位置距离右边10px，距离底部20px.
- 原理：
- background-origin
- 作用：用于设置背景的原始位置依据，值为content-box,padding-box,border-box;
- calc()方案
- 边框内圆角
- 原理：利用outline和box-shadow组合实现内圆角（outline目前没有实现圆角）
- 方法二：两个元素来实现，当然这样增加了额外的html标签
- 横向条纹背景
- 原理：利用
bacground:linear-gradient(red 50%,green 50%)实现双条纹，利用background-size:100% 30px实现单个条纹高15px
- 原理：利用
- 垂直条纹背景
- 原理：设置
linear-gradient角度为90deg，或to right，通过background-size:30px 100%设置条纹单个宽15px
- 原理：设置
- 斜向条纹
- 原理：45deg斜向条纹，利用 勾股定理计算出 条纹若30px时，需要background-size对应的值
- 60度斜向条纹
- 原理：通过
background:repeating-linear-gradient(60deg,red,red 15px,blue 15px ,blue 30px)实现
- 原理：通过
- 灵活同色系条纹
- 应用场景：如bootstrap的进度条，由深色背景+同色系浅背景的斜条纹组成
- 原理：同色系深色作为背景色，再通过叠加
白色半透明和透明条纹，实现深浅间隔条纹
- 蓝色网格背景
- 原理：利用background-image:linear-gradient()支持分隔叠加的属性方式
- 波点背景图
- 原理：利用
background:radial-gradient(green 30%,transparent 0)实现，径向渐变由内向外
- 原理：利用
- 棋盘
- svg实现棋盘
- 角向渐变
- 作用：可用于实现取色的色轮
- 伪随机背景
- 作用：实现随机宽度的竖直条纹
- 动态loading图
- 原理：通过叠加多个animation，实现连续动画效果（旋转，变色，边框宽度增加）
- 连续的图像边框
- 原理：通过叠加纯白背景（渐变实现，padding-box）和图像背景（border-box）
- 信封边缘背景
- 原理：通过叠加纯白渐变背景（padding-box)和-45deg条纹渐变（borderbox)
- 边框背景图实现信封边缘
- 原理：通过border-image值为线性渐变的条纹而实现
- 移动的虚线边框
- 原理：利用背景叠加实现虚线边框，通过animation实现背景移动产生动态效果
- 字体脚注效果
- 原理：利用
border-image属性加一条线性渐变产生的垂直条纹，border-width控制边框粗线，渐变长度来控制脚注长度
- 原理：利用
二、形状
- 椭圆
- 原理：使用
border-radius:50%实现
- 原理：使用
- 半椭圆
- 原理：利用border-radius可以使用
/分隔开水平和垂直方向上的圆角值特性来分别设置不同方式上的圆角半径
- 原理：利用border-radius可以使用
- 四分之一椭圆
- 原理：border-radius只设置一个角的圆弧
- 平行四边形
- 原理：
transform:skew()变形。（注意：行内元素无效）
- 原理：
- 平行四边形伪元素方案
- 原理：利用伪元素来变形，从而不影响元素内部正常内容（变形元素内部的内容也会变形）
- 菱形图片裁切
- 原理：嵌套元素，内外反向rotate，内部图片宽度与对角线平齐.(内部反向rotate是为了摆正图片)
- 菱形裁切方案二
- 原理：利用
clip-path裁切路径属性，设置其值为polygon()多边形来实现
- 原理：利用
- 元素切角
- 原理：利用渐变（透明到实色）实现角度，利用background-size控制多个渐变互不影响实现多个切角
- 元素弧形切角
- 原理：利用径向渐变实现，多个圆角与上述同理
- border-image实现切角
- 原理：运用border-image结合svg图实现切角边框，通过background-clip限制背景色
- 裁切路径实现切角
- 原理：运用clip-path:polygon()实现，局限兼容性不好，裁切会忽略内部文本内容。优点：可裁切任意内容，不受背景图限制
- 梯形导航tab效果
- 原理：运用
transform:perspective()实现穿透变形
- 原理：运用
- 动态饼图
- 原理：伪元素遮盖旋转
- 静态饼图
- svg实现饼图
三、视觉效果
- 单侧投影
- 原理：利用box-shadow的3个大小值外，第4个长度参数（扩张半径），当扩张半径为负的模糊半径时，即可实现单侧投影
- 邻边投影
- 原理：设置双侧位移，并设置扩张半径为模糊半径值一半
- 对侧投影
- 原理：叠加两个单侧投影
- 不规则图形投影
- 原理：利用CSS滤镜
filter:drop-shadow()实现
- 原理：利用CSS滤镜
- 染色效果
- 原理：通过多个滤镜结合实现效果
- 染色效果-混合模式
- 原理：利用CSS混合模式属性，设置两层背景混合效果，mix-blend-mode:是混合叠加两个元素的效果，background-blend-mode是设置两层背景图的混合效果。
luminosity表示混合模式
- 原理：利用CSS混合模式属性，设置两层背景混合效果，mix-blend-mode:是混合叠加两个元素的效果，background-blend-mode是设置两层背景图的混合效果。
- 毛玻璃效果
- 原理：利用CSS滤镜
filter:blur()实现模糊，通过模糊伪元素再叠加到元素底部实现。（细节：滤镜默认靠近边框时效果会减弱，因此在设置blur值时，最好多设大一点）
- 原理：利用CSS滤镜
- 折角效果
- 原理：利用切角效果 ，结合叠加一个深色三角形
- 多角度折角效果
- mixin实现折角
四、字体排印
- 连字符断行
- 效果不理想（兼容性不好）
- 插入换行
- 原理：运用unicode中的换行符
0x000A,在CSS中即为\000A（简写为\A）来作为伪元素的content值，同时注意保留换行符和空白符white-space:pre
- 原理：运用unicode中的换行符
- 文本行斑马条纹
- 原理：利用
条纹背景实现条纹，再利用背景em值作为条纹大小
- 原理：利用
- 调整tab的宽度
- 原理：通过CSS3新增文本属性
tab-size:2;来设置每个tab占2个字符宽度
- 原理：通过CSS3新增文本属性
- 连字
- 华丽的&符号
- 原理：通过
@font-face规则实现基本的字体嵌入
- 原理：通过
- 自定义下划线
- 原理：CSS渐变 ，background-size,text-shadow,‘条纹背景’【效果不理想】
- 波浪下划线
- 【效果不理想】
- 凸版印刷效果
- 空心字效果
- 文字外发光效果
- 原理：通过叠加多个text-shadow，运用transition过渡实现特效
- 文字突起效果
- 环形文字
- 原理：通过内联SVG来实现文字环形排版，还可以运用动画使其旋转。通过
xlink:href属性来把元素内容链接到路径上 - 通过JS处理，把
.circual类元素自动替换为相应的SVG
- 原理：通过内联SVG来实现文字环形排版，还可以运用动画使其旋转。通过
五、用户体验
- 选用合适的鼠标指针
- 原理：在不同场景下选用不同的鼠标指针。
cursor属性设置 - 隐藏光标：
cursor:none,对于老版本浏览器可以通过cursor:url(transparent.gif)来传入一张1*1的透明gif模拟隐藏
- 原理：在不同场景下选用不同的鼠标指针。
- 扩大可点击区域
- 原理：通过伪元素扩大按钮范围
- 扩大可点击区域
- 自定义复选框
- 原理：利用checkbox的
:checked属性区分选中状态，再结合相邻label元素控制，通过伪元素实现想要的效果，再隐藏掉原复选框
- 原理：利用checkbox的
- 开关式按钮
- CSS遮罩层
- 原理：通过box-shadow实现。缺陷：遮罩层下还是可以操作
- 原生modal遮罩层
- 原理：通过
::backdrop伪类实现遮罩
- 原理：通过
- 模糊背景弱化
- 原理：通过滤镜模糊
filter:blur()模糊背景
- 原理：通过滤镜模糊
- 滚动提示
- 应用场景：当可向下，或向上滚动时，提示出部分阴影
- 交互式图片对比控件
六、结构与布局
- 自适应内部元素
- 原理：通过CSS3新增属性
min-content让元素宽度最大宽度为其内部不可断行的元素宽度，
- 原理：通过CSS3新增属性
- 精准控制表格列表
- 原理：通过设置
table-layout:fixed把表格更多的控制权交到开发者手里，而不是让浏览器决定内容多少时变更理想的渲染宽度
- 原理：通过设置
- 根据兄弟元素的数量范围来匹配元素
- 原理：选择器
:nth-child,兄弟选择符~结合使用
- 原理：选择器
- 满幅背景，定宽内容
- 运用：通常情况下我们制作定宽内容版本居中时，会用到两个html元素，外层100%宽度，内层定宽并通过margin:auto居中。
- 优化：此方案通过
纯CSS的方法来实现，且只需要一个元素就可以了
- 垂直居中
- 绝对定位解决方案
- 通过绝对定位结合translate实现水平垂直居中
- 基于视口单位的解决方案
- 只针对相对于整屏视口来做水平垂直居中的效果。利用
margin:50vh auto 0实现对上50vh，再通过transform:translateY(-50%);实现居中
- 只针对相对于整屏视口来做水平垂直居中的效果。利用
- flexbox解决方案
- 绝对定位解决方案
- CSS-Sticky-footer紧贴底部页脚
- 固定高度解决方案
- 原理：在已知页脚以及header高度的情况下，通过
calc(100vh-header-footer)得到中间部分的min-height
- 原理：在已知页脚以及header高度的情况下，通过
- Flexbox解决方案
- 原理：通过弹性布局实现
- 更多解决方案可以搜索
CSS-sticky-footer，上面两种方法都提倡不增加额外的html（因为这会影响性能）
- 固定高度解决方案
七、过渡与动画
- 动画调速函数
- 弹跳球动画
- CSS在提供了内置了几种缓动函数
ease,linear,ease-in,ease-out,ease-in-out外，还提供了cubic-bezier()用于开发者定定义调速函数。 - animate.css动画库
- CSS在提供了内置了几种缓动函数
- 弹性过渡-popup动效
- 弹性过渡变色效果
- 弹跳球动画
- 逐帧动画-CSS实现Loading动态图
- 原理：通过把所有帧全部拼合到一张PNG图中，以一个一帧大小元素来容纳，变换background-position值实现帧过度，通过animation的steps()函数实现不平滑过度，从而显示每帧动画
- 闪烁效果
- 打字动画
- 平滑的动画
- 原理：通过css动画状态管理
animation-play-state: running/pause;在合适的时间（houver)运行或暂停动画
- 原理：通过css动画状态管理
- 沿环形路径平移的动画-多个元素方案
- 沿环形路径平移的动画-单个元素方案
592
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
