我从中产生了一个泡泡聊天 http://www.ilikepixels.co.uk/drop/bubbler/

我在页面中放了一个数字

.bubble {
  position: relative;
  width: 20px;
  height: 15px;
  padding: 0;
  background: #FFF;
  border: 1px solid #000;
  border-radius: 5px;
}

.bubble:after {
  content: "";
  position: absolute;
  top: 4px;
  left: -4px;
  border-style: solid;
  border-width: 3px 4px 3px 0;
  border-color: transparent #FFF;
   display: block;
  width: 0;
  z-index: 1;
}

.bubble:before {
  content: "";
  position: absolute;
  top: 4px;
  left: -5px;
  border-style: solid;
  border-width: 3px 4px 3px 0;
  border-color: transparent #000;
  display: block;
  width: 0;
  z-index: 0;
}

我想要 background-color气泡的数量根据通过其中的数量而变化rgb

所以如果我的div是

<div class="bubble" style="background-color: rgb(100,255,255);"> 100 </div>

我想要颜色是 rgb(100,255,255)

问题是这不会影响三角形。

如何编写内联CSS，使其包括：before和：after？

你不能 使用内联样式，您可以直接定位元素。您不能在那里使用其他选择器。

但是，您可以做的是在样式表中定义不同的类，这些类定义不同的颜色，然后将该类添加到元素中。

您可以使用CSS变量（更精确地称为CSS自定义属性）。

• 在样式属性中设置变量： style="--my-color-var: orange;"
• 在样式表中使用变量： background-color: var(--my-color-var);

浏览器兼容性

最小示例：

div {
  width: 100px;
  height: 100px;
  position: relative;
  border: 1px solid black;
}

div:after {
  background-color: var(--my-color-var);
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}

<div style="--my-color-var: orange;"></div>

你的例子：

.bubble {
  position: relative;
  width: 30px;
  height: 15px;
  padding: 0;
  background: #FFF;
  border: 1px solid #000;
  border-radius: 5px;
  text-align: center;
  background-color: var(--bubble-color);
}

.bubble:after {
  content: "";
  position: absolute;
  top: 4px;
  left: -4px;
  border-style: solid;
  border-width: 3px 4px 3px 0;
  border-color: transparent var(--bubble-color);
   display: block;
  width: 0;
  z-index: 1;
  
}

.bubble:before {
  content: "";
  position: absolute;
  top: 4px;
  left: -5px;
  border-style: solid;
  border-width: 3px 4px 3px 0;
  border-color: transparent #000;
  display: block;
  width: 0;
  z-index: 0;
}

<div class='bubble' style="--bubble-color: rgb(100,255,255);"> 100 </div>

关键是要background-color: inherit;在伪元素上使用。
请参阅：http：//jsfiddle.net/EdUmc/

如果确实需要内联它（例如，因为要动态加载一些用户定义的颜色），则始终可以<style>在内容之前添加一个元素。

<style>#project-slide-1:before { color: #ff0000; }</style>
<div id="project-slide-1" class="project-slide"> ... </div>

PHP和一些（受wordpress启发的）伪函数的示例用例：

<style>#project-slide-<?php the_ID() ?>:before { color: <?php the_field('color') ?>; }</style>
<div id="project-slide-<?php the_ID() ?>" class="project-slide"> ... </div>

从HTML 5.2开始，将样式元素放置在体内是有效的，尽管仍然建议将样式元素放置在头部。

参考：https : //www.w3.org/TR/html52/document-metadata.html#the-style-element

我通过border-color解决了类似的问题：

，请参阅：

<li style="border-color: <?php echo $hex ?>;">...</li>

li {
    border-width: 0;
}

li:before {
    content: '';
    display: inline-block;
    float: none;
    margin-right: 10px;
    border-width: 4px;
    border-style: solid;
    border-color: inherit;
}