• CSS 三角形对话框(带边框)- :before + :after + border

    CSS 三角形对话框(带边框)- :before + :after + border

     关于三角形的各种画法,之前在文章《纯CSS - border绘制三角形(各种角度)》内有详细的介绍,今天来讲的是CSS绘出对话框和三角带边框!真正的三角形画法虽然重要,但常用程度甚至不如本文介绍的带边框三角形,因为现在网页需要弹出各种信息,比如二维码,比如联系方式等,都需要用到对话框,这个框如果使用PS做图的话也可行,但很浪费时间,css直接实现的话更靠谱!如上图所示,代码如下:<!DOCTYPE html&...

  • border:transparent透明边框

    border:transparent透明边框

     今天在写一个zblog主题的时候,用到了border属性中的透明边框,也就是border:transparent。那么CSS中为什么要使用透明边框呢?如上图,要使img:hover触发显示2px的白色边框,为了保持图片在触发的时候不变形,所以在触发之前的img里最好也建个2px宽的边框,但不要上色,透明即可!上图中的透明边框CSS:.widget_hotpost li img{float: le...

    CSS学习 8个月前 339 0 border
  • CSS小技巧:border-style:​double制作三横线

    CSS小技巧:border-style:​double制作三横线

    border-style:double有一个用途很有意思了,就是可以单纯的依靠border制作三横线!如上图的代码:{ width:120px; height:20px; border-top:60px double; border-bottom:20px solid; }再来一个案例:.double{ width:40px; height:8px; border-top:24px&n...

    CSS学习 8个月前 422 0 bordercss图形
  • 纯CSS - border绘制三角形(各种角度)

    纯CSS - border绘制三角形(各种角度)

    我们的网页因为 CSS 而呈现千变万化的风格。这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果。特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来。今天给大家带来 CSS 三角形绘制方法#triangle-up {    width: 0;    height: 0;   &n...

1