CSS边界样式 (背景、边框)

:-: border-radius (圆角)

    border-radius: 50%;
    /* 一个角可以设置两个弧度，垂直/水平 */
    border-top-left-radius: 10px 10px;
    border-top-right-radius: 20px 20px;
    border-bottom-left-radius: 30px 30px;
    border-bottom-right-radius: 40px 40px;
    /* 简写形式，水平方向的 top-left top-right bootom-right bootom-left / 对应垂直方向的边角 */
    border-radius: 10px 20px 30px 40px / 10px 20px 30px 40px;

:-: box-shadow (阴影)

    /* transparent 透明色 */
    background-color: transparent;
    /* 写inset表示内阴影、不写inset就是外阴影 */
    /* 
    inset -- 写inset表示内阴影、不写inset就是外阴影、
    参数1：水平偏移量、1px
    参数2：垂直偏移量、2px
    参数3：阴影(高斯模糊)程度、3px  (基于边框两边的位置，同时向两侧展开模糊)
    参数4：水平竖直范围扩大 、0px
    */
    box-shadow: inset 1px 2px 3px 0px #000;
    /* 同时设置内外阴影， */
    box-shadow: 1px 2px 3px 0px #000, inset 1px 2px 3px 0px #fff;
    /* 或者独立设置多个值、 */
    box-shadow: inset 0px 0px 10px #fff,
                     3px  0px 10px #f0f,
                     0px -3px 10px #0ff,
                    -3px  0px 10px #00f,
                     0px  3px 10px #ff0;

:-: 动图 - Demo

    .demo {
        /* border: 1px solid red; */
        position: absolute;
        border-radius: 5px;
        left: calc(50% - 50px);
        top: calc(50% - 50px);
        width: 100px;
        height: 100px;
        background-color: #fff;
        box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.5);
        /* 状态被改变的动图效果 */
        transition: all 2.6s;
        opacity: 0;
    }
    
    .demo::after {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        border-radius: 5px;
        box-shadow: 0px 5px 30px rgba(0, 0, 0, 6);
        opacity: 0;
        transition: all 1.6s;
    }
    
    .demo:hover {
        /* 整体放大的倍数 */
        transform: scale(3.65, 3.65);
        opacity: 1;
    }
    
    .demo::after:hover {
        opacity: 1;
    }

:-: border-image 边框背景

    /* 引入图片进行填充 */
    border-image-source: url('./src/image.png');
    /* 设置渐变色进行填充 */
    border-image-source: linear-gradient(red, #ccc);
    /* 截取：1~4个参数、区域分割 单位：可以填%，但不能带px，上\右\下\左 */
    border-image-slice: 100;
    /* 不加fill只填充边框部分，加了fill 就会填充整个背景 */
    border-image-slice: 10 20 30 40 fill;
    /* 向外延伸的程度，不常用 */
    border-image-outset: 100px;
    border-image-width: 50px;
    /* 重复 */
    border-image-repeat: repeat;

:-: background 背景系列

div.box123 {
    width: 500px;
    height: 500px;
    position: absolute;
    /* 水平剧中 */
    left: calc(50% - 250px);
    /* 垂直剧中 */
    top: calc(50% - 250px);
    background-color: red;
    /* 引入图片背景 （可以引入多个图片） */
    background-image: url(), url();
    /* 分别设置两张图片的大小 */
    background-size: 100px 100px, 200px 200px;
    /* 不重复 */
    background-repeat: no-repeat;
    /* 分别设置位置 */
    background-position: 0 0, 100px 0;
    background-image: radial-gradient(#fff, #000);
    /* 渐变颜色生成器 linear-gradient()、radial-gradient() */
    /*  */
    border: 20px solid transparent;
    padding: 20px;
    background-image: url('./img.png');
    /* 规定背景从盒子的某个部分 开始 渲染(padding-box、border-box、content-box、text) 默认值是padding-box */
    background-origin: content-box;
    /* 规定背景从盒子的某个部分 结束 渲染(padding-box、border-box、content-box、text) 默认值是border-box  text就是用文字体的内容区域来渲染 类似于彩色字体 */
    background-clip: content-box;
    /* background-repeat可以设置图片的排班方式、可以填两个参数、效果：是否重复、拉伸、间隙、补齐 */
    background-repeat: space round;
    /* background-position定位是基于background-origin的属性值 */
    background-position: 0px 0px;

    /* 超出部分滚动条展示 */
    overflow: scroll;
    /* background-attachment
        设置相对于盒子的某个区域进行定位 默认值scroll(相对于容器定位) */
    /* local -- 相对于内容定位(滚动条位置改变时，背景图紧贴着文本内容) */
    /* fixed -- 可以使背景在浏览器窗口可视区，位置保持悬浮 */
    background-attachment: local;
    /* background-size
        设置背景图的大小 */
    /* contain -- 在不改变图片比例的情况下、让背景图跟容器刚好容纳(100%)。有一条边会朝内留空 */
    /* cover   -- 在不改变图片比例的情况下、让背景图跟容器刚好容纳(100%)。有一条边会朝外溢出(推荐) */
    /* 100%    -- 拉伸背景图跟容器大小一致、会改变图像比例 */
    background-size: cover;
    /* 渐变颜色生成器 linear-gradient()、radial-gradient() */
    /* 线性渐变 linear-gradient() */
    /* 参数1可空：需要渐变的方向、默认 to bottom  (向右下渐变：to right bottom )  */
    /* 参数1还可以写角度：如90deg、0deg、180deg、135deg */
    /* 参数2以后：渐变颜色color 20px是该颜色的起至位置 */
    background-color: linear-gradient(to left, #f40 20px, #626);
    /* 径向渐变 radial-gradient() */
    /* 参数1可空：设置渐变的圆及圆心点、(圆形 点在左上：circle at left top)
        closest-corner
        closest-side
        farthest-corner
        farthest-side */
    /* 参数2以后：渐变颜色color 20%是该颜色起至大小 */
    background-color: radial-gradient(ellipse at 5px 5px, #000 20%, #fff 40px, red);
}
/* ----------------------------------------- Demo ----------------------------------------- */
div.box {
    width: 600px;
    height: 100px;
    line-height: 100px;
    position: absolute;
    left: calc(50% - 300px);
    top: calc(50% - 50px);
    font-size: 60px;
    font-weight: 800;
    /*  */
    background-image: url('./src/image.jpg'), url('./src/image.jpg');
    background-position: center center, 0 0;
    /* chrome特有属性、制作背景字体 */
    -webkit-background-clip: text, padding-box;
    -webkit-text-fill-color: transparent;
    transition: all 2.3s;
}

div.box:hover {
    background-position: 0 0, center center;
}