16个常用css技巧收集整理(一)

2019-03-29159次阅读css3css

能用css解决的就不要用JavaScript,做到渐进增强(从被所有浏览器支持的基本功能开始,逐步地添加那些只有新式浏览器才支持的功能,向页面增加无害于基础浏览器的额外样式和功能的。当浏览器支持时,它们会自动地呈现出来并发挥作用)即可。

animation-fill-mode
这个CSS属性用来指定在动画执行之前和之后如何给动画的目标应用样式。例如我们要做一个淡出效果(动画从opacity: 1;到opacity 0;)

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

h1 {
  animation: fadeOut 2s ease;
}

默认情况下,动画完成后,它将跳回其初始状态。这根本达不到我们想要的效果,这时候可以通过animation-fill-mode: forwards;让其保留在最后一个关键帧使元素保持淡出:

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

h1 {
  animation: fadeOut 2s ease;
  animation-fill-mode: forwards;
}

它接受以下属性:

  • none :(默认)元素在动画未执行时获取其初始样式。
  • forwards : 动画将应用由执行的最后一个关键帧设置的值。请注意,它可能不是“100%”或“to”关键帧的状态。如果设置animation-iteration-count
  • 为1.5,则最后一个关键帧将是50%关键帧。或者,如果animation-direction设置为反向,则最后一个关键帧将是“0%”或“from”关键帧。
  • backwards:将应用动画开头的关键帧中定义的属性值。
  • both:动画将遵循forward和backward的规则 。
  • initial:设置animation-fill-mode为默认值。
  • inherit:元素从其父元素继承animation-fill-mode值。

您可以在流行的Animate.css库中看到,.animated该类使用animation-fill-mode: both。

animation浏览器支持:IE10+

calc()计算值

CSS函数calc()可以用在任何一个需要<length>、<frequency>, <angle>、<time>、<number>、或<integer>的地方。有了calc(),你就可以通过计算来决定一个CSS属性的值了。

你还可以在一个 calc() 内部嵌套另一个 calc() ,里面的 calc() 会被简单地视为加了括号。 

它接受带加法,减法,乘法和除法运算符的表达式。操作数可以是任何语法长度值。你甚至可以做类似的事情calc(var(--someValue) / 2 - 2em)
对于不支持它的浏览器,回退将是这样的:

width: 98%; /* 不支持的浏览器回退calc() */    
width: calc(100% - 1em);

浏览器支持:IE部分支持

box-sizing

CSS 中的 box-sizing 属性定义了 user agent 应该如何计算一个元素的总宽度和总高度。可以更改用于计算元素宽度和高度的默认的 CSS 盒子模型。可以使用此属性来模拟不正确支持CSS盒子模型规范的浏览器的行为。box-sizing 属性可以被用来调整这些表现:

  • content-box  是默认值。如果你设置一个元素的宽为100px,那么这个元素的内容区会有100px 宽,并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。
  • border-box 告诉浏览器去理解你设置的边框和内边距的值是包含在width内的。也就是说,如果你将一个元素的width设为100px,那么这100px会包含其它的border和padding,内容区的实际宽度会是width减去border + padding的计算值。大多数情况下这使得我们更容易的去设定一个元素的宽高。

浏览器支持:IE8+

currentColor

在CSS1和CSS2中定义了border-color、box-shadow属性的默认值是color属性的值,但却没有为此定义一个相应的关键字。

在CSS3中扩展了颜色值包含currentColor关键字,并用于所有接受颜色的属性上。比方说背景色background-color, 渐变色gradient, 盒阴影box-shadow, SVG的填充色fill等等。

box-shadow: inset 2px 2px 3px currentColor;
background-color: currentColor;
background-image: linear-gradient(currentColor, transparent);

currentColor关键字的使用值是color属性值的计算值,如果当前元素没有显示设置color属性则继承父元素color属性值。

如果currentColor关键字被应用在color属性自身,则相当于是color:inherit。关于currentColor使用场景实例移步到这里

浏览器兼容:IE9 +

上一篇: 在微服务架构中Redis为什么不能取代Etcd?  下一篇: 16个常用css技巧收集整理(二)  

16个常用css技巧收集整理(一)相关文章