html border阴影效果_小猿圈web前端讲解CSS3阴影

学习前端首先需要学习的就是css、html、css3，而其中css3又是运用做多的了，今天小猿圈web前端讲师就总结一下CSS3阴影方面的知识。

边框圆角border-radius

圆角处理时，脑中要形成圆、圆心、长半径、短半径的概念，正圆是椭圆的一种特殊情况。

可分别设置长、短半径，以“/”进行分隔，遵循“1，2，3，4”规则，参考手册练习熟悉各种简写方式。

表格运用圆角需要要 border-collapse: separate;

当圆角半径小于或等于边框宽度时，元素内角是直角

边框图片border-iamge

设置的图片将会被“切割”成九宫格形式，然后进行设置。如下图

“切割”完成后生成虚拟的9块图形，然后按对应位置设置背景，

其中四个角位置、形状保持不变，中心位置水平垂直两个方向平铺。如下图

round 会自动调整尺寸，完整显示边框图片。

repeat 单纯平铺多余部分，会被“裁切”而不显示。

边框阴影border-shadow

设置边框阴影不会影响盒子的布局，即不会影响其兄弟元素的布局

spread可以与blur、h-shadow、v-shadow相互抵消，blur不可为负值

可以设置多重边框阴影，实现更好的效果，增强立体感。

以上就是CSS3阴影的几种形式，经过小猿圈web前端讲师的讲解，你是否又重新认识的一边以前学习的知识呢，遇到不懂得话可以查看我以前发布的文章，也可以关注小猿圈网站，里面有你需要的知识的学习视频。