- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我想更改显示在聊天框中的消息的边框,它应该像图片中的那样,请建议如何实现它,因为我不知道该怎么做。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<style type="text/css">
body{margin-top:20px;}
@import url(https://fonts.googleapis.com/css?family=Oswald:400,300);
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
body
{
font-family: 'Open Sans', sans-serif;
}
.chat_box .chat_message_wrapper ul.chat_message > li + li {
margin-top: 4px;
}
.chat_box_wrapper.chat_box_small.chat_box_active {
background:#e1e3e5;
height: 600px;
overflow-y: auto;
width: 450px;
}
.chat_box {
padding: 16px;
}
.chat_box .chat_message_wrapper::after {
clear: both;
}
.chat_box .chat_message_wrapper::after, .chat_box .chat_message_wrapper::before {
content: " ";
display: table;
}
.chat_box .chat_message_wrapper .chat_user_avatar {
float: left;
}
.chat_box .chat_message_wrapper {
margin-bottom: 20px;
}
.md-user-image {
border-radius: 50%;
width: 48px;
height:48px;
}
img {
border: 0 none;
box-sizing: border-box;
height: auto;
max-width: 100%;
vertical-align: middle;
}
.chat_box .chat_message_wrapper ul.chat_message, .chat_box .chat_message_wrapper ul.chat_message > li {
list-style: outside none none;
padding: 0;
}
.chat_box .chat_message_wrapper ul.chat_message {
float: left;
margin: 0 0 0 20px;
max-width: 67%;
}
.chat_box.chat_box_colors_a .chat_message_wrapper ul.chat_message > li:first-child::before {
border-right-color: #616161;
}
.chat_box .chat_message_wrapper ul.chat_message > li:first-child::before {
border-color: transparent #ededed transparent transparent;
border-style: solid;
border-width: 0 16px 16px 0;
content: "";
height: 0;
left: -14px;
position: absolute;
top: 0;
width: 0;
}
.chat_box.chat_box_colors_a .chat_message_wrapper ul.chat_message > li {
background: #FCFBF6 none repeat scroll 0 0;
color: #000000;
}
.chat_box .chat_message_wrapper ul.chat_message > li {
background: #ededed none repeat scroll 0 0;
border-radius: 4px;
clear: both;
color: #212121;
display: block;
float: left;
font-size: 13px;
padding: 8px 16px;
position: relative;
word-break: break-all;
}
.chat_box .chat_message_wrapper ul.chat_message, .chat_box .chat_message_wrapper ul.chat_message > li {
list-style: outside none none;
padding: 0;
}
.chat_box .chat_message_wrapper ul.chat_message > li {
margin: 0;
}
.chat_box .chat_message_wrapper ul.chat_message > li p {
margin: 0;
}
.chat_box.chat_box_colors_a .chat_message_wrapper .chat_message_time {
color: rgba(185, 186, 180, 0.9);
}
.chat_box .chat_message_wrapper .chat_message_time {
color: #e1e3e5;
text-align:center;
display: block;
font-size: 11px;
padding-top: 2px;
font-size:14px;
text-transform: uppercase;
}
.chat_box .chat_message_wrapper.chat_message_right .chat_user_avatar {
float: right;
}
.chat_box .chat_message_wrapper.chat_message_right ul.chat_message {
float: right;
margin-left: 0 !important;
margin-right: 24px !important;
}
.chat_box.chat_box_colors_a .chat_message_wrapper.chat_message_right ul.chat_message > li:first-child::before {
border-left-color: #83acc5;
}
.chat_box.chat_box_colors_a .chat_message_wrapper ul.chat_message > li:first-child::before {
border-right-color: #FCFBF6;
}
.chat_box .chat_message_wrapper.chat_message_right ul.chat_message > li:first-child::before {
border-color: transparent transparent transparent #ededed;
border-width: 0 0 29px 29px;
left: auto;
right: -14px;
}
.chat_box .chat_message_wrapper ul.chat_message > li:first-child::before {
border-color: transparent #ededed transparent transparent;
border-style: solid;
border-width: 0 29px 29px 0;
content: "";
height: 0;
left: -14px;
position: absolute;
top: 0;
width: 0;
}
.chat_box.chat_box_colors_a .chat_message_wrapper.chat_message_right ul.chat_message > li {
background: #83acc5 none repeat scroll 0 0;
}
.chat_box .chat_message_wrapper ul.chat_message > li {
background: #ededed none repeat scroll 0 0;
border-radius: 12px;
clear: both;
color: #212121;
display: block;
float: left;
font-size: 13px;
padding: 8px 16px;
position: relative;
}
</style>
</head>
<body>
<div class="container">
<div id="chat" class="chat_box_wrapper chat_box_small chat_box_active" style="opacity: 1; display: block; transform: translateX(0px);">
<div class="chat_box touchscroll chat_box_colors_a">
<div class="chat_message_wrapper">
<div class="chat_user_avatar">
<a href="https://web.facebook.com/iamgurdeeposahan" target="_blank" >
<img src="http://bootdey.com/img/Content/avatar/avatar1.png" class="md-user-image">
</a>
</div>
<span class="chat_message_time">13:38</span>
<ul class="chat_message">
<li>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio, eum? </p>
</li>
<li>
<p> Lorem ipsum dolor sit amet </p>
</li>
</ul>
</div>
<div class="chat_message_wrapper chat_message_right">
<div class="chat_user_avatar">
<a href="https://web.facebook.com/iamgurdeeposahan" target="_blank" >
<img src="http://bootdey.com/img/Content/avatar/avatar1.png" class="md-user-image">
</a>
</div>
<span class="chat_message_time">13:34</span>
<ul class="chat_message">
<li>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. natus nulla perspiciatis quae quasi, quis recusandae, saepe, sunt totam.
</p>
</li>
</ul>
</div>
<div class="chat_message_wrapper chat_message_right">
<div class="chat_user_avatar">
<a href="https://web.facebook.com/iamgurdeeposahan" target="_blank" >
<img src="http://bootdey.com/img/Content/avatar/avatar1.png" class="md-user-image">
</a>
</div>
<span class="chat_message_time">13:34</span>
<ul class="chat_message">
<li>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.atus nulla perspiciatis quae quasi, quis recusandae, saepe, sunt totam.
</p>
</li>
</ul>
</div>
<div class="chat_message_wrapper">
<div class="chat_user_avatar">
<a href="https://web.facebook.com/iamgurdeeposahan" target="_blank" >
<img src="http://bootdey.com/img/Content/avatar/avatar1.png" class="md-user-image">
</a>
</div>
<span class="chat_message_time">13:34</span>
<ul class="chat_message">
<li>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio, eum? </p>
</li>
<li>
<p> Lorem ipsum dolor sit amet </p>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
我的形象:
最佳答案
带有径向渐变背景的定位伪元素怎么样?
这应该让你接近。
.chat {
width: 50%;
height: 75px;
margin: 1em auto;
border-radius: 12px;
background: darkseagreen;
position: relative;
}
.left {
border-bottom-left-radius: 0;
}
.right {
border-bottom-right-radius: 0;
}
.chat::after {
content: '';
width: 1.5em;
height: 1.5em;
position: absolute;
bottom: 0;
}
.left::after {
left: 0;
transform: translateX(-100%);
background: radial-gradient(circle at 0 0, transparent, transparent 72%, darkseagreen 72%);
}
.right::after {
right: 0;
transform: translateX(100%);
background: radial-gradient(circle at 100% 0, transparent, transparent 72%, darkseagreen 72%);
}
<div class="chat left"></div>
<div class="chat right"></div>
关于css - 如何更改此聊天框的边框,使其看起来像附图中的那样,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39246210/
#include #include #include using namespace std::chrono; int main(int arc, char* argv[]) { con
我是 opencv 的新手。当我将 sRGB png 提供给它时,我发现以下代码交换了红色和蓝色 channel 。我应该责怪哪个函数,imread 还是 fromarray? 最佳答案 是的,O
我正在使用以下代码,它缩小了每一行,并且由于某种原因整个用户界面也丢失了。我该如何解决?
它是关于以下设置的:Linux 机器、bash、adb、带有 Busybox 的嵌入式 Linux 目标系统。对于目标系统,以下适用: adb shell echo $SHELL /bin/sh ad
当我在 Android Studio 上创建一个空 fragment 时,它会生成以下代码: /** * A simple {@link Fragment} subclass. * Activit
我正在尝试从 Meteor 应用程序的服务器端发布用户的 Facebook 提要: result = Meteor.http.call 'POST', "https://graph.faceb
目前我有两个不同的查询,它们返回完全相同的结果,但是,更改从中过滤结果的参数会使它们以非常不同的方式运行。 搜索 cartography 时的结果 查询 #1: 22 行/~860 毫秒; SELEC
我已经创建了结构: typedef struct { short s; int i; struct Ss { short s; }; } S;
我想在 Java 中打印反斜杠 t。但每当我尝试时,它实际上都将它作为\t 运算符。双反斜杠不起作用。我该怎么做。 最佳答案 例如通过添加另一个反斜杠来转义反斜杠 System.out.println
我想弄清楚为什么 UIActivityViewController 发送一个稍微转换过的字符串来分享给邮件和微信。 这是我的代码: let activityViewController = UIAct
创建标准 SQLite 游标后,我将使用以下方法遍历条目: while (cursor.moveToNext()) { } 所有行都被正确处理。我读过的所有文档都表明您需要发出 moveToFirst
我正在尝试创建一个基本论坛,但在 SQL 中仅打印一行时遇到问题。这是我的 PHP: {$title}"; } } else { print "failed to reach post
我的新 div 元素 ( ) 似乎隐藏在图像后面。我键入的任何内容都显示在图像后面。我想在背景图片之后继续工作。 这是我的代码: DISPLAY
UPD。一行代码解决了问题:.lean() axplanation here 我在 Model.find(...blablabla : [ {"_id":"578763de6e8e0542195ef4
我在 Ubuntu 16.04 中安装了 Tomcat 8.0.45。我使用 let's encrypt 生成的证书启用了 HTTPS 连接器。它就像一个魅力。但是今天Tomcat无法启动HTTPS连
今天,我在一台全新安装了 Windows 7 Ultimate 64 位的新笔记本电脑上安装了 Visual Studio 2010 Professional。我非常习惯于 Visual Studio
根据 Oracle,我应该能够将 .intValue() 和 .compareTo() 之类的方法应用于 double ,但是当我编写 dbl.toString( ) 例如,在 NetBeans 中,
正在为应用程序开发一些拖放功能,虽然可以使用“重影图像”来完成很多事情,将毒品从一个地方转移到另一个地方,但它们看起来总是有点“褪色” - 因此得名鬼影。是否有可能使这些具有与原始颜色相同的深度?谢谢
我是这方面的新手,很抱歉犯了一些愚蠢的错误。快乐学习。每当我使用 URL : localhost:3000/posts/whatever 时,我都会收到无法获取错误。在你问之前,是的,那是在我将内容放
背景 这自然是合法的: let closure: (Int, Int) -> () = { print($0 + $1) } closure(1, 2) // 3 鉴于,自进化提案实现以来 SE-01
我是一名优秀的程序员,十分优秀!