CSS3边框与圆角

CSS3边框与圆角

border

border属性需要三个要素

boder: 1px solid red;

线型

• solid 实线
• dashed 虚线
• dotted 点状线

边框三要素可以拆分为小属性

• border-width 线宽
• border-style 线型
• border-color 线颜色

四个方向的边框

• border-top 上边框
• border-right 右边框
• border-bottom 下边框
• border-left 左边框

四个方向的边框三要素小属性

• border-top-width 上边框宽度
• border-top-style 上边框线型
• border-top-color 上边框颜色
• border-right-width 右边框宽度
• border-right-style 右边框线型
• border-right-color 右边框颜色
• border-bottom-width 下左框宽度
• border-bottom-style 下边框线型
• border-bottom-color 下边框颜色
• border-left-width 左边框宽度
• border-left-style 左边框线型
• border-left-color 左边框颜色

border-left:none;属性即可去掉左边框,以此类推

box-shadow

盒子阴影 box-shadow：x偏移 y偏移 模糊量 颜色

box-shadow: 10px 20px 30px rgba(0,0,0,.4);

阴影延展 box-shadow：x偏移 y偏移 模糊量 阴影延展 颜色

box-shadow: 10px 20px 30px 40px rgba(0,0,0,.4);

内阴影

box-shadow属性值前加inset单词,表示内阴影

box-shadow: inset 10px 20px 30px 40px rgba(0,0,0,.4);

多阴影

box-shadow属性值可以用逗号隔开多个,表示携带多个阴影

 box-shadow: 2px 2px 30px red, 4px 4px 40px blue, 6px 6px 50px green, inset 0px 0px 6px orange;

圆角

border-radius: 5px;

border-radius: 20px 40px 60px 80px;

border-radius: 50%;

圆角具有对应小属性，如：

border-bottom-right-radius: 0;