今天在手机开发,需要做个带边框的圆角效果如下
在chrome的做效果设置css
.alertEnter{ width: 80%; background-color: #fffbe4; border: 2px solid #5a493f; -webkit-box-shadow: 0px 0px 10px #5a493f; margin: auto; margin-top: 100px; text-align: center; padding: 10px; max-width: 300px; border-radius: 4px; border-color:#5a493f; -webkit-border-radius: 4px; }
在电脑上效果正常,但是在小米手机的浏览器中会显示出直角,其他手机没发现这个情况,图片如下
调整border属性无法解决问题,后来发现box-shadow可以模拟出border,果断启用border,改用内阴影,修改后css
.alertEnter{ width: 80%; background-color: #fffbe4; -webkit-box-shadow: 0px 0px 0px 2px #5a493f inset,0px 0px 10px #5a493f; margin: auto; margin-top: 100px; text-align: center; padding: 10px; max-width: 300px; border-radius: 4px; border-color:#5a493f; -webkit-border-radius: 4px; }