有人知道为什么我的联系我们sidebar div链接在圆形边框和渐变之间有空白？ [英] Does anyone know why does my Contact Us sidebar div link has white space between rounded border and gradient?

问题描述

我有一个联系我们梯度div链接在我的侧边栏，圆形边框。圆角边框不是正好在渐变div的边缘。结果是在渐变和底部和右侧的边界之间有空白。我如何解决这个问题？

I have a contact us gradient div link on my sidebar with a rounded border. The rounded border isn't right on the edge of the gradient div all the way around. The result is there is white space in between the gradient and the border at the bottom and right side. How do I fix this?

我创建了一个小提琴，但它在小提琴有点不同。没有空格，div文本有下划线。

I created a fiddle but it is slightly different in the fiddle. There is no white spaces and the div text has an underline. Check it out for yourself.

小提琴：
http://jsfiddle.net/D0rZa/63mrE/

<div id="sidebar">
<p>Any Questions?</p>
<div class="sidebar-butt"><a href="http://osweb01.ostech.com.au/?page_id=16">Contact Us</a></div>
</div>

#sidebar {

    float: right;

    width: 238px;

    color: #000000;

    padding-right: 5px;

    padding-left: 5px;

    height: 250px;

    border: 1px solid #28A9D6;

    border-radius: 8px;

    margin-top: 4px;

    margin-right: 5px;


}
.sidebar-butt {

    background-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0.27, #496FE3),
    color-stop(1, #121B3E));

    background-image: -o-linear-gradient(bottom, #496FE3 27%, #121B3E 100%);

    background-image: -moz-linear-gradient(bottom, #496FE3 27%, #121B3E 100%);

    background-image: -webkit-linear-gradient(bottom, #496FE3 27%, #121B3E 100%);

    background-image: -ms-linear-gradient(bottom, #496FE3 27%, #121B3E 100%);

    background-image: linear-gradient(to bottom, #496FE3 27%, #121B3E 100%);

    width:110px;

    height:28px;

    color:#fbfbfb !important; 

    border-radius:25px; 

    -webkit-border-radius:25px; 

    -moz-border-radius:25px; 

    border: 1px solid #002799; 

    font: Bold 16px Verdana;

    padding: 5px 10px;

    text-align: center;







}

.sidebar-butt:hover {

    background:linear-gradient(to bottom, #4970E3 0%, #121B3E 100%) repeat scroll 0% 0% transparent;

    background: -moz-linear-gradient(to bottom, #4970E3 0%, #121B3E 100%) repeat scroll 0% 0% transparent;

    background: -webkit-linear-gradient(to bottom, #4970E3 0%, #121B3E 100%) repeat scroll 0% 0%    transparent;

    width:110px;

    height:28px;

    color:#fbfbfb; 

    border-radius:25px; 

    -webkit-border-radius:25px; 

    -moz-border-radius:25px; 

    border: 1px solid #002799; 

    font: Bold 16px Verdana;

    background: #060652;

}

.sidebar-butt a {

    color: #fbfbfb;

}

我的网站：
http://osweb01.ostech.com.au/

推荐答案

#sidebar li {

    list-style-type: none;

    padding:0px;

    /* float:left; remove this */  

    background-image: url(images/narrow.gif);

    background-repeat: no-repeat;

    background-position: 8px 15px;

    /* border: 1px solid #AACCEE;  remove this */

    background-color: #FFF;

    width: 230px;

    margin-bottom: 20px;

}

这篇关于有人知道为什么我的联系我们sidebar div链接在圆形边框和渐变之间有空白？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！