@Border

border
border-radius
border-image
border-block

边框 border

. 为元素添加指定宽度、样式和颜色的边框

. 元素有4个边，默认是设置4个边：top、right、bottom、left-上右下左

. 可以单独设置每个边的宽度、样式和颜色

. 通常使用复合属性border: border-width border-style border-color

border: border-width border-style border-color

类别	说明
border-width	线条宽度：以像素为单位
border-style	线条样式：默认是实线solid；点线dotted、短划dashed、双线double
border-color	线条颜色：默认和元素的文字颜色保持一致

[] 基本使用：同时设置4个边

.basic0 {
    border: 1px #f40 solid;
}

[] 单独设置某个边

.basic1 {
    border-top: 4px dotted #f08;
    border-right: 4px dashed #089;
    border-bottom: 4px solid #f40;
    border-left: 4px double #890;
}

[] 0元素边框-0尺寸大边框

.zero0 {
    width: 0;
    height: 0;
    margin: 1rem auto;
    border-width: 20px;
    border-style: solid;
    border-top-color: #f08;
    border-right-color: #089;
    border-bottom-color: #f40;
    border-left-color: #890;
}

[] 三角形：利用0尺寸和大边框生成三角形

. 将其中一个或几个边框颜色隐去transparent

.zero1 {
    width: 0;
    height: 0;
    margin: 1rem auto;
    border: 20px solid transparent;
    border-bottom-color: #f40;
}

[] 其它三角形

. 左三角形

. 右三角形

. 上下三角形

. 左右三角形

[]受WEB早期发展限制，多使用这种hack手段进行设计；随着字体图标和其它方式的流行，这种设计手段渐渐淡出视野

[] 透明边框 - 纯色背景[进阶]

. 指定边框透明色

.basic2 {
    border: 20px dashed rgba(255, 255, 255, 0.2);
    background-color: #f40;
}

[] 透明边框 - 背景图片[进阶]

. 有背景图片的情况下，不能直接指定透明边框颜色

. 必须指定背景图片起点为border区

.basic3 {
    padding: 1rem;
    border: 20px dashed rgba(255, 255, 255, 0.4);
    background-color: #f40;//容错
    background-image: url(../imgs/bg.jpg);
    background-size: cover;
    background-origin: border-box;//MUST
}

边框圆角 border-radius

. 边框的圆角半径

. 圆角边框；50%为正圆

. 可单独设置每个角的变化

. 四个值的顺序是：左上角，右上角，右下角，左下角。如果省略左下角，右上角是相同的。如果省略右下角，左上角是相同的。如果省略右上角，左上角是相同的

. 也可以在x和y方向上设置角的半径变化；/前面是4个角水平方向的半径；/后面是4个角垂直方向的半径

. 更多应用，请点击fancy-border-radius

语法1

. 1个值：四个角

. 2个值：[左上、右下]和[右上、左下]

. 3个值：[左上]、[右上、左下]、[右下]

border-radius: length|%;

语法2

. 单独设置x轴、y轴的圆角半径

border-radius:x x x x/y y y y

[] 正圆 - 四个角

border-radius: 50%;
//简写形式
border-radius: 50% / 50%;

[] 扇形 - 一个角

border-top-left-radius: 100%;
//简写形式
border-radius: 100% 0 0 0/100% 0 0 0;

[] 扇形 - 二个角

.radiu4 {
  background-color: var(--main-color);
  border-radius: 0 100% 100% 0/50%;
}

[] 扇形 - 二个角

border-top-right-radius: 50%;
border-bottom-left-radius: 50%;
//简写形式
border-radius: 0 50% /0 50%;

[] 扇形 - 三个角

border-top-right-radius: 50%;
border-bottom-right-radius: 50%;
border-bottom-left-radius: 50%;
//简写形式
border-radius: 0 50% 50%/0 50% 50%;

[] egg

border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;

[] 公告信息栏

. 左边框 border-left

. 盒阴影 box-shadow

. 弹性布局 flex

Warning: NOT to do!!!

[CSS]核心

border-left: 4px solid var(--main-color);
border-radius: 10px;
background-color: #fff;
box-shadow: 1px 7px 14px -5px rgba(0, 0, 0, 0.2);

[] 进度条

[] 圆角导航

.使用子元素撑开容器

Lorem
Ipsa
Ipsa
Placeat

[] 水滴

. 第三方库 fancy-border-radius

. 盒阴影 box-shadow

. 过渡动画 transition

. :hover

白色 rgba(0, 0, 0, 0.05) 蓝色 rgba(5, 169, 243, 0.05)

.water {
  width: 180px;
  height: 180px;
  margin: 2rem auto;
  box-shadow:
    inset 20px 20px 20px rgba(0, 0, 0, 0.05),
    20px 20px 20px rgba(0, 0, 0, 0.05),
    inset -20px -20px 20px rgba(255, 255, 255, 0.05);
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  transition: 1s;
  cursor: pointer;
}

