摘要:效果如上图所示,主要用到的伪类,以及圆角边框属性。的属性的使用然后通过定位到合适的位置。实现气泡框结果也很简单,就一个。的关键字与之类似的还有一个新的颜色属性。实际上,这是中有史以来第一个变量,虽然功能很有限,但它真的是个变量。
效果如上图所示,主要用到CSS3的伪类::after、::before,以及圆角边框border-radius属性。对于下面的气泡框,可以有两种方式实现小三角:
传统方式,利用CSS画小三角,利用到了透明背景和边框属性transparent的应用。
CSS3的transform属性的使用
然后通过position定位到合适的位置。
此外,本文还会讲一下CSS的inherit属性值的知识。
实现气泡框HTML结果也很简单,就一个DIV。下三角部分使用了CSS画三角的知识,
HTML:
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这个关键字,但是很多人可能自始自终都没实际用过它,包括我自己,从来没有,在查询CSS文档时,习惯性的忽略它,直到看到《CSS揭秘》这本书。
inherit可以用在任何CSS属性中,这从w3cschool文档中就已经体现了,它总是绑定到父元素的计算值(对伪元素来说,则会取生成该伪元素的宿主元素)。举例来说,要把表单元素的字体设定为与页面的其他部分相同,你并不需要重复指定字体属性,只需要利用inherit的特性即可:
input,select,button { font: inherit }
与此类似,要把超链接的颜色设定为与页面中其他文本相同,还是要用inherir,比如下面的代码:
HTML:
Demos 代码演示、代码片段 - 读你 | 这世间唯有梦想和好姑娘不可辜负!
Demos
CSS:
.article { font-family: "Microsoft YaHei"; font-size: 14px; color: red; }
效果:
此时文字的颜色是红色,而超链接默认是蓝色,并不会被改变,这是我们都知道的,那么我想让超链接也是跟父元素一样的红色呢?此时我们只需要给超链接inherit即可:
.article a { color: inherit; }
效果:
这个inherit对于背景色相同非常有用,但是需要注意的是,想要子元素设置属性的inherit关键字生效,父元素必须设置过使用inherit为值的属性。
与之类似的还有一个新的CSS颜色属性:currentColor。这个属性是在CSS颜色(第三版)规范中新增加的,它是从SVG那里借鉴过来的,这个关键字并没有绑定到一个固定的颜色值,而是一直被解析为color。实际上,这是CSS中有史以来第一个变量,虽然功能很有限,但它真的是个变量。
举个例子,假如我们想让所有的水平分割线(所有
元素)自动与文本颜色保持一致。
例如在上面的例子中添加水平线:
.article hr { height: .5em; }
默认情况下是这样的:
此时,添加 currentColor
.article hr { height: .5em; background: currentColor; }
效果:
当我在把文字颜色设为蓝色的时候,它们会保持跟文字颜色一致
更多CSS3边框特效,请查看该页面
参考资料:
《CSS解密》[美]Lea Verou (作者) ,[中]CSS魔法 (译者),图灵教育,人民有点出版社
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/49944.html
摘要:效果如上图所示,主要用到的伪类,以及圆角边框属性。的属性的使用然后通过定位到合适的位置。实现气泡框结果也很简单,就一个。的关键字与之类似的还有一个新的颜色属性。实际上,这是中有史以来第一个变量,虽然功能很有限,但它真的是个变量。 showImg(https://segmentfault.com/img/remote/1460000010869212);效果如上图所示,主要用到CSS3的...
摘要:正在暑假中的课多周刊第期我们的微信公众号,更多精彩内容皆在微信公众号,欢迎关注。若有帮助,请把课多周刊推荐给你的朋友,你的支持是我们最大的动力。原理微信热更新方案涨知识了,热更新是以后的标配。 正在暑假中的《课多周刊》(第1期) 我们的微信公众号:fed-talk,更多精彩内容皆在微信公众号,欢迎关注。 若有帮助,请把 课多周刊 推荐给你的朋友,你的支持是我们最大的动力。 远上寒山石径...
摘要:正在暑假中的课多周刊第期我们的微信公众号,更多精彩内容皆在微信公众号,欢迎关注。若有帮助,请把课多周刊推荐给你的朋友,你的支持是我们最大的动力。原理微信热更新方案涨知识了,热更新是以后的标配。 正在暑假中的《课多周刊》(第1期) 我们的微信公众号:fed-talk,更多精彩内容皆在微信公众号,欢迎关注。 若有帮助,请把 课多周刊 推荐给你的朋友,你的支持是我们最大的动力。 远上寒山石径...
摘要:想必大家都知道,这里不赘述,聊一聊其他实现方法。这里的三角形部分可以使用正方形代替,实现同样效果,方法就是旋转小正方形使其一部分露在外面。 showImg(https://segmentfault.com/img/bVEcKn?w=4136&h=1956); 前一阵子敢玩的 Mobile 页改版完成了,就之前的页面风格更加扁平化,从暗色系为主背景转到亮色背景,去掉更多的阴影,给用户简约...
阅读 1941·2021-08-11 11:13
阅读 994·2021-07-25 21:37
阅读 2546·2019-08-29 18:42
阅读 2490·2019-08-26 12:18
阅读 844·2019-08-26 11:29
阅读 1662·2019-08-23 17:17
阅读 2637·2019-08-23 15:55
阅读 2581·2019-08-23 14:34