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
在html中给table加一个斜线的表头有时是很有必要的，但是到底该怎么实现这种效果呢？总结了以下几种方法： 1、UI背景图实现 直接去找公司的UI，让她做一张图片，作为背景图片放到这里，然后撑满就可以了。是不是很简单！！！ 2、 css3中transform属性 其实了解css3的朋友，一看到这个 ...
分类：
Web程序 时间：
2020-06-07 16:35:52
阅读次数：
78
在css中使用伪类虽然实现了样式的改变，但由于没有过渡效果会显得很生硬。以前如果要实现过渡，就需要借助第三方的js框架来实现。现在只需要使用CSS3的过渡（transition）功能，就可以从一组样式平滑的切换到另一组样式。 （1）背景色过渡变化 下面鼠标移入后，按钮背景色会慢慢地变成黄色。鼠标离开 ...
分类：
Web程序 时间：
2020-06-07 16:35:02
阅读次数：
232
边距重叠 统一的解决方案；设置padding或者border或者触发BFC 边距重叠有一下三种情况： 首先把所有的margin格式清空 <head> <title>边距重叠</title> <style> html *{ margin-top: 0px; padding: 0px; } </styl ...
分类：
其他好文 时间：
2020-06-07 12:56:38
阅读次数：
73
一、flex布局 顶部，底部固定，中间自适应(中间左固定，右自适应)。 <body> <div class="container"> <div class="header"></div> <div class="content"> <div class="left"></div> <div clas ...
分类：
Web程序 时间：
2020-06-07 10:59:54
阅读次数：
64
rem是什么？ 它的全称是 font size of the root element （根元素的字体大小）它是CSS3中新增加的一个尺寸（度量）单位，根节点（html）的font-size决定了rem的尺寸，也就是说它是一个相对单位，相对于(html)。 浏览器的默认字体？ 浏览器的默认的font ...
分类：
Web程序 时间：
2020-06-06 11:13:23
阅读次数：
81
在 这里 display:flex 需要兼容性处理，webpack 编译打包时，需要使用 postcss-loader 这个loader 和 postcss-preset-env 这个插件，它帮postcss找到package.json中browserslist里面的配置，通过配置加载指定的css兼 ...
分类：
Web程序 时间：
2020-06-05 10:21:41
阅读次数：
83
在flex容器中默认存在两条轴，水平主轴和垂直的交叉轴，这是默认设置，当然可以通过修改相关属性使垂直方向变为主轴，水平方向变为交叉轴，在容器中，每个单元块称为flex item，每个flex item占据主轴空间为main size，占据交叉轴空间为cross size。 Flex容器 首先实现fl ...
分类：
Web程序 时间：
2020-06-05 01:09:43
阅读次数：
86
