平滑调整边框半径

时间:2017-12-22 09:53:49

标签: html css

我不知道如何准确解释此问题,请参阅图片以了解问题。我希望边框半径是平滑的,即边框的像素不应该像这个图像中给出的那样断开。如果是这样的话?或者这个问题还有其他选择吗? Image

<footer class="footer">
        <div class="container">
            <p class="copyright pull-left item_left">© 2017 Uniqueness. All rights reserved.</p>
            <ul class="pull-right social-links text-center item_right">
                <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                <li><a href="#"><i class="fa fa-instagram"></i></a></li>
                <li><a href="mailto:info@unqsbh.com"><i class="fa fa-envelope"></i></a></li>
                <!-- <li><a href="#"><i class="fa fa-behance"></i></a></li> -->
            </ul>
        </div>
    </footer>

我已经应用了下面给出的风格

.footer {
  background-color: #141414;
  border-top: 1px solid #2c2c2c;
  color: #fff;
  padding: 25px 0;
}
.footer .copyright {
  margin: 4px 0 0;
  font-weight: 300;
  font-family: Lato, sans-serif;
  text-transform: uppercase;
}
.pull-left {
  float: left !important;
}
.footer .social-links {
  margin: 0;
}
.social-links {
  margin-top: 17px;
  position: relative;
  z-index: 9;
}
.pull-right {
  float: right !important;
}
.text-center {
  text-align: center;
}
.footer .social-links li {
  display: inline-block;
  margin-right: 8px;
}
.social-links li {
  display: inline-block;
  margin-right: 10px;
}
.footer .social-links li a {
  border: 1PX solid #fff;
  border-radius: 50%;
  color: #fff;
  display: block;
  font-size: 16px;
  height: 36px;
  line-height: 35px;
  margin: 0 auto;
  width: 36px;
}
.logo{
  margin-top: 8px;  
}
.social-links li a {
  display: block;
  height: 42px;
  width: 42px;
  text-align: center;
  line-height: 40px;
  font-size: 18px;
  border: 1px solid #e5e5e5;
  border-radius: 50%;
}

0 个答案:

没有答案