CSS3聊天气泡框以及inherit、currentColor关键字


尽管绝大多数人都知道inherit这个关键字,但是很多人可能自始自终都没实际用过它,包括我自己,从来没有,在查询CSS文档时,习惯性的忽略它,直到看到《CSS揭秘》这本书。

聊天气泡框
效果如上图所示,主要用到CSS3的伪类::after::before,以及圆角边框border-radius属性。对于下面的气泡框,可以有两种方式实现小三角:

  • 传统方式,利用CSS画小三角,利用到了透明背景和边框属性transparent的应用。
  • CSS3的transform属性的使用

然后通过position定位到合适的位置。

此外,本文还会讲一下CSS的inherit属性值的知识。

实现气泡框

HTML结果也很简单,就一个DIV。下三角部分使用了CSS画三角的知识,
HTML:

<div class="message1">
    Demos 代码演示、代码片段 - 读你,欢迎来到读你,http://dunizb.com/demo/
</div>

<div class="message2">
    Demos 代码演示、代码片段 - 读你,欢迎来到读你,http://dunizb.com/demo/
</div>

CSS:

.message1,.message2 {
    width: 200px;
    height: 80px;
    margin: 100px auto;
    background-color: green;
    border-bottom-color:green;/*为了给after伪元素自动继承*/
    color: #fff;
    font-size: 12px;
    font-family: Arial;
    line-height: 18px;
    padding: 5px 12px 5px 12px;
    box-sizing: border-box;
    border-radius: 6px;
    position: relative;
    word-break: break-all;
}
.message1::after {
    content: '';
    position: absolute;
    top: 0;
    right: -24px;
    width: 20px;
    height: 20px;
    border-width: 0 0 20px 20px;
    border-style: solid;
    border-bottom-color: inherit;   /*自动继承父元素的border-bottom-color*/
    border-left-color: transparent;
    border-radius: 0 0 60px 0;
}
/** 通过对小正方形旋转45度解决 **/
.message2::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -5px;
    width: 10px;
    height: 10px;
    margin-top: -10px;
    background: inherit;/*自动继承父元素的背景*/
    transform: rotate(45deg);
}

/** 通过画三角形解决 */
/*.message2::before {*/
    /*content: '';*/
    /*position: absolute;*/
    /*top: 50%;*/
    /*left: -20px;*/
    /*width: 0px;*/
    /*height: 0px;*/
    /*margin-top: -10px;*/
    /*border-width: 10px;*/
    /*border-style: solid;*/
    /*border-color: transparent green transparent transparent;*/
/*}*/

以上就是全部代码。
上面对小正方形使用了inherit属性值,通过把正方形旋转45度形成对外的三角而得到。

被刻意遗忘的inherit关键字

尽管绝大多数人都知道inherit这个关键字,但是很多人可能自始自终都没实际用过它,包括我自己,从来没有,在查询CSS文档时,习惯性的忽略它,直到看到《CSS揭秘》这本书。

inherit可以用在任何CSS属性中,这从w3cschool文档中就已经体现了,它总是绑定到父元素的计算值(对伪元素来说,则会取生成该伪元素的宿主元素)。举例来说,要把表单元素的字体设定为与页面的其他部分相同,你并不需要重复指定字体属性,只需要利用inherit的特性即可:

input,select,button { font: inherit }

与此类似,要把超链接的颜色设定为与页面中其他文本相同,还是要用inherir,比如下面的代码:
HTML:


<div class="article">
    <p>Demos 代码演示、代码片段 - 读你 | 这世间唯有梦想和好姑娘不可辜负!</p>
    <a href="http://dunizb.com/demo/">Demos</a>
</div>

CSS:

.article {
      font-family: "Microsoft YaHei";
      font-size: 14px;
      color: red;
}

效果:
2.png
此时文字的颜色是红色,而超链接默认是蓝色,并不会被改变,这是我们都知道的,那么我想让超链接也是跟父元素一样的红色呢?此时我们只需要给超链接inherit即可:

.article a { color: inherit; }

效果:
3.png
这个inherit对于背景色相同非常有用,但是需要注意的是,想要子元素设置属性的inherit关键字生效,父元素必须设置过使用inherit为值的属性。

CSS3的currentColor关键字

与之类似的还有一个新的CSS颜色属性:currentColor。这个属性是在CSS颜色(第三版)规范中新增加的,它是从SVG那里借鉴过来的,这个关键字并没有绑定到一个固定的颜色值,而是一直被解析为color。实际上,这是CSS中有史以来第一个变量,虽然功能很有限,但它真的是个变量。

举个例子,假如我们想让所有的水平分割线(所有<hr>元素)自动与文本颜色保持一致。

例如在上面的例子中添加水平线:

.article hr {
      height: .5em;
}

默认情况下是这样的:
4.png
此时,添加 currentColor

.article hr {
      height: .5em;
      background: currentColor;
}

效果:
5.png
当我在把文字颜色设为蓝色的时候,它们会保持跟文字颜色一致

更多CSS3边框特效,请查看该页面

全文完。


文章作者: 张张
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 张张 !
 上一篇
HTML5 VideoAPI,打造自己的Web视频播放器 HTML5 VideoAPI,打造自己的Web视频播放器
本文将使用HTML5提供的VideoAPI做一个自定义的视频播放器,需要用到HTML5提供的video标签、以及HTML5提供的对JavascriptAPI的扩展。
2016-08-04
下一篇 
书写高质量jQuery代码的12条经验 书写高质量jQuery代码的12条经验
1、正确引用jQuery 尽量在body结束前才引入jQuery,而不是在head中。 借助第三方提供的CDN来引入jQuery,同时注意当使用第三方CDN出现问题时,要引入本地的jQuery文件。 如果在前引入script文件的话,就不用
2016-07-15
  目录