边框

• border-radius
• box-shadow
• border-image

【1】box-shadow

box-shadow: 50px 50px 0 20px #ffb;

图：

解析：

参数1：X轴，图中为30，因为50-20=30；
参数2：Y轴，图中为30，因为50-20=30；
参数3：模糊距离
参数4：阴影大小，默认可省略不写时为0。
参数4：颜色。

【2】border-image

border-image-repeat: 重复（repeat）、拉伸（stretch）或铺满（round）。

border-image: url(border.png) 30 round;

【3】半透明边框

rgba或hsla

color: hsla(1,0%,100%,.2);
border: solid 3px;
border-color: rgba(255,255,0,.2);

【4】多重边框

【4.1】用 box-shadow

background: #fbfb;
box-shadow: 0 0 0 5px #f00, 0 0 0 10px #ff0, 0 0 0 15px #00f;

【4.2】用 outline

background: #fbfb;
outline: 5px solid #ff0;
border: 5px solid #f00;

outline 和 border 的区别：

• outline不占空间，border占空间
• 设置圆角（border-radius）之后，border边框会贴紧，outline不会
• outline-set可以设置边距

区别的图片

区别的代码:

background: #fbfb;
outline: 5px solid #ff0;
border: 5px solid #f00;
border-radius: 50%;
outline-offset: 10px;

---

background

【1】background-origin

背景区域的位置，有如下属性：

• content-box：padding值会起效，以padding开始的单位开始显示背景；

• padding-box：padding不会影响背影，直接从border里面开如显示背影；

• border-box：border不会影响背景，直接把border的内容也算在背影里面，背景会减去border的长度。

【2】background-image

背景图，有如下属性：

• url()：图片地址
• linear-gradient()渐变背景

【3】background-position 位置

让背景图在距离右边和底部都是 20px，如图：

【3.1】background-position

方法一：

background: url(img_url) no-repeat;
background-position: bottom 20px right 20px;

方法二：

padding: 20px;
background: url(img_url) no-repeat;
background-position: bottom right;
background-origin: content-box;

background-origin:content-box;和padding:20px结合起来的效果和方法一一样。

【3.2】calc

background: url(img_url) no-repeat;
background-position: calc(100% - 20px, 100% - 20px);

【4】background-attachment

背景依附，默认为scroll，随背景滚动

background-attachment: fixed; // 背景不会随内容滚动

用background-attachment实现滚动提示

background-image: radial-gradient(at top, rgba(0,0,0,0.2), rgba(0,0,0,0));
background-repeat: no-repeat;
background-size: 100% 15px;
background-attachment: local, scroll;

---

transform

所有旋转效果

/* 转换中心 */
transform-origin: top;
/* 旋转 */
transform: rotate(45deg);
/* 倾斜 */
transform: skew(45deg);
/* 梯形效果 */
transform: perspective(45deg);
/* 平移 */
transform: translate(20px, 10px);
/* 缩放 */
transform: scale(.5);

也可以所有属性合并：

transform: rotate(45deg) translate(20px, 10px) scale(.5) skew(45deg);

【1】rotate：旋转

【1.1】正方形

.lin{
  width: 200px;
  height: 200px;
  overflow: hidden;
  transform: rotate(45deg);
}
.lin > img{
  width: 100%;
  height: 100%;
  transform: rotate(-45deg)scale(1.5);
}

如果不用scale(1.5)的话就是八角形。

【1.2】长方形

.lin-long > img{
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  transition: ls clip-path;
}
.lin-long > img:hover{
  clip-path: polygon(0 0 , 100% 0, 100% 100%, 0 100%);
}

【2】skewX：倾斜

transform: skewX(-45deg);

skewX 默认会把字体内容也旋转，解决方式是加伪元素

.box{
  position: relative;
  width: 100px;
  height: 50px;
  text-align: center;
  line-height: 50px;
}
.box::before{
  content: '';
  position: absolute;
  bottom: 0;
  top: 0;
  right: 0;
  left: 0;
  z-index: -1;
  background-color: #ffb;
  transform: skewX(-45deg);
}

【3】perspective：梯形效果

transform: perspective(30px)rotateX(5deg);

同样会导致内容变成梯形，所以用伪元素生成

.border{
  width: 200px;
  height: 100px;
  position: relative;
}
.border::before{
  content: '';
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  z-index: -1;
  background:#fbb;
  transform: perspective(30px)rotateX(5deg);
}

---

各种阴影

【1】边框阴影：box-shadow

【1.1】单侧阴影

box-shadow: 15px 0 5px -10px #000;

h-shadow	v-shadow	blur	spread	color	insect
水平阴影	垂直阴影	模糊	阴影尺寸	颜色	外阴影转到内阴影

【1.2】多侧阴影

box-shadow: 15px 0 5px -10px #000, -15px 0 5px -10px #000;

【2】文字阴影：text-shadow

text-shadow: 5px 5px 5px #f00;

参数：x 轴、y 轴、阴影、颜色。

【3】多边形阴影：drop-shadow

文字也会有阴影

