顺序: 上 右 下 左, 使用规则和 padding、margin 是相同的, 设置元素边框的宽度
如何使用 border-width + border-top-color + 定位 设置有颜色的 css 三角形?
.trangle{
position: relative;
/* 元素的宽高为 0 */
width: 0;
height: 0;
/* 设置边框的宽度 上7px 左右7px 下0px 垂直方向上, 左右两侧的三角只有一半 */
border-width: 7px 7px 0;
/* 设置某一边的颜色 */
border-color: transparent;
border-top-color: #f00;
}
/* 还要设置一个伪类 覆盖它 */
.trangle::after{
position: absolute;
/* 一定要设置content属性, 否则不生效 */
content: "";
}这是一个实验中的功能, 为 web 开发者提供了一种告知浏览器该元素会有哪些变化的方法。可以在元素属性真正发生变化之前, 提前做好对应的 优化 准备工作
- 不要将
will-change应用到太多的元素上, 避免消耗过多的机器资源 - 有节制地使用, 如果直接在样式表中显式声明了
will-change属性, 则表示目标元素可能会经常变化, 浏览器会将优化工作保存得比以前更久 - 不要过早应用
will-change优化, 过度使用会导致大量的内存占用, 它是作为最后的一个优化手段 - 给它足够的工作时间, 这个属性是用来让开发者告知浏览器哪些属性可能会变化的, 然后浏览器可以选择在变化发生前, 提前去做一些优化工作
最佳实践就是当元素变化之前和之后, 通过脚本来切换
will-change的值
前言: 做网页资讯的时候, 资讯的封面大小不一, 前端展示的样式也是大小不一的, 设计稿没有一定的比例联系, 所以使用了把封面图片改为了背景图片, 设置 size cover, 取中间的部分
问题: 好像一切都 objk 的样子, 但是呢, 在火狐和IE浏览器打开翻车了~ duang duang duang...背景图片没有显示, 检查看一看, 黄色小三角, 属性不可用。。
翻车代码: background: url('bg-xxx.png') center no-repeat/cover;
怎么解决呢? 车开得好好滴, 为啥就翻车了? 查一查
简写顺序: bg-color || bg-image || bg-position [ / bg-size]? || bg-repeat || bg-attachment || bg-origin || bg-clip
背景颜色 || 背景图片 || 背景位置 || 背景大小 || 背景的平铺方式 || 背景是否滚动 || 背景图片的定位区域 || 背景作用的盒子(border/padding/content)
还是书写顺序的问题, 火狐浏览器在这方面是实现最好的, 6px的字体大小bug都能复现, 厉害了~
修改代码: background: url('bg-xxx.png') center/cover no-repeat; 看到没, position/size是在一起滴滴..
虽然开发中, 一直使用的是Chrome浏览器, 调试预览; 其实火狐在HTML标准这方面, 做得更好 Chrome上能显示的最小字体是12px, 火狐6px都没问题, 开发移动端项目的时候, 更方便预览真实的效果