border和background

moonlightop
168 阅读7分钟

border

原理

  • 参考文章：www.zhihu.com/question/35…
  • 由盒模型，我们可以看到border的每一个方向是由一个梯形组成
    • （此时padding + content是有宽高的）
  • 使得padding + content的宽度为0，可以看到上下两个border变为了三角形
    • 因为随着padding + content的宽度趋向于0，两条线就不断的靠近，最终相交成为三角形
  • 同理，使得padding + content的宽高都为0，就可以看到，左右也变为了三角形
  • border-width指的是四个方向三角形或梯形的高
    • 当一个方向的border高度为0，是以此方向的border高的顶点A为线，切一个矩形
    • 四个方向都有时，接下来把border-bottom取消，就会以顶点A为线，切一个矩阵（用蓝笔画主的矩形）
    • 不设置border-bottom，接下来把border-left和border-bottom取消，就会以顶点A为线，且一个矩形（用蓝笔画主的矩形）
    • 不设置border-left和border-bottom 
.box {
  height: 0;
  width: 0;
  box-sizing: border-box;

  border-top: 200px solid red;
  border-left: 200px solid black;
  border-bottom: 200px solid transparent;
  border-right: 200px solid transparent;
}

border-radius

  • 参考文章：zhuanlan.zhihu.com/p/20128284?…
  • 对盒子内部起作用（border + padding + content）
    • 它分为四个方向，每个方向可以设置两个值，分别为下图椭圆的水平方向半径和垂直方向半径，每个方向都会以一个这样的去切盒子，将红线外的原来盒子中切掉
    • border-left-top-radius: 45px 90px
      • 那么此椭圆的水平方向半径为45px、垂直方向半径为90px
      • border-radius: 50%，这样就能画出椭圆，首先它相当于border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%，那么每个方向上的将会以50% * width的水平半径，50% * height的垂直半径的椭圆去切这个盒模型（默认标准盒模型），这样就得到一个椭圆
      • 此处得到椭圆因为盒模型的width != height，而且圆是椭圆的特殊情况（a == b时）
  • border-radius四个值依次是：从左上角开始，顺时针转下去
.box {
  height: 0;
  width: 0;
  box-sizing: border-box;
  margin: 0 auto;

  border-top: 200px solid red;
  border-left: 200px solid black;
  border-bottom: 200px solid orange;
  border-right: 200px solid grey;
  border-radius: 10px 40px 70px 100px 
              /  10px 40px 70px 100px;
/*
  border-radius: 50%; // 全部设为50%
  border-radius: 100%; // 等同于border-radius:50%
  border-radius: 10px 40px 70px 100px;
  border-left-top-radius: 10px; // 10px 10px
  border-right-top-radius: 40px;
  border-right-bottom-radius: 70px;
  border-left-bottom-radius: 100px;  
*/
}
  • 那为何给一个矩形元素设置border-radius:100%和border-radius:50%的时候都是呈现出来一个椭圆呢？
    • when the sum of any two adjacent border radii exceeds the size of the border box,UAs must proportionally reduce the used values of all border radii until none of them overlap
    • 按我的理解就是：当任意两个相邻的切圆的半径之和超过边界框的大小时，那么这两个切圆就会按我们设置border-radius时的比例去缩减它，直到不会这两个圆的半径之和<=边界框的大小
      • 因此当我们设置border-radius: 100%,很明显相邻的两个切圆的半径之和超过边界框的大小，因此按照它们的比例1 : 1 : 1 :1进行缩小，一直到border-radius:50%，就刚刚好等于边界框的大小，就停止了。所以呈现出来的效果和我们设置的border-radius:50%是一样的
      • 案例如下：300px * 200px的矩形，设置了border-top-left-radius：200px 100px，border-top-right-radius：100px 50px，水平方向的半径之和 200px + 100px <= 300px，垂直方向的半径之和 50px + 100px <= 200px，因此不用按比例收缩
      • 当我们将border-top-left-radius改为 300px 100px时，水平方向半径和 300px + 100px > 300px，因此按原有比例缩放，也就是变成一个 300px * 0.75 = 225px ，另一个100px * 0.25 = 75px

border-image

border-image: 图片（url(xxx.jpg)） 位置（27） 重复性（stretch）

  • 第一个参数用于引入图片，第二个参数用于对此图片进行裁剪，然后将裁剪的内容再压缩或拉伸到borde中，其中上下两个部分取决于border-image-slice的水平参数，左右两个部分取决于border-image-slice的垂直参数

  • 具体可用此图片，大小81px * 81px，然后每个小格是27px * 27px

border-image-source

  • 引入图片

border-image-source: url(./test.jpg);

border-image-outset

  • 图片往border外扩展

