前端设计 如何写一个MC风格的对话框

[6xingyv]

这是你的官网

它现在干干巴巴，麻麻咧咧
急需要你的安抚
So.....
来点MC元素叭
你决定看看业界标杆的官网！

你开始馋他的对话框！
F12一按 发现个<ifame>标签
呀嘿！
用你单身20年的手速打开目标url！
果然在犄角旮旯里找见个css写着border
再一查css手册
嚯！
使用border-image-*属性来构建美丽的可扩展按钮！ 指定作为div元素周围边框的图像：！
一下就兴奋了

 

[6xingyv]

咱来挨个讲解

    border-top: 35px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 114px solid transparent;
    border-left: 12px solid transparent;
    /* -webkit-border-image: url(img/dialog_background_hollow_1.png) 23 8 76 8 fill repeat; */
    -o-border-image: url(img/dialog_background_hollow_1.png) 23 8 76 8 fill repeat;
    border-image: url(img/dialog_background_hollow_1.png) 23 8 76 8 fill repeat;
    /* border-image-width: 35px 12px 114px 12

 

[6xingyv]

border-image:url("url")指定img为图片边框
再来看看这些个啥-top啊 啥-bottom啊是不是蒙批？

 

[北陌]

大佬！！！

 

[6xingyv]

别急嘛
来百度一下.9图？
再翻翻资源包？
找到了吧

这就是一张.9图

 

[6xingyv]

大佬！！！

爱好什么？巧了

 

[北陌]

爱好什么？巧了

被你发现辽！

 

[6xingyv]

这就是minebbs么 i了i了

 

[6xingyv]

此贴完结
请使用CJJ的CSS自行磋磨
中考备考ing

 

[小凯]

有待进步