Question

我使用纯CSS在一个简单的HTML应用程序中为一个项目开始了视觉设计。我决定我想将所有CSS代码移到我刚刚创建的全新React应用程序中，但是现在我的React应用程序中存在一些无法使用某些样式的麻烦

我正在对此进行改编： https://codepen.io/creotip/full/cfuAi

当我在HTML应用程序中对其进行测试时，它运行良好。唯一不显示的是“按钮”底部的阴影和底部两个角的边框半径。我附带的样式给我带来了麻烦。除阴影外，其他所有样式都很好

来自我的app.js的示例div

<div>
  <a href="#" className="btn left">
    <span className="left icon fa fa-recycle"></span>
    <span className="right title"><span className="arrow-right"> 
    </span>Test link</span>
  </a>
</div>

我的CSS

span.left{
 float:left;        
 border-radius:6px 0 0 6px;
 -moz-border-radius:6px 0 0 6px;
 -webkit-border-radius:6px 0 0 6px;
}

span.icon{
 font-size:23px;
 background-color:#392315;
 -webkit-box-shadow:0 3px 0 0 #25170e; 
 box-shadow:0 3px 0 0 #25170e;
 text-shadow:0px 1px 1px #888;
}

span.title{
 -webkit-box-shadow:0 3px 0 0 #401d0d;
 box-shadow:0 3px 0 0 #401d0d;
 background-color:#5c2912;
}

我在这里使用某种与React不兼容的样式吗？

React中的CSS盒子阴影

0 个答案: