分享两个基础实用的 CSS 技巧

最近小编读到了一篇来自 David Mellul 的文章，里面提到了几个比较基础，但也是比较实用的几个关于 CSS 的技巧，小编觉得对初学者会有所帮助，所以，今天就分享给大家。

少用 border，尽量用 box-shadow 或者 box-sizing

border 默认情况下会增加元素的大小，这样带来的问题就是一方面你得自己计算在整个布局中元素的整个大小(宽高+border)，另外一方面就是当动态增加或者删除 border 的时候，会导致布局的 resizing。

我们来看个例子:

<div class="first">A</div>
<div class="second">B</div>

 div {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 50px;
  float:left;
}

.first {
  background:blue;
}

.first:hover {
  border: 5px solid black;
}

.second {
  margin-left: 10px;
  background:red;
}

这个时候，当你鼠标 hover 到第一个元素的时候就会明显发现整个 layout 的 resizing 了，就像这样：

所以，解决方案可以是使用 box-sizing: border-box 或者用 box-shadow 来实现 border 的功能。

<div class="first">A</div>
<div class="second">B</div>

<div class="third">C</div>
<div class="fourth">D</div>

div {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 50px;
  float: left;
}

.first {
  box-sizing: border-box;
  background: blue;
}

.first:hover {
  border: 5px solid black;
}

.second {
  margin-left: 10px;
  background: red;
}

.third {
  margin-top: 10px;
  clear: left;
  background: orange;
}

.third:hover {
  box-shadow: inset 0px 0px 0px 4px black;
}

.fourth {
  margin-top: 10px;
  margin-left: 10px;
  background: purple;
}

让元素更加醒目

有的时候我们想刻意引导用户去点击某个按钮，就需要一些方式让元素更加醒目，来吸引用户的注意，一般我们会采用对比色或者大小来突出，现在呢，我们还可以使用像下面这个动画效果来达到目的：

代码也很简单：

<div>A</div>

@keyframes radial-pulse {
  0% {
    box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.5);
  }

  100% {
    box-shadow: 0 0 0 30px rgba(0, 0, 0, 0);
  }
}

div {
  margin: 3em;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
  color:white;
  font-weight:bold;
  font-family: Arial;
  background: rgba(0,0,255,0.75);
  border-radius: 50%;
  animation: radial-pulse 1s infinite;
}

好了，本期就分享这两个很基础的技巧了，希望对初学者有所帮助，我们下期再见咯！

关注「jscourse」微信公众号可以获取更多学习课程和资料。