我无法弄清楚如何使用左下角的三角形制作CSS引号气泡.我发现大量的CSS用于语音气泡,但要么它们不随文本扩展,要么三角形不在左下角(我需要它的地方).
我发现了一个我非常喜欢的语音泡泡,但它的左边是三角形,因为它是为聊天编码的.如果有人可以向我解释如何调整此代码以使气泡到达左下角,我们将不胜感激!
.bubble{
background-color: #F2F2F2;
border-radius: 5px;
box-shadow: 0 0 6px #B2B2B2;
display: inline-block;
padding: 10px 18px;
position: relative;
vertical-align: top;
float: left;
margin: 5px 45px 5px 20px;
}
.bubble::before {
background-color: #F2F2F2;
content: "\00a0";
display: block;
height: 16px;
position: absolute;
top: 11px;
transform: rotate( 29deg ) skew( -35deg );
-moz-transform: rotate( 29deg ) skew( -35deg );
-ms-transform: rotate( 29deg ) skew( -35deg );
-o-transform: rotate( 29deg ) skew( -35deg );
-webkit-transform: rotate( 29deg ) skew( -35deg );
width: 20px; …我在搜索框中发现了这个很棒的CSS,但是当我点击搜索框时,它周围会出现一个橙色边框(这不太吸引人,哈哈).如果有人可以建议我如何摆脱边界,将不胜感激.CSS如下:
#search input[type="text"] {
background: url(search-white.png) no-repeat 10px 6px #fcfcfc;
border: 1px solid #d1d1d1;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #bebebe;
width: 150px;
padding: 6px 15px 6px 35px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all …我正在处理我的导航,并且我添加了一种效果,当您将鼠标悬停在链接上时,底部会添加蓝色边框.它有效,但我遇到的唯一问题是当你将鼠标悬停在一个链接上时,边框会将页面上的所有其他元素向下推3像素(边框的大小).
如果有人能告诉我如何解决这个问题,将不胜感激.这是相关的代码:
HTML
<div id="nav" class="wrapper">
<div class="site-navigation">
<a href="#">About</a>
<a href="#">Work</a>
<div class="site-title">Noelle Devoe</div>
<a href="#">Blog</a>
<a href="#">Contact</a>
</div>
</div>
CSS
.wrapper{
width: 1000px;
background-color: rgb(255,255,255);
margin: 0 auto;
overflow: hidden;
}
.site-navigation {
text-align: center;
overflow:hidden;
}
.site-navigation a{
font-family: 'Arvo', serif, Georgia;
width: 125px;
float: left;
padding: 50px 0 50px 0;
letter-spacing: 4px;
text-transform: uppercase;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
color: rgb(82,82,82);
}
.site-navigation a:hover{
font-weight: bold;
border-bottom: 3px solid rgb(4,141,195);
text-shadow: rgb(200, 200, 200) 1px 1px …在Chrome中,我的网站正在按照我的意愿运作.但出于某种原因,在Firefox中,CSS并没有任何关联,我不能为我的生活找出原因.
当我进入检查器时,Firefox中唯一不同的是浏览器</link>在CSS链接的末尾添加了一个,但是我无法摆脱它因为我没有实际编码.
有谁知道可能导致这个问题的原因是什么？
该网站是:http://www.renegademagsu.com
这是我的标题部分HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Renegade Magazine</title>
<link rel="stylesheet" type="type/css" href="<?php bloginfo('template_directory'); ?>/reset.css" />
<link rel="stylesheet" type="type/css" href="<?php bloginfo('template_directory'); ?>/style.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
CSS
/*
Theme Name: Renegade
Theme URI: N/A
Author: Noelle Devoe
Author URI: http://www.noellesnotes.com
Version: 1.0
*/
body {
background-color: #000;
font-family:'Source Sans Pro', Arial;
font-size: 18px;
}
b, strong {
font-weight: bold;
}
.container {
width: 960px;
margin: 0 auto;
}
header …