border-image-outset: 100px;

border-image-width

  • 设置border引入的图片的宽度

border-image-width: 200px;

border-image-slice

  • %、数(表示像素)，默认加上px
    • 默认border-image-slice：100%
    • border-image-slice：30% 35% 40% 30%（上 右 下 左）
      • 相对引入的图片，让裁剪线下移30%px，右移35%px，下移40%px，左移30%px

border-image-repeat

border-image-repeat: 水平方向 垂直方向

  • 上图的四个顶角此属性不作用，上下对应了此属性的水平方向的参数，左右对应了此属性的垂直方向的参数
  • 参数：repeat（重复）、round（平铺）、stretch（拉伸，默认）
    • repeat不会压缩图片，直接重复铺上去，而round则是会压缩，使得它能完整的铺上去
    • stretch就拉伸图片来填充此区域

Sprites

  • 图片中有小图标，如果高度使得当前小图标展示不到一半，就直接展示下一个小图标

  • 参考图片：81px * 81px，每个小图标 27px*27px

background

background-image

  • background-image：linear-gradient() / radial-gradient() / url
    • 渐变颜色是图片来的
  • background-repeat：repeat / no-repeat(默认值) / repeat-x / repeat-y / round / space
  • background-size: xxpx
  • background-position: x方向，y方向
    • 原理参考Sprites

.box {
  width: 0;
  height: 0;
  padding: 200px 200px;
  margin: 200px auto;
  background-color: gray;

  background-image: url(./border1.png),url(./border.png);
  background-repeat: no-repeat,repeat-x;
  background-size: 50px,100px;
  background-position: 200px 0,100px 100px;
}

background-origin

将背景图片以...位置开始填充

  • padding-box（默认） border-box content-box
    • 修改background-position的坐标轴原点
    • 要注意的是border不显示图片，仅有padding和content显示图片
    • background-color的颜色填充padding和content
      • border-width：100px
      • padding：200px
      • content：250px * 250px

background-clip

以...位置为背景图片的显示的终点

  • padding-box（默认） border-box content-box
    • 原理同background-origin

text：用文字体来截背景图，还不是很兼容，不是很重要

  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent; // 会覆盖color

background-attachment

背景图像相对xxx固定，配合overflow：hidden使用

  • fixed：相对于浏览器可视窗口固定
    • 背景图片跟着浏览器滚动而滚动
  • scroll：相对于元素（容器）固定（默认值）
    • 背景图片不跟着容器滚动而滚动
  • local：相对于元素内容固定
    • 背景图片跟着容器滚动而滚动

background-size

  • div
    • width：500px
    • height：700px
  • cover
    • 不改变图片原比例，用一张图片填充满容器（可能溢出）
      • 假设原有图片比例是1：2，为了充满容器，就会调整图片为500px * 1000px
  • contain
    • 不改变图片原比例，让容器包含一张图片（可能留白）
      • 假设原有图片比例是1：2，为了能让容器包含图片，就会调整图片为350px * 700px

linear-gradient

  • 参数
    • 渐变方向 | deg（默认180deg，to bottom）颜色1 starting point1，颜色2 starting point2（ending point1），......
  • 第一个颜色的位置设置为n%，第二个颜色的位置设置为m%。则浏览器会将0%-n%的范围设置为第一个颜色的纯色，n%-m%的范围设置为第一个颜色到第二个颜色的过渡，m%-100%的范围设置为第二个颜色的纯色
  • 每一个渐变的区域都对应这样一个图，起始颜色由starting point沿着此条直线走到ending point，在starting~ending之间，是前后两种颜色的过渡
  • 看如下例子
    • 0~20px先是纯色，然后在交汇出两色混合，渐变效果出现，其它同理
background-image: linear-gradient(90deg,#0f0 20px,#ff0 60px,#00f 80px)
等价于
background-image: linear-gradient(90deg,#0f0 0,#0f0 20px,#ff0 60px,#00f 80px,#00f 100%)

repeating-linear-gradient

未渐变区域重复之前的

.box {
  width: 500px;
  height: 500px;
  
  background-image: repeating-linear-gradient(90deg,#f00 250px,#ff0 300px,blue 400px)
}

radial-gradient

  • 以中心开始，以不同半径的shape(circle \ ellipse)扩散
  • 参数
    • circle \ ellipse 半径限制条件 圆心位置，第一个圆的颜色 R1，第二个圆的颜色 R2...
  • px是指定半径的、%就根据容器的宽高来决定
  • 两圆间渐变，单圆纯色（高斯模糊），默认圆心在容器中间
  • 半径限制条件

repeating-radial-gradient

未渐变区域重复之前的

avatar
文章
阅读
粉丝