一、基本概念 刷新 QQ 空间动态时，发现一则广告，随着用户上下滑动动态列表，就会自动切换广告图片，这样的效果对移动端本就不大的屏幕来说，无疑是很精妙的考虑，这样的效果是怎么实现的呢？ 你可以点击这里：QQ空间广告示意demo 接下来就说说这个效果的具体实现思路： 将两张图片通过定位，相对于图片容器 ...
分类：
Web程序 时间：
2020-06-11 00:32:02
阅读次数：
79
上传头像的时候遇到了头像变形的问题，最后通过object-fit: cover完美解决了。这个CSS属性可以达到最佳最完美的居中自动剪裁图片的功能。 object-fit理解 CSS3 background-size出现的比较早，大家应该知道其支持的一些值，除了数值之外，其还支持几个关键字，例如：c ...
分类：
Web程序 时间：
2020-06-10 13:07:20
阅读次数：
92
box-sizing是css3新增的一个属性 其值有两个,分别是border-box和content-box 当我们给一个容器设置box-sizing为border-box时,就会出现一个很奇妙的现象 div { width: 300px; height: 100%; padding: 20px; ...
分类：
其他好文 时间：
2020-06-10 12:52:39
阅读次数：
114
1、属性选择器说明选取标签带有某些特殊属性的选择器常用选择符描述E[attr]选择具有attr属性的E元素E[attr="val"]选择具有attr属性且属性值等于val的E元素E[attr^="val"]选择具有attr属性且属性值以val开头的E元素E[attr$="val"]选择具有attr属性且属性值以val结尾的E元素E[att
分类：
Web程序 时间：
2020-06-10 09:17:07
阅读次数：
185
css3自适应关键字: max-content 01) max-content width:max-content表示采用内部元素宽度值最大的那个元素的宽度作为最终容器的宽度。如果出现文本，则相当于文本不换行 <style> .outer{ width:-webkit-max-content; wi ...
分类：
Web程序 时间：
2020-06-09 20:29:36
阅读次数：
146
Foundation 表单控制会自动设置为全局样式: 所有 <textarea>, <select> 及 <input> 元素宽度都为 100%，且带有外边距、内边距、阴影和鼠标移动效果。 实例 <form> Input: <input type="text" placeholder="Name"> ...
分类：
其他好文 时间：
2020-06-09 14:41:16
阅读次数：
64
css3属性-webkit-font-smoothing 对字体进行抗锯齿渲染可以使字体看起来会更清晰舒服。在图标字体成为一种趋势的今天，抗锯齿渲染使用也越来越多。font-smoothing是非标准的CSS定义。它被列入标准规范的草案中，后由于某些原因从web标准中被移除了。但是，我们可以用以下两 ...
分类：
Web程序 时间：
2020-06-09 14:26:37
阅读次数：
82
1.写在前面 在CSS3中，可以使用box-shadow属性来创建阴影效果来给二维平面增加深度效果，这个属性在前端开发中使用的非常多，例如segmentfault的首页就是使用了box-shadow属性来增加深度效果，今天我们就一起来看看这个属性。 2.box-shadow的基本语法 box-sha ...
分类：
Web程序 时间：
2020-06-08 14:24:59
阅读次数：
64
1.object-fit 由于图片原始大小都不一样,强行设定大小值会导致拉伸,如果不设定大小则参差不齐。 之前我们大多数用的 大多数都是利用background-size: cover 来避免对图片造成的压缩或者拉伸。 fill: 默认值,和未设置一样。使图片拉伸填满整个容器, 不保证保持原有的比例 ...
分类：
Web程序 时间：
2020-06-08 13:04:31
阅读次数：
72
过渡和动画都是CSS3的重要部分，今天有时间，了解些相关内容并记录下。在开始之前，首先看看CSS3的转化。 转化 CSS3的转化分为以下几种： translate 移动 rotate 旋转 scale 缩放 skew 倾斜 matrix 混合 每种转化都还有对应的3d版本 注意：闭合的内联元素不支持 ...
分类：
Web程序 时间：
2020-06-07 19:50:15
阅读次数：
79
