《CSS新世界》demo原型页面索引实例页面

展示

第2章

3-1. 初始值关键字initial使用 3-2. 恢复关键字revert使用 5-1. loading加载渐进增强实现 5-2. background-blend-mode纹理背景渐进增强实现 5-3. @supports嵌套语法测试 5-4. @supports @规则嵌套测试

第3章

1-1. 文字居中和左对齐自动布局 1-2. 绝对定位元素fit-content居中布局最佳实践 1-3. stretch关键字与button按钮的margin自适应 1-4. stretch关键字与table元素 1-5. min-content首选最小宽度测试 1-6. max-content最大内容宽度使用测试 2-1. margin-right和margin-inline-end效果对比 2-2. row-reverse属性值和CSS逻辑属性无关 2-3. CSS逻辑属性与对称布局 2-4. writing-mode与inline/block、start/end 3-1. border-image基本效果示意 3-2. border-image-width不同类型值效果示意 3-3. border-image-outset不同类型值效果示意 3-4. border-image-repeat不同类型值效果示意 3-5. border-image最复杂缩写效果示意 3-6. border-image几个符合设计初衷效果 3-7. border-image实现渐变边框、条纹边框 3-8. border-image实现与圆角渐变边框 4-1. 导航元素粘性定位效果示意 4-2. 粘性定位效果原理示意 4-3. 通讯录字母顶部粘性定位实现 4-4. 粘性定位与层次滚动效果的实现 5-1. Emoji字体设置后的作用 5-2. Emoji字体设置放在最后的效果 5-3. Emoji字体unicode-range范围限定效果 6-1. word-break:keep-all应用案例 6-2. word-break:break-all的问题与处理示意 6-3. hyphens:manual与软连字符优化排版效果 6-4. <wbr>标签与排版效果优化 6-5. overflow-wrap:anywhere和break-word的区别 8-1. text-decoration属性值叠加特性 8-2. 宽度100%自适应的波浪线效果实现 8-3. text-underline-position属性 8-4. text-underline-offset属性 9-1. CSS Level1 - Level4全部颜色关键字 10-1. 水漫金山的cover和被困雷峰塔的contain效果 10-2. 无内在尺寸有内在比例SVG效果示意 10-3. background-size百分比计算区域与background-origin关系 10-4. 多背景渐变实现加减图标按钮效果 10-5. PNG透明网格背景原理示意 10-6. background-clip与复选框背景色范围限制 10-7. background-clip:text与渐变文字效果 10-8. space和round背景平铺效果示意 10-9. background-position右下方定位示意 11-1. outline轮廓被覆盖outline-offset优化 12-1. zoom-in和zoom-out手形效果 12-2. grab和grabbing手形效果

第4章

1-1. 按钮文字颜色随着背景色自动变化 1-2. CSS opacity边界特性与饼图绘制 2-1. border-radius不规则圆角头像效果 2-2. border-radius与随机不规则圆角效果 2-3. border-radius常见图形绘制效果举例 3-1. box-shadow内阴影模拟按钮边框 3-2. box-shadow实现的新手引导效果示意 3-3. 多阴影特性与图形绘制 3-4. box-shadow动画性能优化 4-1. transform变换不同顺序不同结果 4-2. transform和clip-path执行顺序测试 4-3. transform与层叠顺序和层叠上下文 4-4. transform与纸张效果阴影层级控制 4-5. transform导致固定定位失效 4-6. transform与绝对定位元素的overflow隐藏 4-7. transform与绝对定位元素包含块 5-1. calc()和CSS变量和进度条效果 5-2. clamp()函数基本效果演示

第5章

1-1. 渐变与对角线效果 1-2. 径向渐变与按钮点击光圈效果 1-3. 径向渐变与波纹效果 1-4. 锥形渐变与饼图效果 1-5. 锥形渐变与色相饱和度色盘 1-6. 锥形渐变与PNG透明网格效果 1-7. 锥形渐变与Loading效果 1-8. 重复线性渐变与条纹边框效果 2-1. translateZ()函数与perspective视角关系 2-2. perspective视点两种写法基本效果示意 2-3. perspective视点两种写法不同之处示意 2-4. transform-style两个关键字值效果对比 2-5. backface-visibility属性基本效果示意 2-6. 3D transform变换实现的跑马灯效果 3-1. transition延迟与交互体验提升 3-2. transition与visibility实现底部浮层效果 4-1. @keyframes规则中CSS优先级测试 4-2. <string>数据类型动画命名测试 4-3. animation-delay负值与音频波形loading效果 4-4. alternate关键字与钟摆运动示意 4-5. animation-iteration-count小数作用示意 4-6. animation-play-state实现可暂停的GIF效果 4-7. steps() start和end表现示意 4-8. step-start实现点点点打点动画效果 4-9. CSS动画嵌套实现抛物线运动效果案例

