这是我的结构:
<div class="parent">
<a href="#">
<p class="carousel_img">
<span class="img"></span>
Some text
</p>
</a>
这是我的风格:
.parent{
height: 270px;
width: 270px;
}
.img {
background-image: url(http://frontendtest.ru/anit/img/ps_3.jpg);
background-size: cover;
display: block;
height: 250px;
overflow: hidden;
border-radius: 50%;
-webkit-transform: scale(1.3);
-ms-transform: scale(1.3);
transform: scale(1.3);
-webkit-transition: -webkit-transform 0.3s;
transition: -webkit-transform 0.3s;
transition: transform 0.3s;
transition: transform 0.3s, -webkit-transform 0.3s;
background-repeat: no-repeat;
}
.carousel_img {
border-radius: 50%;
border: 4px solid #f6e9d6;
height: 260px;
width: 260px;
overflow: hidden;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
position: relative;
margin: 0 auto;
}
a:hover .carousel_img {
border-color: #2e8ce4;
}
.carousel_img:before {
height: 15px;
width: 15px;
border-left: 2px solid #fff;
border-bottom: 2px solid #fff;
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
margin: auto;
bottom: 20px;
z-index: 2;
}
.carousel_img:after {
content: '';
position: absolute;
left: 0;
right: 0;
display: none;
}
.carousel_img:after {
bottom: 0;
height: 56px;
background: #2e8ce4;
}
a:hover .carousel_img:before, a:hover .carousel_img:after {
display: block;
}
在Chrome,Firefox,Edge中我们可以看到蓝色之间的细白线:在图片底部的元素和蓝色边框之后我们:将鼠标悬停在图像上。这是我的笔http://codepen.io/DmitryShutov/pen/JKovYb上的链接。 如何去除细白线?