css

img img 是 HTML4 时就有的标签， 至今仍然是在网页中嵌入图片的最常用的方式。 与 <span>, <em> 等标签一样属于行内标签 （准确地说属于 Phrasing Content）。下面是一个示例： <img src="favicon72.png" alt="MDN logo" srcset="favicon144.png 2x"> img 其实也可以控制在高清屏幕采用哪个图片，适合用在移动端 picture <picture> <source srcset="/media/cc0-images/surfer-240-200.jpg" media="(min-width: 800px)"> <img src="/media/cc0-images/painted-hand-298-332.jpg" alt="" /> </picture> 要决定加载哪个URL，user agent 检查每个 <source> 的 srcset、media 和 type 属性，来选择最匹配页面当前布局、显示设备特征等的兼容图像。 picture 就可以方便的控制在某种媒体类型，加载哪个图片。感觉比较适合做响应式用。 相比 img 标签，picture 提供了更丰富的响应式资源选择方式； picture 是 HTML5 中定义新标签， 其中可以定义若干个 <source>，浏览器会匹配 <source> 的 type, media, srcset 等属性， 来找到最适合当前布局、视口宽度、设备像素密度 的一个去下载。 为了向下兼容不识别 <picture> 和 <source> 的浏览器，<picture> 中还可以写一个 <img> 作为 fallback。...

demo演示 多边形图 ...

也许，你会遇到这样的情况，UI给你一张图片，然而根据实际情况，比如需要适配XXX手机，或者需要把图片形状搞好看一点，会让前端人员进行图片剪裁工作。 ...

前言 CSS 里面的伪元素其实是非常好用的，但是经常容易被大家忽略，伪元素里面常用到的 content 属性，可能现在很多人仅仅以为 content 属性的值只支持字符串，除了字符串外常用到的还有 uri、counter ，今天所要介绍的就是 conter(计数器)。 先看如下的例子： <div> <h3>桃翁</h3> <h3>介绍</h3> <h3>css 计数器</h3> </div> 根据如上的 HTML 你是否有办法不通过 JavaScript ，仅仅用 CSS 在 title 前面增加 Title number: 呢？ CSS 计数器基本概念 如果仅仅增加一个 Title，大家都知道通过伪元素(:before或者:after)，设置 content 为 Title，但是如何自动根据 h3 出现的顺序来展示自动编号可能很多人就不知道了。 自动编号在 CSS 2.1 中是通过两个属性控制的，‘counter-increment’和‘counter-reset’。通过这些属性定义的计数器用于‘content’属性的 counter() 和 counters() 函数 初始化计数器 在使用计数器的时候需要先初始化这个计数器，并且设置一个计数器的名字(变量)。下面是例子，title 就是名字，conter-reset 就是用来初始化的，这个属性是必须设置的，否则没办法用计数器。 ‘counter-reset’属性也含有一列一个或多个计数器，每个后面可以跟一个可选的整数。该整数给定了每次出现该元素时给计数器设置的值，默认为 0 counter-reset: 计数器名称[, 默认值number]; /* 重置计数器成0 */ 计数器自增 有了一个计数器的变量后，然后可以让这个变量进行自增： ‘counter-increment’属性接受一个或多个计数器名（标识符），每个后面都可以跟一个可选的整数。这个整数表示每次出现该元素时计数器递增几。默认增量是 1，可以接受 0 和负数 counter-increment: 计数器名称[, 增量]; /* 增加计数器值 */ 显示计数器 最后就是现实计数器的值，获取计数器的值有两个函数：counter() 和 counters() ，如上面的例子：...