快速了解CSS display:flow-root声明

2020年05月12日 by 张 鑫旭 阅读 6035 次, 今日 32 次

display: flow-root封面图

display:flow-root可以让元素块状化,同时包含格式化上下文BFC,可以用来清除浮动,去除margin合并,实现两栏自适应布局等。

阅读全文…

借助CSS mask遮罩显著优化PNG图片的尺寸

2020年05月8日 by 张 鑫旭 阅读 6160 次, 今日 27 次

遮罩压缩PNG封面图

带有透明区域,同时色彩丰富的PNG图片再怎么压缩体积也是很大的,有没有什么办法既保持PNG图片的透明,又显著降低图片的尺寸呢?本文就将介绍如何使用CSS遮罩降低超过50%大小的PNG体积,优化性能。

阅读全文…

CSS conic-gradient()锥形渐变简介

2020年04月20日 by 张 鑫旭 阅读 5892 次, 今日 24 次

锥形渐变是CSS Images Module Level 4规范中新定义的一种渐变,可以非常方便实现过去很难实现的效果,例如饼图,色板,棋盘等各种效果,CSS开发必学必会技能。

阅读全文…

ES6 Math方法和Number新特性简介

2020年04月16日 by 张 鑫旭 阅读 6449 次, 今日 24 次

不错的情侣封面图

ES6 新增了很多Math方法,扩展了一些Number新特性,本文就对相关知识进行的整理和说明,希望可以对您的学习有所帮助。

阅读全文…

了解CSS min()/max()/clamp()数学函数

2020年04月12日 by 张 鑫旭 阅读 7150 次, 今日 23 次

CSS数学函数封面

目前主流浏览器都已经支持了CSS min()/max()/clamp()数学函数,可以让你的布局和样式表现更加的智能。

阅读全文…

CSS技术分享: 文字在圆形内沿着弧线边界排版

2020年04月9日 by 张 鑫旭 阅读 6769 次, 今日 31 次
Text around文字环形排版占位图

有一个正圆或者椭圆,里面有一些文字,如何让这些文字每一行的边缘正好就是圆弧的边缘而不发生溢出呢?本文就将介绍这个CSS布局技巧,希望可以帮到大家的学习。

阅读全文…

AVIF图片格式简介

2020年04月8日 by 张 鑫旭 阅读 7259 次, 今日 38 次

avif图像格式

AVIF图像格式被誉为下一代图片压缩格式,究竟有什么魔力让其如此口出狂言呢,不妨一起进来看一看。

阅读全文…

CSS text-decoration实现宽度100%波浪线效果

2020年03月21日 by 张 鑫旭 阅读 8421 次, 今日 18 次

波浪线头图占位图

波浪线效果CSS 径向渐变可以绘制,SVG也可以实现,这里介绍另外一个自己想到的实现方法,使用text-decoration实现宽度100%波浪线效果,易理解易上手,尺寸可控,颜色可控。

阅读全文…

CSS overflow-wrap新属性值anywhere是干嘛用的?

2020年03月18日 by 张 鑫旭 阅读 6006 次, 今日 21 次

先介绍overflow-wrap属性,再介绍overflow-wrap新出了一个属性值anywhere,说不定在以后文字排版布局时候用得上。

阅读全文…

关于CSS emoji字体和OpenType-SVG我所知道的一些事

2020年03月12日 by 张 鑫旭 阅读 6679 次, 今日 22 次

Emoji文章缩略图

关于Emoji字体你可能不知道的一些知识,顺便简单介绍了下彩色字体标准之一的OpenType SVG字体的一些知识。

阅读全文…