DGL_CSDN的博客

1 滤镜之前我们要处理一张图片的取色，模糊，褐色等效果必须使用 Photoshop 处理完后保存多张图片，而 CSS3 滤镜的出现使我们在网站中想要轻松实现这些效果变得可能。只需要通过 filter 滤镜的各种属性就能轻松实现，如：grayscale(灰色)、sepia(褐色)、saturate(饱和度)、blur(模糊)…等1.1 定义和使用filter 属性定义了元素(通常是 img)的可视效果(例如：模糊与饱和度)。filter 滤镜，借鉴了 Photoshop 的滤镜效果，在 p

1 锚链接其实就是超链接的一种，一种特殊的超链接普通的超链接：<a href="路径"></a> 是跳转到不同的页面锚点：<a href="位置"></a> 可以在同一个页面中不同的位置间跳转可以看到，跳转到锚点的超链接跟普通的超链接格式是一样的。常用于在页面很长时，让用户方便在页面不同部分间跳转。1.1 用法1.1.1 创建锚点目标建立锚点目标，只需要给目标元素增加 id 或者 name 即可 锚的名称可以是

1 多媒体查询1.1 响应式网页概念同⼀个网页根据窗口大小的不同，显示不同的版式。1.2 优缺点优点：对于不同视⼝都可以显示⾮常饱满的⽹⻚结构，没有横向滚动条。缺点：制作复杂，同时对于移动端⽽⾔，需要加载⾮常多的 pc 端的样式和图⽚等资源，影响加载速度，同时费流量。国内流量⾮常贵。（这也是国内纯响应式⽹站不多的原因。）1.3 原理媒体查询能在不同的条件下使⽤不同的样式，使⻚⾯在不同在终端设备下达到不同的渲染效果。1.4 媒体设备值 描述 all

1 新增选择器1.1 CSS 选择器选择器 类型 说明 * 元素选择器 通配选择符。选择页面所有元素。通常不建议频繁使用通配选择符，因为它会遍历并命中文档中所有的元素，出于性能考虑，需酌情使用。 E 元素选择器 选择匹配 E 的元素。 E#id 元素选择器 选择匹配 E 的元素，且该元素定义了 ID 选择器。 E.class 元素选择器 选择匹配 E 的元素，且该元素定义了类选择器。 E F 关系选择器

1 Flex 布局1.1 Flex 布局是什么？Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。.box { display: flex;}行内元素也可以使用 Flex 布局。.box { display: inline-flex;} flex： 将对象作为弹性伸缩盒显示，没有为⽗元素设置宽度，默认为100%。 inline-flex：将对象作为内联块级...

1 过渡1.1 基本形式transition 是 css3 新增的⼀个功能，可以实现元素不同状态间的平滑过渡（当元素从⼀个状态进⼊到另⼀个状态时），经常⽤来制作⼀些动画效果。之前：元素 -> 元素:hover 状态直接切换，从开始状态到结束状态，瞬间完成，中间过程⼏乎不可⻅。过渡：从开始状态到结束状态的中间过程可以查看格式：transition:过渡的属性 完成时间(s) 运动曲线 延迟时间transition:all 3s(1s=1000ms) linear 0s;

1 2D转换转换是 CSS3 中具有颠覆性的⼀个特征，可以实现元素的位移、旋转、变形、缩放。通过 transform 转换来实现 2D 转换或者 3D 转换。2D转换包括： 缩放 移动 旋转 倾斜 1.1 scale设置元素的缩放效果语法： transform: scale(x, y); transform: scale(2, 0.5); 参数： x：表示水平方向的缩放倍数 y：表示垂直方向的缩放倍数 注

1 文本1.1 text-shadow设置⽂本的阴影参数：⽔平位移 垂直位移 模糊程度 阴影颜⾊text-shadow: 20px 27px 22px pink;p { font: bolder 50px "Microsoft Yahei"; text-align: center; margin-top: 10px; color: teal; text-shadow: 10px 10px 5px red; } text-sha...

1 自定义字体前提条件：必须要先有字体文件，比如 .ttf 文件，叫 UI 给或者百度自己下载；1.1 引入字体文件使用 @font-face 引入字体文件，并且定义该字体的名称为：myFirstFont（自己起名，要有语意性）<style> @font-face{ font-family: myFirstFont; src: url('你自己的字体文件路径.ttf') } </style>1.2 使...