1 半透明边框
border: 10px solid rgba(245, 24, 24, 0.5); ???
结果却不是我们想要的透明边框效果，这是因为 background-clip 的默认值是 border-box，延伸到了边框底下，所以，透明明框的下一层是一层背景。修改 background-clip 的值即可完美实现。
background-clip: padding-box; （默认值：border-box）2 多重边框
2.1 outline
主要用于实现两层边框。
border: 10px solid rgb(102, 85, 85);
outline: 5px solid rgb(255, 20, 147);优点1：
能占据空间，不影响布局
优点2：
样式十分灵活，可以方便的实现虚线等 border-style
优点3：
属性 outline-offset 可以接受正值和负值，实现与边框的贴合程度
border: 10px solid rgb(102, 85, 85);
outline: 5px solid rgb(255, 20, 147);
outline-offset: -10px;缺点：
如果存在圆角，描边不能完全贴合圆角
2.2 box-shodow
box-shadow: 第四个参数，称作“扩张半径”，通过指定正值或者负值，可以让投影面积加大或者减小。
一个正值的扩张半径加上两个零的偏移量以及零的模糊值，得到的阴影即是边框。
box-shadow: 0 0 0 10px rgb(102, 85, 85);优点1：
它支持逗号分隔语法，我们可以创建任意数量的投影，即多重边框
box-shadow: 0 0 0 10px #655, 0 0 0 15px deeppink;需要注意的是，box-shadow是层层叠加的，第一层投影在最顶层，依次类推，所以，需要按照此规律扩张半径
除了多重边框，也可以叠加阴影
box-shadow: 0 0 0 10px #655, 0 0 0 15px deeppink 0 2px 5px 15px rgba(0,0,0,.6);优点2：
他的扩张效果是根据自己的形状来的，所以，如果有圆角可以很好的实现。
缺点：
- 投影和边框的行为不完全一致。投影不影响布局，而且也不会受到 box-sizing 属性的影响。但是，可以通过内边距或外边距空出额外的空间来模拟边框需要占据的空间
- “假”边框也不影响鼠标事件。如果有需要，请设置 box-shadow:inset，来使投影绘制在元素的内圈。
3 投影
3.1 单侧投影
主要是指实现相邻两边的阴影效果
当我们的模糊半径足够大的时候，会发现，原本只想让下和右边有阴影，然而，此刻上和左也有了阴影。
这时候就需要 扩张半径 ，来改变阴影的大小。当 扩张半径 == 模糊半径 的时候，阴影的大小 == 投影物体的大小。
box-shadow: 10px 10px 10px -10px rgba(0, 0, 0);3.2 双侧投影
指不相邻的边的阴影效果，主要是需要用到 box-shadow 的 逗号分隔 属性
box-shadow: 10px 0 5px -5px rgba(0, 0, 0), -10px 0 5px -5px rgba(0, 0, 0);3.3 不规则投影
对于伪元素、半透明的装饰...
并不能很好的对伪元素等进行阴影效果
滤镜：filter: blur()、opacity()、drop-shadow()、grayscale()...
drop-shadow(): 滤镜可接受的参数基本上跟 box-shadow 属性是一样 的，但不包括扩张半径，不包括 inset 关键字，也不支持逗号分割的多层投影语法。
完美实现？？
可以看出，当里面有文字的时候，文字也会被打上阴影
4 圆角
1. border-radius: 100px / 75px; (其中 / 分隔水平和垂直半径)；2. border-radius: 10px / 5px 20px; 等价于 border-radius: 10px 10px 10px 10px / 5px 20px 5px 20px;
border-radius: 50% / 100% 100% 0 0; border-radius: 100% 0 0 100% / 50%; border-radius: 100% 0 0 0; border-radius: 50%/50% 50% 0 0;除了 border-radius 可以接受不同方向的各个值之外，border-width 也可以接受不用方向的宽度
首先画出 1/4 的圆，接着，新增一个边框10px，如下：
background: #fff;
border-radius: 100% 0 0 0;
border: 20px solid #000;
border-style: solid;
接着，改变边框的颜色，只剩 圆弧的边框
background: #fff;
border-radius: 100% 0 0 0;
border-width: 20px;
border-color: #000 #fff #fff #000;
border-style: solid;最后，修改 border-width: 20px 0 0 0; 的宽度，即可时间下面的完美效果
5 clip-path
创建一个只有元素的部分区域可以显示的剪切区域
5.1 图形函数
- inset(top right bottom left round top-radius right-radius bottom-radius left-radius): 定义一个插进的长方形
-webkit-clip-path: inset(5% 10% 5% 10% round 10%); clip-path: inset(5% 10% 5% 10% round 10%);-webkit-clip-path: inset(5% 10% 5% 10% round 10% 100%); clip-path: inset(5% 10% 5% 10% round 10% 100%); - circle(半径 at x y)
-webkit-clip-path: circle(50% at 50% 50%); clip-path: circle(50% at 50% 50%); - ellipse(): 椭圆效果
-webkit-clip-path: ellipse(47% 28% at 50% 50%); clip-path: ellipse(47% 28% at 50% 50%); - polygon()
-webkit-clip-path: polygon(0 0, 100% 0, 100% 75%, 64% 75%, 66% 90%, 47% 75%, 0 75%); clip-path: polygon(0 0, 100% 0, 100% 75%, 64% 75%, 66% 90%, 47% 75%, 0 75%);
clip-path 实现动画效果
当把前后两个图形的点数相同时，即可实现完美的动画变化效果
6 灵活的背景定位
6.1 background-position
background-position: right 20px bottom 10px;6.2 background-origin
当偏移量等于内边距时，如下，但代码不够灵活，当修改内边距时，又得修改定位
padding: 10px;
background: url(code-pirate.svg) no-repeat #58a;
background-position: right 10px bottom 10px;更加灵活的书写应该是：
padding: 10px;
background: url(code-pirate.svg) no-repeat #58a bottom right;
background-origin: content-box;6.3 cal()
background: url("code-pirate.svg") no-repeat;
background-position: calc(100% - 20px) calc(100% - 10px);7 条纹背景
1. background: linear-gradient(#fb3, #58a);
2. background: linear-gradient(#fb3 20%, #58a 80%);
3. background: linear-gradient(#fb3 50%, #58a 50%);
4. 渐变是也是一种图像，所以，任何背景图像的属性他也可以使用；加上 background-size: 100% 30px;
5. 为了避免每次都要修改两个百分比，可以把第二个百分比置为0，则为前一个色标值的位置。例如：background: linear-gradient(#fb3 30%, #58a 0);
6. 超过三种颜色的条纹背景：background: linear-gradient(#fb3 33.3%, #58a 0, #58a 66.6%, yellowgreen 0);
7. 有角度的渐变，只需要在新增一个角度的参数，同时重复两个渐变的色值
8. 更方便的斜条纹，repeating-linear-gradient(),但是，在创建双色条纹时都需要用到四个色标。
background: repeating-linear-gradient(60deg, #fb3, #fb3 15px, #58a 0, #58a 30px);
9. 对于相同颜色只是透明度不同的渐变，可以使用同一种颜色来实现。实现原理是叠加，特别适用于对渐变不支持的情况。
background: #58a;
background-image: repeating-linear-gradient(30deg,
hsla(0,0%,100%,.1),
hsla(0,0%,100%,.1) 15px,
transparent 0, transparent 30px);
8 复杂的背景图案
8.1 网格
border: 1px solid #000;
background: white;
background-image: linear-gradient(90deg, rgba(200, 0, 0, .5) 50%, transparent 0),
linear-gradient( rgba(200, 0, 0, .5) 50%, transparent 0);
background-size: 30px 30px;
9 连续的图像边框
想要利用上面的图片作为边框
border-image: 实现原理是 九宫格伸缩法，把图片切割成九块，然后把他们应用到元素边框相应的边和角。
最简单的做法，就是两个 div ，一个背景图片，另一个为白色背景，叠在背景图片上方。
如何用一个div去实现？？
关键点：
- 实现思路：在背景图片之上，再叠加一层纯白的实色背景
- 为了让下层的图片背景区域透过边框区域显示出来，需要给两层背景指定不同的 background-clip 值
- 因为我们只能在多重背景的最低层设置背景色，因为只能用一道从白色渡到白色的css渐变来模拟出纯白色实色背景效果
border: 20px solid transparent;
background: linear-gradient(white, white), url(bg.jpg);
background-size: cover;
background-clip: padding-box, border-box;
然而，边框的图片有一种怪异的拼接效果，这是因为 background-origin: padding-box;
只要修改为 background-origin: border-box
border: 20px solid transparent;
background: linear-gradient(white, white) padding-box,
url(bg.jpg) border-box 0 / cover;
渐变图案，实现老式信封样式边框
background: linear-gradient(white, white) padding-box,
repeating-linear-gradient(-45deg, red 0, red 12.5%,
transparent 0, transparent 25%,
#58a 0, #58a 37.5%,
transparent 0, transparent 50%) 0 / 20px 20px;
进一步变化：
padding: 10px;
border: 1px solid transparent;
background: linear-gradient(white, white) padding-box,
repeating-linear-gradient(-45deg, black 0, black 25%, white 0, white 50%) 0 / 10px 10px;
animation: ants 12s linear infinite;
10 切角效果
方法1：渐变实现，单个切角
方法2：渐变实现，两个切角
两层渐变会填满整个元素，因此它们会相互覆盖。所以，应该使用 background-size 让每层渐变分别只占整个元素的一半面积，同时注意 no-repeat，否则背景会叠加。
background: linear-gradient(-45deg, transparent 15px, #58a 0) no-repeat right,
linear-gradient(45deg, transparent 15px, #58a 0) no-repeat left;
background-size: 50% 100%;
弧形切角：径向渐变
background: radial-gradient(circle at top left, transparent 15px, #58a 0) top left,
radial-gradient(circle at top right, transparent 15px, #58a 0) top right,
radial-gradient(circle at bottom left, transparent 15px, #58a 0) bottom left,
radial-gradient(circle at bottom right, transparent 15px, #58a 0) bottom right;
background-size: 50% 50%;
background-repeat: no-repeat;
11 折角效果
先实现第一层的切角效果
再实现另一层的切角效果
接着重叠起来
明明是一样的宽度，却不能完美重合。因为第二层渐变的宽度是写咋色标中的，因此它是沿着渐变轴进行度量的，是对角线尺寸。而第一层是在 background-size 中定义的长度，是背景贴片的宽度和高度，是在水平和垂直方向上进行度量的。
调整尺寸之后
12 自适应内部元素 max-width: min-content
如何让图片的描述，以图片的宽度为宽度进行自适应。
max-width: min-content;
13 精确控制表格的列和宽
只需要新增属性 tablelayout: fixed; 之后，就可以对表格进行自定义的样式定义
13 打字动画
字体出现的动画，模拟打字是一个一个出现的动画效果
通过宽度的变化，来逐个展示
- 缺点：并不适用于多行文本；并且动画持续时间越长，效果越差
- 新增属性： white-space:nowrap;overflow: hidden;
Css is awesome!
然而却是平滑出现，而不是我们要的单个字体的出现。而且，宽度又该如何计算呢？
- steps()：来实现逐帧出现，闪烁效果
- 宽度问题，通过 ch 单位解决，表示 ‘0’ 字形的宽度。
Css is awesome!
14 状态平滑的动画
场景描述：当图片很长，而展示的区域有限时，我们一般只展示部分给用户看。 当其获得焦点时，图片滑动，看到其他被隐藏的部分。 然而，当用户在动画播放到一半就移开鼠标时，动画停止，并生硬的回到初始位置，这样的体验无疑是糟糕的。
解决方法：结合属性 animation-play-state: paused; 来实现一开始就停止动画，当获得焦点时，可继续动画 animation-play-state: running。
.animation-box {
width: 190px;
height: 225px;
background: url(2.jpg) no-repeat;
background-size: 300px 225px;
animation: animation-box 5s linear infinite alternate;
animation-play-state: paused;
}
.animation-box:hover {
animation-play-state: running;
}
@keyframes animation-box {
to {
background-position: 100% 0;
}
}
更多详情和代码，请查看：github.com/Hbingbing/c…
文章作者: 玉米同学
许可协议: 转载请保留原文链接及作者。
