《CSS 揭秘》是一本由希腊前端大师 Lea Verou 所著的 CSS（层叠样式表）专业书籍。Lea Verou 不仅是 W3C CSS 工作组的特邀专家，设计 CSS 语言的委员之一，还在麻省理工学院从事人机交互领域的研究，同时她还是一位广受欢迎的博客作家和国际性技术会议的讲师。内容概述《CSS 揭秘》深入剖析了 CSS 的多个高级特性和技巧，全书通过丰富的案例和实践，引导读者循序渐进地探寻更
原创
2024-08-19 21:26:11
76阅读
第一章 引言 css编码技巧 在引言中，作者提到使用em与inherit来实现css代码的简洁与可维护性。但是根据本司机两年的开发经验来看，在实际开发中很少来使用em这个单位。如何用以及何时去使用，还是要根据实际开发需求来定吧，毕竟这两个属性都有一定的局限性。 第二章 背景与边框 半透明边框 bor
转载
2020-06-01 13:11:00
104阅读
2评论
很神奇的背景设置， 看代码， 会产生这种效果的背景。 查看浏览器支持性，www.caniuse.com 可以看出很多浏览器都支持！
原创
2021-08-05 15:45:07
334阅读
 ``` css default ok cancel ```
原创
2021-08-05 15:45:05
151阅读
投影 单侧投影 box-shadow:0px 10px 10px -5px black; 邻边投影 box-shadow:10px 10px 10px 2px black; 双侧投影 box-shadow:10px 0px 10px -10px black, -10px 0px 10px -10px
转载
2020-06-02 13:07:00
103阅读
2评论
互联网的发展总是在不断地催生新技术的产生，而HTML5和CSS3是最近一直被讨论的热门话题，对于每个互联网开发者尤其是前端开发者而言，都充满了好奇与渴望。那么HTML5和CSS3究竟有哪些让我们眼前一亮的东西呢？我在WebRebuild北京交流会和珍珠奶茶帮上给大家分享了《揭秘 HTML5和CSS3》，PPT在这里：
http://docs.google.com/present/view?id=
转载
2011-02-21 12:27:07
618阅读
多重边框随着多重背景的兴起，多重边框在平时开发中使用的频率也越来越高了，我们肯定是希望在一个元素的基础上通过css代码去灵活的实现这一需求，接下来我们一起看看实例吧~box-shadow解决方案box-shadow在我们平时开发中作为酷炫的边框投影，大家肯定都不陌生，但是很少人知道的是它还接受第四个参数，被称为“扩张半径”，通过指定正值和负值从而让投影的面积增大或者减少，当我们把投影的两个偏移量以
转载
2021-02-03 19:21:27
1921阅读
2评论
背景知识颜色渐变设置：background: linear-gradient(direction, color-stop1, color-stop2, ...);指定背景图片大小：background-size: length|percentage|cover|contain;难题在网页设计和其他传统媒介中，各种尺寸、颜色、角度的条纹图案在视觉设计中无处不在。想要在网页中实现条纹图案，通常我们的方
推荐
原创
2022-08-24 17:25:01
654阅读
点赞
垂直条纹水平条纹是最容易用代码写出来的，但用户在网页上看到的条纹图案很多都不是水平的。有些条纹是垂直的（如图1-1），而且某些形态的斜条纹或许更受欢迎，看起来更有趣。幸运的是，CSS 渐变同样也能帮助我们创建出这些效果，只是难度稍有不同。垂直条纹的代码跟水平条纹几乎一样的，主要区别在于：我们需要在开头加上一个额外的参数来指定渐变的方向。在水平条纹的代码中，我们其实也可以加上这个参数，只不过它的默认
原创
精选
2022-08-31 15:13:30
748阅读
前言本篇笔记来自上海@瑞心扉雪关于《CSS揭秘》第四章笔记。正文从这开始～一、单侧投影1、常规的box-shadow实现语法就不写啦。2、单边投影对元素使用4px的模糊半径意味着投影的尺寸会比元素本身的尺寸大约8px。这个如何解决呢?最终的解决方案来自 box-shadow 鲜为人知的第四个长度参数。它排在模糊半径参数之后，称作扩张半径。这个参数会根据你指定的值去扩大或(当指定负值时)缩小投影的尺
原创
2021-04-10 11:09:13
125阅读
TreeShking 是通过静态分析的方式找出源码中不会被使用的代码进行删除，达到减小编译打包产物的代码体积的目的。 JS 我们会用 Webpack、Terser 进行 TreeShking，而 CS
原创
2022-03-17 15:11:01
217阅读
CSS创建滚动视差效果的核心技术包括：1）用background-attachment:fixed固定背景，与前景内容形成深度对比；2）transform:
CSS滚动视差效果是提升网页视觉体验的重要技术。核心在于background-attachment实现背景固定，营造深度感；transform:translate3d引入3D空间，增强真实感；层叠与定位技术构建视觉层次；响应式设计确保多设备适配；性能优化保证流畅体验。掌握这些关键技术，可打造沉浸式浏览效果，为用户带来震撼视觉享受。
1.多重边框 我们可以通过使用border-image来写一个多重边框，或使用多个元素来模拟多重边框，不过我们有更好的办法来制作一个多重边框，那就是使用box-shadow的第四个参数（称为扩张半径）来完成一个多重边框的制作，肯定大家都已经非常熟悉box-shadow了，不过我还是来复习一下。（1）
转载
2017-04-20 12:56:00
76阅读
2评论
CSS 是前端开发的重要基础之一，掌握它不仅能让网页更美观，还能让用户体验更流畅。然而，对于初学者来说，CSS 可能会因为规则繁多而感到复杂。本文将通过简单清晰的示例，帮助你从基础入手，逐步掌握 CSS 的核心技巧，并为成为 CSS 高手打下坚实的基础。
在《从零到高手：揭秘 CSS 的魔法世界（一）》中，我们学习了 CSS 的基础知识以及一些常用的样式技巧。接下来，在本篇中，我们将深入探索一些进阶的 CSS 技术与应用，让你更进一步掌握 CSS 的魔法，为前端开发增添更多创意。
css 揭秘》这本书以案例的形式，介绍了 47 个网页设计经典难题的解决方案，我在学习之余将其一一记录下来，
原创
2022-09-13 10:18:04
206阅读
