前端小白的学习之路(CSS3 二)

提示：网格布局，背景与阴影

一、网格布局

二、背景

1.图片背景

[三、阴影](#三、阴影)

一、网格布局

开启网格布局

css 复制代码

display: grid;

设置多少行，每行的高度是多少

css 复制代码

/*写法一*/
rid-template-rows: 100px; 
/*写法二*/
grid-template-rows: repeat(1, 100px);

设置多少列，每列的宽度是多少

css 复制代码

/*写法一*/
grid-template-columns: 100px;

/*写法二*/
grid-template-columns: repeat(1, 100px);

设置li标签的位置居中

css 复制代码

justify-content: center;

align-content: center;

网格标记

html 复制代码

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>基本模板</title>

</head>
    <style>
        .wrap {
            width: 320px;
            height: 320px;
            background-color: pink;
            /* 设置网格盒子 */
            display: grid;
            /* 设置三行三列标签 */
            grid-template-rows: repeat(3, 100px);
            grid-template-columns: repeat(3, 100px);
            /* 1 : 1 : 1 */
            /* grid-template-columns: repeat(3,1fr);  */
            /* 1 : 2 : 1 */
            /* grid-template-columns: 1fr  2fr 1fr; */
            /* grid-template-columns: 100px  100px 100px; */

            /* 设置行间距 */
            row-gap: 10px;
            /* 设置列间距 */
            column-gap: 10px;

            /* 设置网格标记 (划分网格容器的区域)*/
            grid-template-areas: 'a b c'
                'e f g'
                'h i j';

        }


        .bg-red {
            background-color: red;
            /* 设置标签到f的位置 */
            grid-area: j;
        }

        .bg-green {
            background-color: green;
            /* 设置标签到g的位置 */
            grid-area: g;
        }

        .bg-blue {
            background-color: blue;
            grid-area: f;
        }

        .bg-yellow {
            background-color: yellow;
            grid-area: c;
        }

        .bg-orange {
            background-color: orange;
            grid-area: h;
        }

        .bg-deepskyblue {
            background-color: deepskyblue;
            grid-area: i;
        }
    </style>

<body>

    <div class="wrap">
        <div class="item bg-red"></div>
        <div class="item bg-green"></div>
        <div class="item bg-blue"></div>
        <div class="item bg-yellow"></div>
        <div class="item bg-orange"></div>
        <div class="item bg-deepskyblue"></div>
    </div>


</body>

</html>

二、背景

1.图片背景

设置背景图片

css 复制代码

background-image: url(./images/one1.jpg);

设置背景不重复

css 复制代码

 background-repeat: no-repeat;

设置图片从边框开始渲染 (内边距、内容), 背景图的起点

css 复制代码

/*从边框开始渲染*/
background-origin: border-box;
/*从内边距开始渲染*/
background-origin: padding-box; 
/*默认属性，从内容区开始渲染*/
background-origin: content-box;

把边框部分的背景图裁剪掉 (内边距、内容)

css 复制代码

background-clip: content-box;

2.边框背景图

设置标签边框图片

css 复制代码

border-image-source: url(./images/border-image2.png);

裁剪边框背景图

css 复制代码

border-image-slice: 60 60 60 60;

设置边框背景图平铺repeat，round(推荐) repeat

css 复制代码

border-image-repeat: round;

设置边框背景图的尺寸

css 复制代码

border-image-width: 20px;

设置边框背景图的位置(不能为负值)

css 复制代码

border-image-outset: 10px;

三、阴影

1.盒子阴影

box-shadow:水平位置垂直位置 [模糊程度外延程度阴影颜色内阴影]

css 复制代码

box-shadow: 10px 10px 10px 5px gray inset;

2.字体阴影

text-shadow:offsetX,offsetY, 模糊度, 阴影颜色

css 复制代码

 text-shadow: 1px 1px 1px  white , -1px -1px 1px green;

拓展：自定义字体

css 复制代码

/*设置font-face可以通过font-family来设置自定义字体*/
@font-face {
   font-family: abc;
   src: url(./fonts/abc.ttf);/*网上找到字体资源*/
}

前端小白的学习之路(CSS3 二)

一、网格布局

二、背景

1.图片背景

**2.**边框背景图

三 、阴影

1.盒子阴影

2.字体阴影

拓展：自定义字体

2.边框背景图

三、阴影