CSS基础

用户3294825148217
48 阅读6分钟

颜色渐变

1、边框颜色渐变

第一种方法：
<template>
  <div class="ceshi">
    <div class="border-box">
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste ratione necessitatibus numquam sunt nihil quos
      saepe sit facere. Alias accusamus voluptate accusantium facere fugiat animi temporibus adipisci! Corporis,
      accusamus tempora.
    </div>
  </div>
</template>


<style lang="scss" scoped>
.ceshi {
  padding-top: 120px;
  margin: 0 auto;
  width: 1200px;
  .border-box {
    padding: 20px;
    border: 4px solid transparent;
    border-radius: 16px;
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    background-image: linear-gradient(to right, #fff, #fff),  //内容背景颜色
      linear-gradient(to right, #358CFF, #0ECF8B);  //边框渐变颜色
  }
}
</style>

效果图：

image.png

第二种方法（兼容性好）：
  <div class="ceshi">
    <div class="border-box">
      <div class="content">
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste ratione necessitatibus numquam sunt nihil quos
        saepe sit facere. Alias accusamus voluptate accusantium facere fugiat animi temporibus adipisci! Corporis,
        accusamus tempora.
      </div>
    </div>
  </div>
  
  
  <style lang="scss" scoped>
.ceshi {
  padding-top: 120px;
  margin: 0 auto;
  width: 1200px;
  .border-box {
    position: relative;
    height: 60px;
    // 字体颜色
    .content {
      position: absolute;
      z-index: 5;
      width: 100%;
      height: 100%;
      text-align: center;
      line-height: 30px;
      font-size: 16px;
      color: #333;
    }
    // 内容背景颜色
    &::before {
      content: "";
      position: absolute;
      top: 2px;
      left: 2px;
      right: 2px;
      bottom: 2px;
      border-radius: 4px;
      background: #fff;
      z-index: 3;
    }
    // 边框颜色
    &::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: 4px;
      background: linear-gradient(to right, #358cff, #0ecf8b);
    }
  }
}
</style>

image.png

2、字体颜色渐变

  <div class="ceshi">
    <div class="border-box">
      Alias accusamus voluptate accusantium facere fugiat animi temporibus adipisci! Corporis,
      accusamus tempora.
    </div>
  </div>

.ceshi {
  padding-top: 120px;
  margin: 0 auto;
  width: 1200px;
  .border-box {
    padding: 20px;
    font-weight: 600;
    background-image: linear-gradient(90deg, #358cff, #0ecf8b);
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
  }
}

image.png

grid布局

1、概述

网格布局（Grid）是最强大的 CSS 布局方案。

它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了。

Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。

2、容器属性

display 属性

display: grid指定一个容器采用网格布局。

div {
  display: grid;
}
grid-template-columns 、grid-template-rows

容器指定了网格布局以后，接着就要划分行和列。grid-template-columns属性定义每一列的列宽，grid-template-rows属性定义每一行的行高。

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
}

上面代码指定了一个三行三列的网格，列宽和行高都是100px

image.png

除了使用绝对单位，也可以使用百分比。

.container {
  display: grid;
  grid-template-columns: 33.33% 33.33% 33.33%;
  grid-template-rows: 33.33% 33.33% 33.33%;
}
（1）repeat()

有时候，重复写同样的值非常麻烦，尤其网格很多时。这时，可以使用repeat()函数，简化重复的值。上面的代码用repeat()改写如下。

.container {
  display: grid;
  grid-template-columns: repeat(3, 33.33%);
  grid-template-rows: repeat(3, 33.33%);
}

repeat()接受两个参数，第一个参数是重复的次数（上例是3），第二个参数是所要重复的值。

（2）auto-fill 关键字

有时，单元格的大小是固定的，但是容器的大小不确定。如果希望每一行（或每一列）容纳尽可能多的单元格，这时可以使用auto-fill关键字表示自动填充。

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
}

上面代码表示每列宽度100px，然后自动填充，直到容器不能放置更多的列。

image.png

（3）带 fr 单元的柔性网格

除了使用长度和百分比创建网格外，我们还可以使用该单位灵活地调整网格行和列的大小。如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍。

fr可以与绝对长度的单位结合使用，这时会非常方便。

.container {
  display: grid;
  grid-template-columns: 150px 1fr 2fr;
}

上面代码表示，第一列的宽度为150像素，第二列的宽度是第三列的一半。

image.png

（4）minmax()

minmax()函数产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值。

grid-template-columns: 1fr 1fr minmax(100px, 1fr);

上面代码中，minmax(100px, 1fr)表示列宽不小于100px，不大于1fr。

（5）auto 关键字

auto关键字表示由浏览器自己决定长度。

grid-template-columns: 100px auto 100px;
（6）网格线的名称

grid-template-columns属性和grid-template-rows属性里面，还可以使用方括号，指定每一根网格线的名字，方便以后的引用。

.container {
   display: grid;
   grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
   grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
}

上面代码指定网格布局为3行 x 3列，因此有4根垂直网格线和4根水平网格线。方括号里面依次是这八根线的名字。

网格布局允许同一根线有多个名字，比如[fifth-line row-5]。

grid-gap 属性

grid-row-gap属性设置行与行的间隔（行间距），grid-column-gap属性设置列与列的间隔（列间距）。

.container {
   grid-row-gap: 20px;
   grid-column-gap: 20px;
}

上面代码中，grid-row-gap用于设置行间距，grid-column-gap用于设置列间距。

image.png

grid-gap属性是grid-column-gap和grid-row-gap的合并简写形式，语法如下。

grid-gap: <grid-row-gap> <grid-column-gap>;

因此，上面一段 CSS 代码等同于下面的代码。

.container {
   grid-gap: 20px 20px;
}
grid-template-areas 属性

网格布局允许指定"区域"（area），一个区域由单个或多个单元格组成。grid-template-areas属性用于定义区域。

 .container {
   display: grid;
   grid-template-columns: 100px 100px 100px;
   grid-template-rows: 100px 100px 100px;
   grid-template-areas: 'a b c'
                        'd e f'
                        'g h i';
 }

配合grid-area属性指定项目放在哪一个区域。

.item-1 {
  grid-area: e;
}

image.png

效果如下：

image.png

3、项目属性

项目的位置是可以指定的，具体方法就是指定项目的四个边框，分别定位在哪根网格线。

  • grid-column-start属性：左边框所在的垂直网格线
  • grid-column-end属性：右边框所在的垂直网格线
  • grid-row-start属性：上边框所在的水平网格线
  • grid-row-end属性：下边框所在的水平网格线
.item-1 {
  grid-column-start: 2;
  grid-column-end: 4;
}

上面代码指定，1号项目的左边框是第二根垂直网格线，右边框是第四根垂直网格线。

image.png

avatar
文章
阅读
粉丝