2015-08-21 65 views
1

我有一个按钮,在我的应用程序,目前它的非常基本的:HTML按钮(按键部分是暗的)

<button style="height:150px;width:150px;border-radius:10px;">Hello,World</button>

这意味着它使用W上的默认HTML CSS特效/它。我试图改变它与CSS /但每次我做按钮更大,总是有这个黑暗的一面在右侧和底部..我不知道为什么。如果我将其更改回默认值,则不在那里。

这里是的jsfiddle:

http://jsfiddle.net/htzgak6g/1/

我指的右侧和下侧。他们对我来说似乎比其他方面更黑暗。我想要做的是有一些类型的按钮,圆角和一个很好的颜色阴影。

+0

人们问这样的事情有63声誉和我一样的人解决办法更难的问题对他人有裸露50,因为大多数惯于接受的答案。 Stack devs请求,做点什么 –

+0

@KhrisAzuaje解决一些更简单的问题,你会得到选票 –

+0

查看我的个人资料,解决了从未被接受的最简单的问题,因为像@ halapjos1这样的人带我们就像只是谷歌机器人准备解决一切为了他们而没有任何交换。但那不是事实,我们想要的东西,我们渴望堆栈代表。 –

回答

2

问题是,浏览器将默认样式添加到在Firebug中标记的元素。您可以使用Selectors style panel查看添加的所有样式。

enter image description here

正如托尼说,你将需要使用reset.css忽略这样的造型。但对于此特定问题,请将border-color设置为透明。

button { 
 
    border-color: transparent; 
 
}
<button style="height:150px;width:150px;border-radius:10px;">Hello,World</button>

3

这是因为按键都配备了一些基本的默认浏览器的风格仍在发生作用,因为你还没有过缠身的他们。

在这种情况下,添加border: none将删除边框和深色。 (http://jsfiddle.net/htzgak6g/2/

查看reset css可解决这些问题,并为浏览器提供一致的空白页面。

+0

很酷,非常感谢你!我以为我需要重写一些东西,但我不确定究竟是什么。 – halapgos1

+0

@ halapgos1resets对此非常有用,他们摆脱了所有通过 –

+0

泄漏的事情,好吧,我也一定会考虑它!再次感谢! – halapgos1

2

只需添加border-style:none;像这样:

<button style="height:150px;width:150px;border-radius:10px;border-style:none;">Hello,World</button> 

Here is your updated JSfiddle

+1

非常感谢!真的很感激它! – halapgos1