CSS Tip 系列（二）

1. 基于媒体查询和 Grid 布局

https://codepen.io/kevinpowell/pen/ExaNWyM

<div class="card">
  <img src="https://i.pravatar.cc/125?image=3" alt="" class="profile-img">
  <ul class="social-list">
    <li><a href="#" class="social-link"><i class="fab fa-dribbble-square"></i></a></li>
    <li><a href="#" class="social-link"><i class="fab fa-facebook-square"></i></a></li>
    <li><a href="#" class="social-link"><i class="fab fa-twitter-square"></i></a></li>
  </ul>
  <h2 class="profile-name">Ramsey Harper</h2>
  <p class="profile-position">Graphic Designer</p>
  <p class="profile-info">Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere a tempore, dignissimos odit accusantium repellat quidem, sit molestias dolorum placeat quas debitis ipsum esse rerum?</p>
</div>

<style>
.card {
  display: grid;
  grid-template-columns: 1fr;
  grid-column-gap: 2em;
  /* 默认采用垂直布局 */
  grid-template-areas: 
    "name"
    "image"
    "social"
    "position"
    "description";
}

/* 利用媒体查询，当视口宽度大于 600px 的时候， 
   采用更易于阅读的双列布局方式 */
@media (min-width: 600px) {
  .card {
    text-align: left;
    grid-template-columns: 1fr 3fr;
    grid-template-areas:
      "image name"
      "image position"
      "social description";
  }
}

.profile-name     { grid-area: name; }
.profile-position { grid-area: position; }
.profile-info     { grid-area: description; }
.profile-img      { grid-area: image; }
.social-list      { grid-area: social; }
</style>

2. 使用 Grid 布局实现内容重叠

https://codepen.io/kevinpowell/pen/ExaNmQN

<div class="grid">
  <img src="https://unsplash.it/200/300" alt="" class="image">
  <p class="body">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam veritatis repudiandae, ut soluta autem dolorum. Nesciunt dolore ipsum corporis modi magni labore voluptatibus, harum maiores!</p>
</div>

<style>
.grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

/* .image, .body 都占据一行 */
.image,
.body {
  grid-row: 1 / 2;
  align-self: center;
}
/* .image 占据第一、第二列 */
.image { grid-column: 1 / 3; }
/* .body 占据第二列到最后一列 */
.body { 
  grid-column: 2 / -1;
}
<style>

3. 使用 outline 实现偏移“边框”效果

https://codepen.io/kevinpowell/pen/gObLqxz

使用 outline 简单的模拟出元素边框效果，与 outline-offset 属性结合使用，还能制作出偏移“边框”效果出来。

.outline {
  outline: 2px solid white;
  outline-offset: -10px;
}

4. border-radius 的斜线语法

https://codepen.io/kevinpowell/pen/JjobxBN

border-radius 除了普通的四个值语法外，还能使用用斜线分割的、最多 8 个值的语法，后者可以更加细粒度的控制每个角的两个角半径值

.border-radius {
  border-radius: 50px 25px / 25px 50px;
}

5. 背景图片从文字透出

https://codepen.io/kevinpowell/pen/OJPPGwN

<h2 class="image-text">This is pretty easy!</h2>

<style>
.image-text {
  background-image: url(https://picsum.photos/id/865/300/100);
  background-size: cover;
  background-clip: text;
  color: transparent;
}
</style>

6. 相关链接

https://codepen.io/collection/nJzQBY
https://twitter.com/hashtag/CSSTipOfTheDay?src=hashtag_click&f=live