border-radius+border直角无法消去

最新推荐文章于 2023-04-27 15:01:35 发布

lzhw1985

最新推荐文章于 2023-04-27 15:01:35 发布

阅读量1.5k

点赞数

分类专栏： html5-css3 web 移动开发

web 同时被 3 个专栏收录

73 篇文章 1 订阅

订阅专栏

html5-css3

36 篇文章 0 订阅

订阅专栏

移动开发

12 篇文章 0 订阅

订阅专栏

今天在手机开发，需要做个带边框的圆角效果如下

在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;
 }