第6章

1-1. Columns分栏布局与列表的呈现 1-2. column-count与column-width计算优先级示意 1-3. column-rule属性基本效果示意 1-4. column-span:all效果示意 1-5. column-fill几个属性值测试 1-6. column-gap实现两端对齐效果 1-7. CSS break-inside让分栏列表不中断 1-8. CSS box-decoration-break与columns布局样式渲染 2-1. flex-direction属性值的基本效果示意 2-2. flex-wrap属性值的基本效果示意 2-3. flex-flow属性基本效果示意 2-4. justify-content属性值基本效果示意 2-5. align-items属性值基本效果示意 2-6. align-self属性基本效果示意 2-7. align-content属性值基本效果示意 2-8. order属性基本效果示意 2-9. flex属性值综合案例示意 2-10. flex:1与动态文本元素 2-11. flex关键字属性值基本效果示意 2-12. flex-basic与盒模型尺寸和width对比示意 2-13. flex-basic、width与最小内容宽度同时作用 2-14. flex-basis代替min/max-width效果 2-15. flex布局min-width:0实现打点效果 3-1. repeat()函数auto-fill关键字效果 3-2. repeat()函数auto-fit关键字效果 3-3. grid-template-areas与土地区域划分 3-4. grid-auto-flow:column与垂直排列优先布局 3-5. justify-items/align-items属性值样式表现 3-6. align-items默认值图片和按钮的样式表现 3-7. justify-content/align-content属性值样式表现 3-8. span和不同数量网格线命名效果 3-9. grid-area与元素重叠 4-1. 不同shape-outside盒子布局效果 4-2. 不同shape-outside图形函数效果 4-3. 文字围绕鹦鹉轮廓的布局实现 4-4. CSS渐变下的Shapes布局效果 4-5. CSS shape-margin与布局效果 4-6. CSS shape-image-threshold属性基本效果 4-7. CSS Shapes布局与文字在圆圈内排版

第7章

1-1. prefers-color-scheme与深色模式识别 1-2. any-hover媒体特征与触屏设备识别 1-3. pointer媒体特征与触屏设备体验增强 3-1. vh单位经典应用-底部栏动态居底 4-1. touch-action:none与移动端滚动行为测试 5-1. image-set()函数多倍图使用

第8章

1-1. CSS var()函数默认值使用示意 1-2. CSS自定义属性设置Shadow DOM中的样式 1-3. SVG内联背景作为CSS自定义属性值使用 3-1. CSS自定义属性与上传进度条 4-1. 自定义keyword()关键字颜色透明度值语法 4-2. CSS变量Polyfill attr()语法

第9章

1-1. text-shadow与3D立体投影和外描边效果 1-2. text-stroke与文字font-weight字重变细 1-3. text-stroke与文字外描边效果 1-4. text-fill-color与渐变图像、常规图像文字填充效果 1-5. 模块各个主要颜色通过color属性控制 1-6. text-fill-color优化text-shadow 3D投影效果 1-7. text-emphasis-style任意字符强调效果 2-1. text-orientation与垂直排版文字方向控制 2-2. unicode-bidi各个属性值的作用对比示意 3-1. text-size-adjust在iOS Safari下横屏文字放大 3-2. tab-size与Tab空格缩进 4-1. optimizeSpeed和optimizeLegibility效果对比 4-2. font-stretch常见字体的拉伸面 4-3. League Mono变量字体拉伸面 4-4. font-synthesis让中文字体倾斜样式下直立 5-1. font-variant-numeric:ordinal序数效果 5-2. font-variant-numeric:slashed-zero斜杠0 5-3. font-variant-alternates:stylistic()函数 5-4. font-variant-east-asian与简繁体转换 6-1. 可变字体5个注册变化轴效果 6-2. font-optical-sizing属性与可变字体

第10章

1-1. object-fit属性值效果 1-2. object-position属性效果 1-3. object-position属性img元素类gif效果 2-1. image-orientation属性基本效果 3-1. image-rendering属性基本效果 4-1. cross-fade()函数基本效果示意 4-2. cross-fade()函数降低背景图像透明度

第11章

1-1. filter:blur()径向模糊和局部模糊效果 1-2. filter:brightness()实现按钮图标变色 1-3. filter:drop-shadow()和box-shadow虚线框阴影效果 1-4. filter:hue-rotate()与文字彩虹渐变流动效果 1-5. filter模糊对比度滤镜与粘滞效果 1-6. filter SVG滤镜融合粘滞效果 1-7. filter SVG滤镜水波荡漾的效果 2-1. backdrop-filter和filter属性效果对比示意 2-2. backdrop-filter与弹框毛玻璃效果 2-3. backdrop-filter与下拉毛玻璃效果 3-1. mix-blend-mode各个混合模式值效果 3-2. mix-blend-mode:multiply浅色背景素材混合效果 3-3. mix-blend-mode:screen滤色与前景特效 3-4. mix-blend-mode:overlay叠加模式的应用 3-5. mix-blend-mode:darken/light模式的应用 3-6. soft-light和hard-light混合模式效果对比 3-7. mix-blend-mode:difference显示不同文字颜色 3-8. difference和exclusion混合模式效果对比 3-9. 颜色系混合模式和色盘混合效果 3-10. 滤镜和混合模式一起使用 4-1. background-blend-mode实现的纹理背景效果示意 4-2. background-blend-mode实现的渐变背景图标效果 5-1. isolation:isolate作用效果示意

第12章

1-1. mask-image png图片遮罩效果 1-2. mask-image SVG图像的遮罩效果 1-3. mask-image使用CSS渐变图像遮罩曲面效果 1-4. 普通元素使用内联mask元素的遮罩效果 1-5. SVG元素使用内联mask元素的遮罩效果 1-5.2. SVG元素transform缩放后作为遮罩图像 1-6. 外链SVG元素中的mask元素的遮罩效果 1-7. 图像函数实现的mask遮罩效果 1-8. CSS mask-clip属性值效果 1-9. mask-composite:exclude实现镂空的图像效果 1-10. mask遮罩PNG小图标变色效果 1-11. mask遮罩优化PNG图片的尺寸 1-12. -webkit-mask-box-image尺寸任意渐变提示框效果 2-1. clip-path内联SVG实现小图标的显示 2-2. ClipPath Sprites小图标技术示意 2-3. clip-path <geometry-box>值对比 2-4. clip-path polygon()实现渐变提示框 2-5. clip-path path()实现图标变化效果 2-6. clip-path实现全新过场交互效果 2-7. clip-path实现渐变提示框 3-1. -webkit-box-reflect倒影属性值效果 3-2. Firefox和Chrome都支持的倒影效果 4-1. offset-path元素不规则path路径运动 4-2. offset-anchor属性基本效果 4-3. offset-distance闭合路径与无限循环运动 4-4. offset-path url() circle()等函数polyfill

第13章

1-1. scroll-behavior纯CSS平滑切换选项卡 1-2. CSS overscroll-behavior滚动阻止 1-3. overflow-anchor值效果对比 1-4. CSS Scroll Snap基本效果 1-5. mandatory和proximity对比 1-6. 滚动条样式的自定义 2-1. 用在SVG元素上的pointer-events属性值测试 5-1. user-select:all与列表整体选中 5-2. ::selection改变图片选中后的颜色 6-1. color-adjust属性的作用 6-2. break-before column和page的效果 6-3. orphans和widows属性效果 7-1. CSS contain性能提升测试 7-2. Style Containment与CSS计数器限制

第14章

1-1. CSS绘制SVG基本形状 1-2. CSS控制SVG圆形放大缩小动画 2-1. fill与图标的批量颜色控制示意 2-2. fill-opacity与半透明渐变填充 2-3. fill-rule与填充规则 3-1. CSS stroke与全兼容的文字描边效果 3-2. CSS stroke-dasharray与长短相间的虚线框 3-3. CSS stroke-dashoffset与自己的签名动画 3-4. CSS stroke-dashoffset与彩色圆环进度条效果 4-1. CSS marker-start/marker-end起止标记点效果示意 4-2. CSS marker-mid转折点标记点效果示意 5-1. CSS paint-order文字外描边 5-2. CSS vector-effect描边不缩放 5-3. CSS text-anchor:middle文字水平居中效果 5-4. CSS dominant-baseline:middle文字垂直居中效果 5-5. alignment-baseline vs dominant-baseline

第15章

1-1. CSS Paint API绘制透明格子背景 1-2. CSS Paint API与可定制的透明格子背景 2-1. 注册CSS自定义属性支持CSS渐变动画 4-1. CSS Layout API实现列表居中左对齐效果 6-1. Animation Worklet滚动改变布局