时间戳

首页 > 解决方案 > CSS 中两个分区之间的阴影

css - CSS 中两个分区之间的阴影

问题描述

在此处输入图像描述

我正在创建一个站点来监控员工，站点内部有很多界面，从这些界面中有一个添加项目的界面，即如图所示的界面，如图所示有两个界面中的部分，第一部分用白色着色，第二部分用蓝色着色。如何在两个部分之间创建阴影？

   <template>
      <v-app>
        <div class="mainPage">
          <!-- right section -->
          <div class="split left">
            <div class="left_body_content">
              <div class="left-body-content_logo">
                <img class="logo" src="../../../../src/assets/logo_base.png" />
              </div>
    
              <div class="left-body-content_illustrationImage">
                <v-img src="../../../../src/assets/create.svg"></v-img>
              </div>
            </div>
          </div>
    
          <div class="split-1 right">
            <div class="right_body_content">
              <div class="right_body_content_text">
                <div class="text">
                  <h1>Create project</h1>
                </div>
              </div>
    
              <div class="right_body_content_field">
                
    
                        <v-text-field
                  label="Project Name"
                  v-model="project_Name"
                  color="#5f48ea "
                  class="field"
                  >{{ project_Name }}
                  </v-text-field
                >
              </div>
              
              <div class="right_body_content_button">
    
              </div>
            </div>
          </div>
        </div>
      </v-app>
    </template>
    
    <style scoped>
    .mainPage {
      justify-content: flex-start;
      align-items: flex-start;
      position: relative;
      width: 100%;
      height: auto;
      padding: 0;
      margin: 0;
    }
    
    .split {
      height: 100%;
      width: 66%;
      position: fixed;
      z-index: 1;
      top: 0;
      overflow-x: hidden;
    }
    
    .left_body_content {
      display: flex;
      width: 100%;
    }
    
    .left {
      left: 0;
      background-color: #fff;
    }
    
    .left-body-content_logo {
      display: flex;
      width: 18%;
      padding-left: 2rem;
    }
    
    .logo {
      display: flex;
      width: 100%;
      z-index: -1;
    }
    
    .left-body-content_illustrationImage {
      display: flex;
      justify-content: center;
      align-content: center;
      align-items: center;
      background-size: cover;
      background-position: center;
      z-index: -1;
      width: 90%;
      height: 100%;
      position: absolute;
      padding-top: 7rem;
      padding-left: 5rem;
    }
    
    .split-1 {
      height: 100%;
      width: 34%;
      position: fixed;
      z-index: 1;
      top: 0;
      overflow-x: hidden;
      padding-top: 2rem;
    }
    
    .right_body_content {
      display: flex;
      width: 100%;
      height: 100%;
    }
    
    .right_body_content_text {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      text-align: center;
      width: 90%;
      height: 50%;
      padding-left: 2rem;
    }
    
    .text {
      display: flex;
      font-family: Aviliator;
      color: #5f48ea;
    }
    
    .right_body_content_field{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        position: fixed;
        width: 25%;
        height: 100%;
        padding-left: 2.5rem;
    
    }
    
    .field{
        display: flex;
        width: 40%;
        height: 30%;
    }
    
    .right {
      right: 0;
      background-color: blue;
    }
    </style>

标签： css

解决方案

将类阴影添加到具有类 split-1 的 div 并将样式中的阴影类定义为

.shadow{
  -webkit-box-shadow: -3px 0px 0px #ccc;  /* Safari 3-4, iOS 4.0.2 - 4.2, 
  -moz-box-shadow:    -3px 0px 0px #ccc;  /* Firefox 3.5 - 3.6 */
  box-shadow:         -3px 0px 0px #ccc;  /* IE 9, Firefox 4+, Chrome 6+ */
}

这将在具有类阴影的 div 左侧添加 3px 的阴影

您可以在此处阅读有关 box-shadow 的更多信息 - https://css-tricks.com/almanac/properties/b/box-shadow/

推荐阅读