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

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

    目录

    一、网格布局

    二、背景

    1.图片背景

    2.边框背景图

    三 、阴影

    1.盒子阴影

    2.字体阴影

     拓展：自定义字体

    一、网格布局

    开启网格布局

    display: grid;

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

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

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

    1. /*写法一*/
    2. grid-template-columns: 100px;
    3.  
    4. /*写法二*/
    5. grid-template-columns: repeat(1, 100px);

    设置li标签的位置居中

    1. justify-content: center;
    2.  
    3. align-content: center;

    网格标记

    1. html>
    2. <html lang="zh-cn">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.     <title>基本模板title>
    9.  
    10. head>
    11.     <style>
    12.         .wrap {
    13.             width: 320px;
    14.             height: 320px;
    15.             background-color: pink;
    16.             /* 设置网格盒子 */
    17.             display: grid;
    18.             /* 设置三行三列标签 */
    19.             grid-template-rows: repeat(3, 100px);
    20.             grid-template-columns: repeat(3, 100px);
    21.             /* 1 : 1 : 1 */
    22.             /* grid-template-columns: repeat(3,1fr);  */
    23.             /* 1 : 2 : 1 */
    24.             /* grid-template-columns: 1fr  2fr 1fr; */
    25.             /* grid-template-columns: 100px  100px 100px; */
    26.  
    27.             /* 设置行间距 */
    28.             row-gap: 10px;
    29.             /* 设置列间距 */
    30.             column-gap: 10px;
    31.  
    32.             /* 设置网格标记 (划分网格容器的区域)*/
    33.             grid-template-areas: 'a b c'
    34.                 'e f g'
    35.                 'h i j';
    36.  
    37.         }
    38.  
    39.  
    40.         .bg-red {
    41.             background-color: red;
    42.             /* 设置标签到f的位置 */
    43.             grid-area: j;
    44.         }
    45.  
    46.         .bg-green {
    47.             background-color: green;
    48.             /* 设置标签到g的位置 */
    49.             grid-area: g;
    50.         }
    51.  
    52.         .bg-blue {
    53.             background-color: blue;
    54.             grid-area: f;
    55.         }
    56.  
    57.         .bg-yellow {
    58.             background-color: yellow;
    59.             grid-area: c;
    60.         }
    61.  
    62.         .bg-orange {
    63.             background-color: orange;
    64.             grid-area: h;
    65.         }
    66.  
    67.         .bg-deepskyblue {
    68.             background-color: deepskyblue;
    69.             grid-area: i;
    70.         }
    71.     style>
    72.  
    73. <body>
    74.  
    75.     <div class="wrap">
    76.         <div class="item bg-red">div>
    77.         <div class="item bg-green">div>
    78.         <div class="item bg-blue">div>
    79.         <div class="item bg-yellow">div>
    80.         <div class="item bg-orange">div>
    81.         <div class="item bg-deepskyblue">div>
    82.     div>
    83.  
    84.  
    85. body>
    86.  
    87. html>

    二、背景

    1.图片背景

    设置背景图片

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

    设置背景不重复

     background-repeat: no-repeat;

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

    1. /*从边框开始渲染*/
    2. background-origin: border-box;
    3. /*从内边距开始渲染*/
    4. background-origin: padding-box; 
    5. /*默认属性，从内容区开始渲染*/
    6. background-origin: content-box;

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

    background-clip: content-box;

    2.边框背景图

    设置标签边框图片

    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;

    三 、阴影

    1.盒子阴影

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

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

    2.字体阴影

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

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

     拓展：自定义字体

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

  • 相关阅读:
    windows设置开机启动程序
    这份SVN命令备忘清单，请查收
    【python办公web自动化-selenium学习笔记】
    java毕业生设计医院新型冠状病毒疫苗接种管理系统计算机源码+系统+mysql+调试部署+lw
    初识Java
    企业计算机服务器中了faust勒索病毒怎么解密，faust勒索病毒解密流程
    【C++】类和对象（下）
    一文速学-Pandas多文件批次聚合处理详解+实例代码
    数据增广：Mixup, Cutout 和 CutMix
    Java 18 新特性：简单Web服务器 jwebserver
  • 原文地址：https://blog.csdn.net/weixin_245249828/article/details/136766069