css3 网格布局及新增样式(前端必学 二)

 一.网格布局

  在javascript中有许多布局结构，不同的布局有着不同的要求，可以了解了解弹性布局，网格布局，父容器自动计算（嵌套标签）他们的不同点

1.布局有哪些呢？认识多种布局 

 1.弹性布局：    display: flex; 主轴、侧轴

 2.响应式布局：   @media  随屏幕变化有不同的布局效果

 3.流式布局：（百分比布局） -->指的是移动端布局  

 4.网格布局：设置父元素display:grid 控制子元素位置 ，有明显的行与列

 5.pc端布局：电脑端，有版心区，通栏显示区

2.下面重点介绍网格布局 

      /* 把ul标签（作为父元素）做成网格容器 */
 
          ul{
 
            display: grid;
            /* 设置多少行，每行的高度是多少 */
            /* grid-template-rows: 100px; */
            grid-template-rows: repeat(1,100px);
            /* 设置多少列，每列的宽度 是多少 */
            /* grid-template-columns: 100px; */
            grid-template-columns: repeat(1,100px);
            /* 设置li标签的位置居中 */
            justify-content: center;
            align-content: center;
            }
 
          ul li {
           background-color: green; 
          }复制

效果如下： 

 <style>
          .wrap{
            margin-top: 20px;
            width: 320px;
            height: 320px;
            background-color: #ccc;
            /* 设置网格盒子 */
            display: grid;
            /* 3行3列 */
            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;
            /* 可以设置该属性交换位置 */
            grid-area: j;
          }
          .bg-green{
            background-color: green;
            grid-area: h;
          }
          .bg-blue{
            background-color: blue;
            grid-area: a;
          }
          .bg-yellow{
            background-color: yellow;
            grid-area: i;
          }
          .bg-orange{
            background-color: orange;
          }
          .bg-deepskyblue{
            background-color: deepskyblue;
          }
 
 
 
          .item{
            /* background-color: green; */
            border: 1px solid red;
          }
    </style>
 
    <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>复制

效果如下： 

二.css3新样式

1.css变量

  /* 1) css中定义变量 */
    :root {
        --color: #ff5500;
        --fontSize: 100px;
        --bgColor: pink;
        --borderRadius: 10px;
        --marginBottom: 20px;
    }
//使用设置的变量
.box {
        font-size: 45px;
        font-weight: bold;
        /* 2) 使用变量 */
        margin-bottom: var(--marginBottom);
    }
    .box {
        color: var(--color);
    }复制

2.背景

 /* 1） 背景 */
    .box-1 {
        width: 100px;
        height: 100px;
        border: 20px dashed red;
        padding: 50px;
        background-image: url(./images/one1.jpg);
        background-repeat: no-repeat;
        /* 设置图片从边框开始渲染 (内边距、内容), 背景图的起点*/
        background-origin: border-box;
        /* background-origin: padding-box; */
        /* background-origin: content-box; */
        /* 把边框部分的背景图裁剪掉 (内边距、内容)*/
        background-clip: content-box;
        /* 处理精灵图的背景，可以使用这些新增背景属性 */
    }复制

3.边框图片

/* 2）边框背景图 */
    .box-2 {
        width: 200px;
        height: 400px;
        margin: 50px;
        background-color: #ccc;
       
        border: 20px solid transparent;
        /* 设置标签边框图片 */
        border-image-source: url(./images/border-image2.png);
        /* 裁剪边框背景图 */
        border-image-slice: 60 60 60 60;
        /* 设置边框背景图平铺repeat，round(推荐) repeat */
        border-image-repeat: round;
        /* 设置边框背景图的尺寸 */
        border-image-width: 20px;
        /* 设置边框背景图的位置 */
        border-image-outset: 10px;
    }复制

4.阴影(文本阴影 盒子阴影)

 /* 3) 阴影 */
    /* 盒子阴影 */
    .box-3 {
        margin: 50px;
        width: 100px;
        height: 100px;
        /* 设置阴影 （offsetX,offsetY,模糊度, 延伸(可选) , 阴影颜色, 内阴影(可选)） */
        /* offsetX: 正数 水平偏右，否则反之 */
        /* offsetY: 正数 水平偏下，否则反之 */
        /* box-shadow: 0px 0px 10px red ; */
        box-shadow: 0px 0px 10px 5px red inset;
    }
 
     /* 文本阴影 */
    .box-4 {
        width: 600px;
        height: 100px;
        background-color: #ccc;
        text-align: center;
        line-height: 100px;
        font-size: 50px;
        font-weight: bold;
        color: #f50;
        /* 文本阴影 */
        /* 设置阴影 （offsetX,offsetY, 模糊度, 阴影颜色） */
        text-shadow: 1px 1px 1px  white , -1px -1px 1px green;复制

设置文字阴影 

   在设置文本阴影时，还可以对文字进行设置字体样式，引入字体，定义字体

  /* web字体 */
    /* 1）定义字体 */
    @font-face {
        font-family: abc;
        src: url(./fonts/abc.ttf);
    }
 
  /* 2）使用字体 */
         font-family: abc;复制

5.渐变（线性渐变 径向渐变）

//线性渐变
.box-5 {
        width: 200px;
        height: 200px;
        /* 渐变(background 或 background-image) */
        /* background-image: linear-gradient(
            to right ,
            red, 
            green,
            yellow,
            purple
        ); */
 
        /* deg: 角度单位 */
        /* background-image: linear-gradient(
            135deg,
            red, 
            green,
            yellow,
            purple
        ); */
 
        background-image: linear-gradient(
            135deg,
            red 20%, 
            green 20%, 
            green 40%,
            yellow 40%,
            yellow 60%,
            purple 60%,
            purple
        );复制

 /* 径向渐变 （从中心往四周辐射进行颜色的改变）*/
    .box-6 {
        width: 200px;
        height: 200px;
        margin-top: 10px;
 
        /* center  left top right bottom */
        background-image: radial-gradient(
            at 100px 100px,
            red,
            green,
            yellow,
            purple
        );
    }复制