CSS3边框样式 圆角、边框图片、边框阴影-来自三人行慕课

原文链接:https://www.3mooc.com/front/articleinfo/229

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边框样式 圆角、边框图片、边框阴影-来自三人行慕课)