手记

【九月打卡】第11天 前端工程师2022版 边框与圆角第一讲

课程名称:前端工程师2022版


课程章节:边框与圆角


课程讲师: elex

课程内容:

(一)边框 border:1px solid red;

1、边框三要素(可拆分成小属性,方便小属性层叠大属性)

(1)线宽度(border-width):单位是px

(2)线型(border-style):实线(solid)、虚线(dashed)、点状线(dotted)

(3)线颜色(border-color)

2、四个方向的边框

(1)属性:border-top(上边框)、border-right(右边框)、border-bottom(下边框)、border-left(左边框)

(2)四个方向边框的三要素小属性:border-top/right/bottom/left-width/style/color组合起来一共12种

(3)去除边框的操作:border-left/right/top/bottom:none;

(4)使用边框制作三角形操作:1)将盒子的width和height均设置为0px;2)利用border属性:将边框变透明border:1px solid transparent;(线宽度记得设置大一些,属性值transparent表示透明色)3)利用border-top/left/right/bottom-color等颜色的小属性进行局部修改。

3、border连写时注意事项

(1)通常情况下border-width、border-color两个属性会有默认值,即使不写这两个属性,也能利用默认值让元素有边框

(2)当不设置border-style时就不会出现边框效果了,原因是border-style的默认值是none,此时会造成边框三要素不全,从而导致没边框

(3)连写时建议把三个属性都写上


(二)圆角:border-radius属性

(1)值的单位:px、百分比(表示圆角起始于每条边的哪里)

(2)值通常表示圆角的半径,当值变为宽高的一半,就变成了正圆形

(3)该属性可单独设置四个圆角:border-radius:10px 20px 30px 40px;

                                                                               左上  右上  右下   左下

(4)使用小属性:border-top/bottom-left/right-radius可以单独设置圆角

(5)使用百分比可以制作正圆形和椭圆形:正圆形(正方形盒子+值50%)、椭圆形(长方形盒子+值50%)

(6)border-radius的属性个数

        1)写两个值:第一个值(左上、右下)、第二个值(右上、左下)

        2)写三个值:第一个值(左上)、第二个值(右上、左下)、第三个值(右下)

        3)写四个值:左上 右下 右上 左下


(三)盒子阴影的设置

1、盒子阴影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偏移  模糊量   阴影延展   颜色

2、内阴影:box-shadow属性前面加上inset单词,表示内阴影

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

                   内阴影 x偏移 y偏移 模糊量  阴影延展  颜色

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


课程收获:

谢谢老师,讲的非常细致,很容易懂。



0人推荐
随时随地看视频
慕课网APP