第3周 CSS3浮动定位与背景样式 第2节边框与圆角
作者：互联网
简介：
边框
圆角
盒子阴影
2.1 边框的三要素
border属性
border: 1px solid red;（分别是线宽度，线型，线颜色）
线型：
值 意义
solid 实线
dashed 虚线
dotted 点状线
边框三要素可以拆分为小属性：（小属性是为了可以层叠大属性，即在整体已经设置了颜色基础上，选择个别的层叠新颜色）
border-width 线宽
border-style 线型
border-color 线颜色
2.2 四个方向的边框
属性 意义
border-top 上边框
border-right 右边框
border-bottom 下边框
border-left 左边框
四个方向边框的三要素小属性：（也是专门用来层叠大属性）
属性
border-top-width 上边框宽度
border-top-style 上边框线型
border-top-color 上边框颜色
同理，还有右/下/左边框......
去掉边框：
border-left:none; 去掉左边框，以此类推
巧妙利用边框制作三角形
原理：盒子的宽度高度都是0，只有一条边框有颜色，其余都是透明；其中边框的宽度就是三角形的底边长。
.box1 {
width:0;
height:0;
/*transparent是透明色*/
border: 20px solid transparent;
border-top-color: red;
}
2.3 圆角
border-radius 属性（属性值通常为ps单位，表示圆角的半径） 比如 border-radius:10px; （这个数值越大，表示圆的程度越大）
正圆形：正方形盒子，当border-radius的属性值为正方形盒子宽度的一半
胶囊型：长方形盒子，当border-radius的属性值为长方形盒子宽度的一半
单独设置四个圆角
方法①border-radius: 10px 20px 30px 40px;（分别表示左上、右上、右下、左下）
方法②也可以使用小属性，border-top-left-radius 左上角
border-top-right-radius 右上角
border-bottom-left-radius 左下角
border-bottom-right-radius 右下角
border-radius 属性值也可以用百分比做单位，表示圆角起始于每条边的哪里
比如 border-radius:20%;
正圆形：正方形盒子，当border-radius属性值为50%
椭圆形：长方形盒子，当border-radius属性值为50%
2.4 盒子阴影
box-shadow属性
box-shadow: 10px 20px 30px rgba(0,0,0,.4);（分别表示x偏移，y偏移，模糊量，颜色）
如果参数是五个数值，
box-shadow: 10px 20px 30px 40px rgba(0,0,0,.4);（分别表示x偏移，y偏移，模糊量，延展值，颜色）
延展值越大，阴影会同时向四个方向延展越大
内阴影
box-shadow: inset 10px 20px 30px 40px rgba(0,0,0,.4);（分别表示内阴影，x偏移，y偏移，模糊量，延展值，颜色）
应用上：比如电子商城里面，鼠标触摸一个盒子，这个盒子内部就会发白光。
多阴影
box-shadow属性值可以用逗号隔开多个，表示多个阴影
box-shadow: 2px 2px 30px red, 4px 4px 40px blue, 6px 6px 6px 50px green, inset 6px 6px 6px orange;
3.1 小结
重点：
1. 边框有哪三个要素？如何分别设置三个要素？常用线型有哪几种？
边框三要素：border-width,border-style,border-color
如何设置三要素：
常用线型有：solid实线，dashed虚线，dotted点状线
边框可以合写，比如 border: 1px solid red;
也可以分别设置四个方向的边框，比如 border top/ border right/ border bottom/ border left
也可以单独设置某个方向的小属性，比如 border-left-color设置左边框颜色，border-bottom-style设置下边框线型
2. 圆角如何设置？正圆形如何设置？
圆角使用border-radius属性设置，圆角以圆角半径px设置，或者用百分比设置
正圆形：正方形盒子，当border-radius属性值为50%
3. 阴影如何设置？
阴影使用box-shadow属性设置，属性值分别表示水平方向的位移，垂直方向的位移，模糊程度，延展程度，颜色
难点：
1. 如何用盒子制作三角形？
原理是：相邻的边是不一样的颜色，边的交界处会形成一条斜线
把盒子的宽度和高度都设置为0，其余不需要的边框都设置成透明色transparent
边框
圆角
盒子阴影
2.1 边框的三要素
border属性
border: 1px solid red;（分别是线宽度，线型，线颜色）
线型：
值 意义
solid 实线
dashed 虚线
dotted 点状线
边框三要素可以拆分为小属性：（小属性是为了可以层叠大属性，即在整体已经设置了颜色基础上，选择个别的层叠新颜色）
border-width 线宽
border-style 线型
border-color 线颜色
2.2 四个方向的边框
属性 意义
border-top 上边框
border-right 右边框
border-bottom 下边框
border-left 左边框
四个方向边框的三要素小属性：（也是专门用来层叠大属性）
属性
border-top-width 上边框宽度
border-top-style 上边框线型
border-top-color 上边框颜色
同理，还有右/下/左边框......
去掉边框：
border-left:none; 去掉左边框，以此类推
巧妙利用边框制作三角形
原理：盒子的宽度高度都是0，只有一条边框有颜色，其余都是透明；其中边框的宽度就是三角形的底边长。
.box1 {
width:0;
height:0;
/*transparent是透明色*/
border: 20px solid transparent;
border-top-color: red;
}
2.3 圆角
border-radius 属性（属性值通常为ps单位，表示圆角的半径） 比如 border-radius:10px; （这个数值越大，表示圆的程度越大）
正圆形：正方形盒子，当border-radius的属性值为正方形盒子宽度的一半
胶囊型：长方形盒子，当border-radius的属性值为长方形盒子宽度的一半
单独设置四个圆角
方法①border-radius: 10px 20px 30px 40px;（分别表示左上、右上、右下、左下）
方法②也可以使用小属性，border-top-left-radius 左上角
border-top-right-radius 右上角
border-bottom-left-radius 左下角
border-bottom-right-radius 右下角
border-radius 属性值也可以用百分比做单位，表示圆角起始于每条边的哪里
比如 border-radius:20%;
正圆形：正方形盒子，当border-radius属性值为50%
椭圆形：长方形盒子，当border-radius属性值为50%
2.4 盒子阴影
box-shadow属性
box-shadow: 10px 20px 30px rgba(0,0,0,.4);（分别表示x偏移，y偏移，模糊量，颜色）
如果参数是五个数值，
box-shadow: 10px 20px 30px 40px rgba(0,0,0,.4);（分别表示x偏移，y偏移，模糊量，延展值，颜色）
延展值越大，阴影会同时向四个方向延展越大
内阴影
box-shadow: inset 10px 20px 30px 40px rgba(0,0,0,.4);（分别表示内阴影，x偏移，y偏移，模糊量，延展值，颜色）
应用上：比如电子商城里面，鼠标触摸一个盒子，这个盒子内部就会发白光。
多阴影
box-shadow属性值可以用逗号隔开多个，表示多个阴影
box-shadow: 2px 2px 30px red, 4px 4px 40px blue, 6px 6px 6px 50px green, inset 6px 6px 6px orange;
3.1 小结
重点：
1. 边框有哪三个要素？如何分别设置三个要素？常用线型有哪几种？
边框三要素：border-width,border-style,border-color
如何设置三要素：
常用线型有：solid实线，dashed虚线，dotted点状线
边框可以合写，比如 border: 1px solid red;
也可以分别设置四个方向的边框，比如 border top/ border right/ border bottom/ border left
也可以单独设置某个方向的小属性，比如 border-left-color设置左边框颜色，border-bottom-style设置下边框线型
2. 圆角如何设置？正圆形如何设置？
圆角使用border-radius属性设置，圆角以圆角半径px设置，或者用百分比设置
正圆形：正方形盒子，当border-radius属性值为50%
3. 阴影如何设置？
阴影使用box-shadow属性设置，属性值分别表示水平方向的位移，垂直方向的位移，模糊程度，延展程度，颜色
难点：
1. 如何用盒子制作三角形？
原理是：相邻的边是不一样的颜色，边的交界处会形成一条斜线
把盒子的宽度和高度都设置为0，其余不需要的边框都设置成透明色transparent
标签：CSS3,圆角,盒子,边框,radius,border,属性 来源： https://www.cnblogs.com/huazhi001/p/16226539.html