我的CSS问题很小。我的文字看起来并不是很好。我在其他按钮上使用了几乎相同的样式（添加了更多的CSS和java效果）（其他按钮看起来很棒）。就文本而言，它似乎完全忽略了我的造型。
我的文字看起来像在顶部，并且没有我添加的阴影或样式的下划线...这是我的style.css：
.ib-container{
position: relative;
margin: 30px auto;
}
.ib-container:before,
.ib-container:after {
content:"";
display:table;
}
.ib-container:after {
clear:both;
}
.ib-container article{
-moz-box-shadow:inset 0px 1px 0px 0px #fce2c1;
-webkit-box-shadow:inset 0px 1px 0px 0px #fce2c1;
box-shadow:inset 0px 1px 0px 0px #fce2c1;
background-color: #dd4814;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:12px;
color:#ffffff;
border:1px solid #dd4814;
font-family:Ubuntu, sans-serif;
font-weight:bold;
height: 65px;
width: 65px;
padding:6px 6px;
text-decoration:none;
text-shadow:1px 1px 0px #dd4800;
text-align: center;
vertical-align:middle;
z-index: 1;
-webkit-backface-visibility: hidden;
-webkit-transition:
opacity 0.5s linear,
-webkit-transform 0.5s ease-in-out,
box-shadow 0.5s ease-in-out;
-moz-transition:
opacity 0.5s linear,
-moz-transform 0.5s ease-in-out,
box-shadow 0.5s ease-in-out;
-o-transition:
opacity 0.5s linear,
-o-transform 0.5s ease-in-out,
box-shadow 0.5s ease-in-out;
-ms-transition:
opacity 0.5s linear,
-ms-transform 0.5s ease-in-out,
box-shadow 0.5s ease-in-out;
transition:
opacity 0.5s linear,
transform 0.5s ease-in-out,
box-shadow 0.5s ease-in-out;
margin-left: 5px;
margin-top: 5px;
display:inline-block
}
.ib-container article p{
-webkit-transition:
opacity 0.2s linear,
text-shadow 0.7s ease-in-out,
color 0.7s ease-in-out;
-moz-transition:
opacity 0.2s linear,
text-shadow 0.7s ease-in-out,
color 0.7s ease-in-out;
-o-transition:
opacity 0.2s linear,
text-shadow 0.7s ease-in-out,
color 0.7s ease-in-out;
-ms-transition:
opacity 0.2s linear,
text-shadow 0.7s ease-in-out,
color 0.7s ease-in-out;
transition:
opacity 0.2s linear,
text-shadow 0.7s ease-in-out,
color 0.7s ease-in-out;
text-align: center;
vertical-align:middle;
}
/* Hover Style for all the items: blur, scale down*/
.ib-container article.blur{
-webkit-transform: scale(0.9);
-moz-transform: scale(0.9);
-o-transform: scale(0.9);
-ms-transform: scale(0.9);
transform: scale(0.9);
opacity: 0.7;
text-align: center;
vertical-align:middle;
}
/* Hover Style for single item: scale up */
.ib-container article.active{
box-shadow: 0px 0px 5px 2px rgba(255,255,255,1);
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
-o-transform: scale(1.05);
-ms-transform: scale(1.05);
transform: scale(1.05);
z-index: 100;
opacity: 1;
text-align: center;
vertical-align:middle;
}
这是我的HTML ...如果我不清楚我的意思 - 让我知道......基本上它只是看起来没有风格。
<!DOCTYPE html>
<style type="text/css">
body {
font-family:verdana,arial,sans-serif;
font-size:10pt;
margin:10px;
background-color:#000000;
background-image:url('http://www.wallsave.com/wallpapers/2560x1600/fedora/377491/fedora-ubuntu-heavy-metal-distrotest-377491.jpg');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:-1750px;
}
a {
color:white;
}
</style>
<style>
body{font-family: Ubuntu, sans-serif; }</style><link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Ubuntu:regular,bold&subset=Latin">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Item Blur Effect with CSS3 and jQuery - Using Box Shadows, Transform and Transitions" />
<meta name="keywords" content="blur, css3, transition, jquery, box shadow, text shadow, articles, scale, transform, animation" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="js/modernizr.custom.34978.js"></script>
</head>
<body>
<div class="container">
<section class="ib-container" id="ib-container">
<article>
<a target="_blank" href="http://mail.xxx.com/~bcluff/knowledge/support/">home.</a>
</article>
<article>
<a target="_blank" href="http://gmail.com/">gmail.</a>
</article>
<article>
<a target="_blank" href="http://knowledge.xxx.com/">knowledge.</a>
</article>
<article>
<a target="_blank" href="https://utopia.xxxasp.com/login.php?redirect_location=https%3A%2F%2Futopia.xxxasp.com%2F">utopia.</a>
</article>
<article>
<a target="_blank" href="https://webmail.xxxasp.com/plugins/make_pass/makepass_prompt.php">password.</a>
</article>
<article>
<a target="content" href="http://mail.xxx.com/~bcluff/knowledge/support/extensionlist/">extensions.</a>
</article>
<article>
<a target="content" href="http://ip.xxx.com/read_sites.php">viewsites.</a>
</article>
<article>
<a target="_blank" href="http://mail.xxx.com/~bcluff/knowledge/support/oldsite">classic view.</a>
</article>
</section>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var $container = $('#ib-container'),
$articles = $container.children('article'),
timeout;
$articles.on( 'mouseenter', function( event ) {
var $article = $(this);
clearTimeout( timeout );
timeout = setTimeout( function() {
if( $article.hasClass('active') ) return false;
$articles.not( $article.removeClass('blur').addClass('active') )
.removeClass('active')
.addClass('blur');
}, 65 );
});
$container.on( 'mouseleave', function( event ) {
clearTimeout( timeout );
$articles.removeClass('active blur');
});
});
</script>
</body>
</html>
答案 0 :(得分：1)
嗯，首先，你是为段落标签设计样式但没有任何：
.ib-container article p {}
<article>
<a target="_blank" href="http://mail.sicom.com/~bcluff/knowledge/support/">home.</a>
</article>
此外，锚点从浏览器中获得特殊样式，因此您实际上需要指定您希望链接样式化。这样做可以解决问题，但如果页面上有其他内容，您可能需要稍微提高一点。
a {
text-decoration: none;
color: #bada55;
/* the next 3 lines make the link fill
the container, so it's all clickable */
display: block;
width: 100%;
height: 100%
/* set this to the desired height of the
button to center the text vertically,
vertical-align: middle doesn't work... */
line-height: 20px;
}
a:hover {
text-decoration: underline;
}
答案 1 :(得分：0)
您需要添加以下内容：
.ib-container article a {
text-decoration: none;
}
您需要一个比浏览器自己的链接样式更具体的CSS规则（text-decoration：link）