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

课程名称：前端工程师2022版
课程章节：边框与圆角
课程讲师： 慕课网
课程目标：掌握CSS3 边框和盒子阴影
课程内容：
边框、圆角与盒子阴影

---

border 边框

CSS 的 border 属性是一个用于设置各种单独的边界属性的简写属性。 border 可以用于设置一个或多个以下属性的值： border-width、border-style、border-color。

border: [border-width ||border-style ||border-color |inherit] ;

参数名称	参数类型	解释
border-width	[‘px’，‘rem’，’%’]	控制边框的宽度
border-style	string	控制边框的样式
border-color	string	控制边框的颜色
inherit	[’’,’’]	控制边框展示在元素宽高尺寸的外部还是内部

border-width、border-style、border-color它们的用法遵循 css 的：左上、 右上 、右下 、左下 的原则。最多可以添加 4 个参数。
实例：

.demo{
        width:100px;
        height: 100px;
        border:1px solid #ddd;
}

---

border-radius 圆角

通过给一个 html 元素标签的样式增加一条 border-radius 属性，让这个元素的边角由直角边变成圆弧。
它的用法遵循 css 通用的：左上、 右上 、右下 、左下 的原则。

border-radius:value;

属性	描述
border-radius	四个边角值
border-top-left-radius	左上角圆弧值
border-top-right-radius	右上角圆弧值
border-bottom-right-radius	右下角圆弧值
border-bottom-left-radius	左下角圆弧值

实例：

.demo{   
    border-radius:0  8px 0 8px;  
}
.demo{   
    border-top-right-radius:8px;  
    border-bottom-left-radius:8px;
}

1. 不要让 border-radius 的 % 值大于 50，因为如果两个相邻的半径和超过了对应的盒子的边的长度，那么浏览器要重新计算以保证它们不重合。虽然表面上看没有问题但是这样会对性能有影响。
   如果用 rem、em 单位在移动端用border-radius 画圆，在部分机型里面是椭圆的问题，可以通过 50% 来解决 ，或者使用 px 配合缩放 scale 来实现 rem 单位的效果。
2. 在内联元素span这类标签使用这个属性的时候同样有效但是记得不要使用%这样会导致一些span 标签的圆角不一样因为 % 是参考长和宽计算的。
3. border-radius 圆角并不会隐藏标签内部元素的内容，如果有内容溢出的情况记得增加overflow:hidden;
4. 任何元素都可以使用这个属性,包括视频、音频标签等等。
5. 一般情况下不推荐 border-top-left-radius 这类的写法除非是需要在某种交互过程中需要改变其中一个的圆角值而其它的保持不变。因为这类的标签会影响浏览器渲染的性能。

---

box-shadow 阴影

box-shadow 属性向框添加一个或多个阴影.
语法说明：

    box-shadow:h-shadow v-shadow blur color;

实例：

.demo{
    width:100px;
    height:100px;
    transition: box-shadow 1s;
}
.demo:hover{
     box-shadow: 1px 1px 5px #ccc；
}

如果给一个元素添加多个阴影，那么后面的颜色层级高于前面的，也就是说如果前 3 个参数一样，后面的颜色会覆盖前面的颜色。
不要给不规则的图形添加阴影，因为这只会添加到块级元素中，不会验证图片的路径添加阴影，可以使用滤镜来达到这样的效果。

---

课程截图