CSS页面渲染优化属性will-change

前面的话  当我们通过某些行为(点击、移动或滚动)触发页面进行大面积绘制的时候,浏览器往往是没有准备的,只能被动使用CPU去计算与重绘,由于没有事先准备,应付渲染够呛,于是掉帧卡顿。而CSS属性will-change为web开发者提供了一种告知浏览器该元素会有哪些变化的方法,这样浏览器可以在元素属性
206次阅读

css滤镜模糊效果filter和backdrop-filter

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <link rel="styles
3次阅读

CSS 字体效果

text-shadow还没有出现时,大家在网页设计中阴影一般都是用photoshop做成图片,现在有了css3可以直接使用text-shadow属性来指定阴影。这个属性可以有两个作用,产生阴影和模糊主体。这样在不使用图片时能给文字增加质感。text-shadow曾经在css2中就出现过,但在css2
3次阅读

CSS实现导航条Tab切换的三种方法

前面的话  导航条Tab在页面中非常常见,本文说详细介绍CSS实现导航条Tab的三种方法 布局  根据上图所示,先规定几个定义,上图的模块整体叫做导航,由导航标题和导航内容组成。要实现上图所示的布局效果,有两种布局方法:语义布局和视觉布局【语义布局】  从语义布局的角度来看,每一个导航标题
454次阅读

CSS两端对齐

前面的话  两端对齐在导航Nav的制作中非常常用。本文将详细介绍CSS两端对齐的3种实现方式 flex  弹性盒模型flex作为强大的弹性布局方式,可以hold住大部分的布局效果,当然也包括两端对齐。可以使用主轴对齐justify-content的两端对齐属性space-betweenju
57次阅读

CSS倒影

前面的话  CSS倒影目前只有chrome和safari浏览器支持,且需要添加-webkit-前缀。本文将详细介绍CSS倒影box-reflect 语法-webkit-box-reflect初始值: none应用于: 块级元素(包括inline-block)继承性: 无值: none |
7次阅读

CSS滤镜

前面的话  CSS滤镜filter用于模糊、锐化、元素变色等操作, 通常适用于图片、背景等。本文将详细介绍CSS滤镜filter 语法filter初始值: none应用于: 所有元素继承性: 无值: none | blur() | brightness() | contrast() | d
18次阅读

CSS混合模式

前面的话  层叠上下文z-index只是解决两个元素覆盖,谁离用户更近的问题。而CSS混合模式,则是处理两个元素覆盖部分如何混合的问题。如果了解photoshop的话,对这种现象应该不陌生。CSS3有两个与混合模式相关的属性:mix-blend-mode和background-blend-mode,
84次阅读

验分享:CSS浮动(float,clear)通俗讲解

经验分享:CSS浮动(float,clear)通俗讲解       很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程。      
3次阅读

CSS 最核心的几个概念

本文将讲述 CSS 中最核心的几个概念,包括:盒模型、position、float等。这些是 CSS 的基础,也是最常用的几个属性,它们之间看似独立却又相辅相成。为了掌握它们,有必要写出来探讨一下,如有错误欢迎指正。元素类型HTML 的元素可以分为两种:块级元素(block level elemen
5次阅读