vue页面使用到的三种css样式

 

 

<div  class="coretop1">
    <div style="display:inline-block;width:90%;margin-left:5%;">
    <p class="coreziti1">{{$t("CORE.DRIVERLISTINFO02")}}</p>  </div>
    
    <div style="display:inline-block;width:50%;margin-left:50%;"> 
        
          
          <div class="driverListPh1"><img src="../assets/images/coreP02.png" alt />
          
    </div>  
    </div>
    </div> 



.coretop2,
.coretop1{
background-image: radial-gradient(closest-side at 50% 70%,#bfc7c6,#899796);
}



.coreziti1{
font-size: 50px;

}

.driverListPh1 img {
  width: 100%;
  height: 100%;
}



文字底部居中  text-align: center;

<div
  class="titleInfo1"
  >{{$t("FREEDOMINFO.CONTROLINFO")}}
</div>

.titleInfo1 {
  text-align: center;
  margin: 30px 50px;
  font-size: 50px;
}

 

 

 

<div class="highTorque">
   <!-- <img src="../../assets/images/servo03.jpg" width="100%" alt /> -->
      <div class="highTorqueMain">
        <h2>
          <span>{{$t("SERVOMOTOR.HIGH_TITLE")}}</span>
        </h2>
        <div class="highTorqueInfoMain">
          <div class="highTorqueInfo">
            <div class="TextHigh1">
              <div>Ultra-Compact</div>
              <div>Force Control</div>
              <div>Lightweight</div>

            </div>
            <div class="centerPhHigh">
              <img src="../../assets/images/servo04.png" width="100%" alt />
            </div>
            <div clas_isMobile() {      
        let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)      
        return flag;    
        },s="TextHigh2">
              <div>Native Standard Ethernet Protocol</div>
              <div>Supporting 100Mbps</div>
              <div>Supporting WIFI</div>

            </div>
          </div>
      </div>
    </div>
</div>

background-image: radial-gradient(farthest-side circle at 82% 101%,#BEC1C8,#899297);

.highTorque {
  position: relative;
  min-height: 300px;
  background-image: radial-gradient(farthest-side circle at 82% 101%,#BEC1C8,#899297);
  box-shadow: inset 0 -1px 0 0 rgba(205, 208, 207, 0.2);
  padding: 30px 0;
}

.highTorqueMain {
  display: flex;
  flex-direction: column;
}

.highTorqueMain h2 {
  text-align: center;
  margin: 30px 0 0;
}
.highTorqueMain h2 span {
  width: 500px;
  display: inline-block;
}

.highTorqueInfoMain {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  margin-top: 30px;
}
.highTorqueInfo {
  display: flex;
  justify-content: center;
}

.centerPhHigh {
  width: 30%;
  margin: 0 10%;
}

.TextHigh1 {
  display: flex;
  width: 350px;
  height: 800px;
  font-size: 38px;
  margin: 0 auto;
  flex-direction: column;
   justify-content: space-between;
  align-content: space-between;
}
.TextHigh2 {
  display: flex;
  width: 350px;
  height: 800px;
  font-size: 38px;
  margin: 0 auto;
  flex-direction: column;
   justify-content: space-between;
  align-content: space-between;
}





.DigitalOneInfo {
  margin: 1% 20%;
  text-align: center;
}

 

 

 

<div class="corexia">


    <div class="driverTit">
          <div class="driverTitCon">
          
            <h2>
               <div class="white">{{$t("SERVOMOTOR.DRIVERTITCON_TITLE_01")}} {{$t("SERVOMOTOR.DRIVERTITCON_TITLE_02")}}</div>
            </h2>
          </div>
    </div>
    
    <div  class="coretop1">
    <div style="display:inline-block;width:50%;margin-left:20%;">
    <p class="coreziti1">{{$t("SERVOMOTOR.WITH ")}}</p>  </div>

    <div style="display:inline-block;width:50%;margin-left:50%;"> 
        
          
          <div class="driverListPh1"><img src="../../assets/images/servo06.png" alt />
          
    </div>  
    </div>
    </div>   

</div>  

background-image: radial-gradient(farthest-side circle at 50% 105%,#BEC1C8,#899297);

background-image: radial-gradient(farthest-side at 50% 50%,#BEC1C8,#899297);


 .corexia{
  position: relative;
  min-height: 300px;
    background-image: radial-gradient(farthest-side circle at 50% 50%,#BEC1C8,#899297);
  // background-image: radial-gradient(50% 105%, #bec1c8 0%, #899297 100%);
  box-shadow: inset 0 -1px 0 0 rgba(205, 208, 207, 0.2);
  padding: 30px 0;
}

.driverTit {
  display: flex;
  flex-direction: column;
  text-align: center;
  margin: 0 30px;
  align-items: center;
}

.driverTitCon {
  margin: 6px 0;
}

 .coretop2,
.coretop1{

 background-image: radial-gradient(farthest-side circle at 50% 50%,#BEC1C8,#899297);
}

 .coreziti1{
font-size: 60px;

}

.driverListPh1 {
  width: 360px;
  height: 360px;
  padding: 1px;
  background-image: radial-gradient(farthest-side circle at 50% 50%,#BEC1C8,#899297);
border:2px solid rgba(205,208,207,0.1);
border-radius: 180px;
box-sizing: border-box;
overflow: hidden;
}

.driverListPh1 img {
  width: 100%;
  height: 100%;
}