.water:hover {
  border-radius: 50%;
}

边框图像 border-image

. 除了背景可以使用背景图片外，边框也可以使用背景图片

. 必须有边框

属性

独立属性

1. border-image-source

. 背景图片；可以是线性渐变或径向渐变

2. border-image-slice

. 到边框图像上、下、左、右的裁剪，将边框图像裁剪成9份-九宫格

. 可以是数值或 % 或 fill；不带单位，

. 数字：默认单位像素px；不能为负值

. %：默认100%；如果为50%，因为左右俩端已经各占了50%，中间区域没有内容；当<50%时，中间端才会有内容；这部分的内容会根据铺贴的方式进行渲染

. fill：保留边框图像的中间部分；默认不保留

. 当border-image-slice小于图像的一半50%时，border-image-repeat的特性才会体现出来

3. border-image-width

. 边框占用图像的宽度；默认是100%，即背景图片全部覆盖容器；可以使用px

4. border-image-outset

. 图像向外扩展的区域；默认0；不可以是负数

5. border-image-repeat

. 图像重复的方式：stretch[默认]、repeat、round[衔接更顺滑]

复合属性：border-image

应用

. 相框类设计

[] 样例原图 81x81

[] 默认边框背景

Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati maiores consequuntur fugiat, praesentium voluptatibus, molestiae dignissimos cumque similique culpa dolores architecto repellendus debitis vel est! Voluptatum quis.

border: 27px solid #f40;
border-image: url(../imgs/border-img.png);
//等同于
border-image-source: url(../imgs/border-img.png);

[] 定制边框背景

. 1/3裁剪背景图片为9份，并round铺满；如果默认，则2、4、6、8被拉伸

Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam commodi, sunt enim sed labore sapiente ipsa libero hic incidunt necessitatibus sit consectetur. Ratione veritatis distinctio perspiciatis, odio dignissimos aliquid totam!

border: 27px solid #f40;
border-image-source: url(../imgs/border-img.png);
border-image-slice: 27;
border-image-repeat: round;

[] 定制边框背景

. 1/2裁剪背景图片为4份；四个角各占1份，所以中间没有预留空间，是否拉伸不起作用

. 当<50%时，中间区域才会有内容

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quas error iusto sapiente aut repudiandae accusantium id tempora. Consequuntur culpa nulla officiis voluptatum fuga suscipit impedit, distinctio deleniti dolor adipisci. Quibusdam!

border: 27px solid #f40;
border-image-source: url(../imgs/border-img.png);
border-image-slice: 50%;
border-image-repeat: round;

[] 定制边框背景

. 1/6裁剪背景图片为9份

Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque, eaque quae! Harum commodi amet porro eum nesciunt ut nemo, explicabo quibusdam a aspernatur consectetur! Nemo suscipit optio corrupti eius magnam.

border: 27px solid #f40;
border-image-source: url(../imgs/border-img.png);
border-image-slice: calc(100%/6);
border-image-repeat: round;

[] 定制边框背景

. 1/3裁剪；宽度为1/2，所以容器被4个边角覆盖，中间没有预留空间；是否拉伸不起作用

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis maxime perspiciatis quasi animi laudantium placeat? Numquam reiciendis ipsum natus, hic accusamus dicta aliquam. Temporibus tenetur quidem nam aliquid eum dolorem.

border: 27px solid #f40;
border-image-source: url(../imgs/border-img.png);
border-image-slice: calc(100%/3);
border-image-width: 50%;

[] 定制边框背景

. 1/6裁剪；宽度为1/20

Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo dicta, omnis numquam totam veniam ea suscipit voluptates nemo optio placeat iusto ipsa? A nobis ea possimus amet sit nesciunt quae!

border: 27px solid #f40;
border-image-source: url(../imgs/border-img.png);
border-image-slice: calc(100%/6);
border-image-width: 5%;
border-image-repeat: round;

边框块 border-block

说明

. 指定边框块的起始/顶部start和结束/底部end样式

. 浏览器支持不是很好，建议使用SVG实现

border-block-start
border-block-end

[] loading

. 起始透明

. 结束加粗

. :hover旋转1周

.border-blk {
    width: 60px;
    height: 60px;
    margin: 2rem auto;
    border-radius: 50%;
    border: 1px solid #f40;
    border-block-start-color: transparent;
    border-block-end: 4px dashed #089;
    transition: 1s;
}

.border-blk:hover {
    transform: rotate(360deg);
}

总结与作业 Summary & Homework

总结: . 边框 border的使用和样式
作业: 1. 绘制透明椭圆头像框; 2. 优化个人网站，如导航按钮、信息介绍