网页资讯视频图片知道文库贴吧地图采购
进入贴吧全吧搜索
css吧 关注：63,456贴子：458,637
  • 25回复贴，共1页

IE11 设置 圆角与背景出现的问题，求解方案

传统的用CSS3做个八卦图案，在设置before和after的时候，加背景色是为了融合到图案里去，在别的浏览器是没有图中看到的白边的，只有IE上是这样，本人的是IE11


这是正常的图案，在其他浏览器是正常的


清除一下padding和margin


<!doctype html>
<html>
<head>
<title>太极图形</title>
<meta charset="utf-8">
<style>
.tj{
width:500px;
height:250px;
border:1px solid #000;
border-bottom:251px #000 solid;
border-radius:251px;
position:relative;
}
.tj:before{
content:'';
width:20px;
height:20px;
background:#fff;
border:115px solid #000;
position:absolute;
border-radius:125px;
top:125px;
}
.tj:after{
content:'';
width:20px;
height:20px;
background:#000;
border:115px solid #fff;
position:absolute;
border-radius:125px;
top:125px;
right:0;
}
</style>
</head>
<body>
<div class="tj"></div>
<script>
var tj=document.getElementsByTagName('div')[0];
var i=0;
setInterval(function(){
i++;
tj.style.transform='rotate('+i+'deg)';
},100);
</script>
</body>
</html>


哦 测试了一下 确实有 明天给你回复吧 mark一下


测试了一下 是背景图片的颜色 那咱们就可以设置没有背景图片 做成图片就可以了 渐变的本质就是图片
代码如下:
<!doctype html>
<html>
<head>
<title>太极图形</title>
<meta charset="utf-8">
<style>
*{
margin:0;
padding:0;
border:0px solid #fff;
}
.tj{
width:500px;
height:250px;
border:1px solid #000;
border-bottom:251px #000 solid;
border-radius:251px;
position:relative;
}
.tj:before{
content:'';
width:20px;
height:20px;
background:-ms-radial-gradient(#fff 80%,#000 80%);
border:115px solid #000;
position:absolute;
border-radius:125px;
top:125px;
display:inline-block;
}
.tj:after{
content:'';
width:20px;
height:20px;
background:-ms-radial-gradient(#000 80%,#fff 80%);
border:115px solid #fff;
position:absolute;
border-radius:125px;
top:125px;
right:0;
display:inline-block;
outline:none;
}
</style>
</head>
<body>
<div class="tj"></div>
<!-- <script>
var tj = document.getElementsByTagName('div')[0];
var i = 0;
setInterval(function(){
i++;
tj.style.transform='rotate('+i+'deg)';
},100);
</script> -->
</body>
</html>


我就记得可以只用css3的渐变背景做这个


background-image:
radial-gradient(circle at 50% 59%,#D2CAAB 3%, #364E27 4%, #364E27 11%,rgba(54, 78, 39, 0) 12%, rgba(54, 78, 39, 0)),
radial-gradient(circle at 50% 41%, #364E27 3%, #D2CAAB 4%, #D2CAAB 11%, rgba(210, 202, 171, 0) 12%, rgba(210, 202, 171, 0)),
radial-gradient(circle at 50% 59%, #D2CAAB 3%, #364E27 4%, #364E27 11%, rgba(54, 78, 39, 0) 12%, rgba(54, 78, 39, 0)),
radial-gradient(circle at 50% 41%, #364E27 3%, #D2CAAB 4%, #D2CAAB 11%, rgba(210, 202, 171, 0) 12%, rgba(210, 202, 171, 0)),
radial-gradient(circle at 100% 50%, #D2CAAB 16%, rgba(210, 202, 171, 0) 17%),
radial-gradient(circle at 0% 50%, #364E27 16%, rgba(54, 78, 39, 0) 17%),
radial-gradient(circle at 100% 50%, #D2CAAB 16%, rgba(210, 202, 171, 0) 17%),
radial-gradient(circle at 0% 50%, #364E27 16%, rgba(54, 78, 39, 0) 17%);


画圆的方法有很多种，各抒己见，算是收集一下，这问题就算完结了


扫二维码下载贴吧客户端

下载贴吧APP
看高清直播、视频！
  • 25回复贴，共1页
分享到: