CSS中三角形的绘制与巧妙应用实例详解
引 网页中常见的一些三角形，无需制作成图片或者字体图标，使用CSS就可以直接画出来。如小米官网中： 以及京东网页中的： 那么这些三角通过是CSS怎么实现的呢？ 三角的实现 我们可以通过将一个d...
CSS 实现 10 种现代布局的代码
前言 周日在家看 web.dev 的 2020 三天 live，发现不少有意思的东西，其中有一项是关于 CSS 的，主播是 Una Kravets（chrome team 成员）。虽然我已经好几个月没有深入研究 CSS 的东西了，不过...
Flex布局让子项保持自身高度的实现
在用了Flex布局会发现，当水平排列后，会发现所有子项的高度都变成一样的了。 这是因为Flex 布局会默认： 把所有子项变成水平排列。 默认不自动换行。 让子项与其内容等宽，并把所有子项...
CSS字体、文本、列表属性详细介绍
1.字体属性 color，规定文本的颜色，如 div{color:red;} font-style，规定文本显示方式，如 p.normal {font-style: normal;} ，有normal（正常显示）、italic（斜体显示，字体结构有一定变化）...
css动画效果之animation的常用样式
animation动画 定义一个动画： /*设置一个关键帧，定义动画每一步执行的动作*/ @keyframes mybox{ 0%{transform: translate(0,0);} 25%{transform: translate(200px,0);} 50%{transform: transl...
CSS line-height的如何继承的问题
Line-height的如何继承？ 写具体数值，如30px,则继承该值（比较好理解）写比例，如2/1.5,则继承该比例（比较好理解） 比如body中line-height设为2，则p标签继承line-height为2,则算出来的p标签l...
纯CSS实现自定义单选框和复选框功能
1 实现效果 2 知识点讲解 2.1 <label>标签 在html中，<label>标签通常和<input>标签一起使用，<label>标签为input元素定义标注（标记）。label 元素不会向用户呈现任何...
浅谈下页面中字体设置(font-family)和粗细(font-weight)问题
记得以前某某某天上午被设计师“调戏”了，记忆犹新啊，就是因为一个项目（PC和移动）中的字体问题，纠结了一上午，设计师非要字体效果跟设计稿上保持一致。那时那刻，我已无语，但是...
使用 CSS Paint API 动态创建与分辨率无关的可变背景效果
来源：https://medium.com/better-programming，作者：Ferenc Almasi 现代Web应用对图像的需求量很大，它们占据网络下载的大部分字节。通过优化它们，你可以更好地利用它们的性能。如果你碰巧使...
flex是什么及flex布局语法教程详解
Flex布局 Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，自由的操作容器中元素(项目)的排列方式 任何一个容器都可以指定为 Flex 布局。 .box{ disp...