width: 0;
height: 0;
border: 100px solid ;
border-color: transparent transparent red;
filter: drop-shadow(5px 5px 5px #000);

参数：x 轴、y 轴、阴影、颜色。

【4】通过阴影弱化背景

box-shadow: 0 0 0 50vmax rgba(0,0,0,.8);

重点：用伪元素设置 blur

.cover{
  width: 600px;
  height: 500px;
  position: relative;
}
.cover::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 600px;
  height: 500px;
  filter: blur(5px);
  background: url('./floor.jpeg') center center no-repeat;
  z-index: -1;
}
.content{
  position: absolute;
  left: 30%;
  top: 50%;
  width: 300px;
  height: 100px;
  border: 1px solid #fbb;
}
<div class="cover">
  <div class="content">我是内容</div>
</div>

---

渐变

• line-gradient：创建线性渐变的图片

• redial-gradient：创建径向渐变的图片

• repeating-line-gradient：创建重复线性渐变的图片

• repeating-redial-gradient：创建重复径向渐变的图片

与background-size组合的话，可以生成条纹背景。

【1】linear-gradient

背景 2 色平铺

background: linear-gradient(#ff0 50%, #f00 50%);
background-size: 100% 50%;

【1.1】linear-gradient：条纹背景

背景为上下 2 色分割

backgorund-image: linear-gradient(#ff0 50%, #f00 50%)

背景 2 色平铺

background: linear-gradient(#ff0 50%, #f00 50%);
background-size: 100% 50%;

背景 2 色任意角度平铺

background-image: repeating-linear-gradient(60deg,yellow 0%,yellow 5%,green 0%,green 10%);

【1.2】linear-gradient：切角效果

width: 200px;
height: 200px;
background:#ffb;
background: linear-gradient(135deg, transparent 15px,#fbb 0) top left,
      linear-gradient(-135deg, transparent 15px,#fbb 0) top right,
      linear-gradient(-45deg, transparent 15px, #fbb 0) bottom right,
      linear-gradient(45deg, transparent 15px, #fbb 0) bottom left;
background-size:50% 50%;
background-repeat:no-repeat;

【2】repeating-linear-gradient

背景 2 色任意角度平铺

background-image: repeating-linear-gradient(60deg,yellow 0%,yellow 5%,green 0%,green 10%);

---

文本效果

文字超出：text-overflow

• ellipsis：显示...。
• clip：截断。
• 'string'：【仅 firefox】自定义字符串。

文字换行：word-wrap

• break-word：如果单词太长会自动换行。

文字截断：word-break

• keep-all：【默认】单词放不下会自动换行。
• break-all：单词放不下会折断换行，铺满元素。

---

animation

【1】写法

<style>
  div {
    width: 0px;
    height: 100px;
    background: red;
    position: relative;
    /* 全称名字 */
    /* animation: name duration timing-function delay iteration-count direction fill-mode;  */

    /* 全称简写 */
    /* animation: mymove 5s linear 1s 1 alternate backwards;  */

    /* 名称 */
    animation-name: mymove;
    /* 速度 */
    animation-duration: 5s;
    /* 曲线 */
    animation-timing-function: linear;
    /* 延迟 */
    animation-delay: 1s;
    /* 次数 */
    animation-iteration-count: 1;
    /* 反向播放 */
    animation-direction: normal;
    /* 填充模式 */
    animation-fill-mode: both;
  }

  @keyframes mymove {
    from {
      background-color: #fbb;
      width: 10px;
    }

    to {
      width: 300px;
    }
  }
</style>

...

<div> content </div>

【2】属性解析

【2.1】曲线：animation-timing-function

• linear：速度从头至尾相同。
• ease：【默认】低速开始和结束，中间速度快。
• ease-in：低速开始。
• ease-out：低速结束。
• ease-in-out：低速开始和结束

【2.2】反向播放：animation-direction

• normal：【默认】只正常播放
• alternate：轮流反向播放

【2.3】填充模式

学习链接

• none：【默认】无改变。
• forwards：保留最后一帧，不回到初始状态。
• backwards：延迟的等待时间内，元素的样式变为第一帧的样式。
• both：同时应用forwards和backwards的效果。

【3】更多用法

【3.1】模拟打字动画

用width:0到width:100%模拟出打字效果。

@keyframes typing {
  from {
    width: 0;
  }
}
p{
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  animation: typing 18s;
}

【4】其它组合

【4.1】backface-visibility：背面向屏幕时是否可见

<!DOCTYPE html>
<html>
  <head>
    <style>
    div
    {
      width:100px;
      height:100px;
      background: url('https://image.youbankeji.com/test/12/2021/01/05/6970b7294f674d6eb6a32425fdaca066.jpeg!avatar');
      background-size:100% 100%;
      animation:myfirst 15s;
      backface-visibility: hidden;
    }

    @keyframes myfirst
    {
      from {transform:rotateY(0deg);}
      to {transform:rotateY(360deg);}
    }

    </style>
  </head>
  <body>
  	<div>文字</div>
  </body>
</html>

---

transition

<style>
  div {
    width: 100px;
    height: 100px;
    background: red;
    position: relative;
    /* 简写 */
    /* transition: width 2s linear 1s; */

    /* 属性名称 */
    transition-property: width;
    /* 持续时间 */
    transition-duration: 2s;
    /* 曲线 */
    transition-timing-function: linear;
    /* 延迟时间 */
    transition-delay: 1s;
  }

  div:hover {
    width: 300px;
  }
</style>

...

<div></div>

曲线：animation-timing-function

• linear：速度从头至尾相同。
• ease：【默认】低速开始和结束，中间速度快。
• ease-in：低速开始。
• ease-out：低速结束。
• ease-in-out：低速开始和结束