本文主要介绍了自定义提示边框由纯CSS3构建的应用程序，但今天的提示可以使用CSS3来定义边界，而边界是涂鸦风格，CSS3实现自定义边框的优势是适应边界内的单词数的能力。





这是自定义提示边框与纯CSS3的应用程序构建。之前我们讨论了如何使用CSS3实现不同风格的工具提示，今天的提示可以使用CSS3来定义边界和边界是涂鸦风格，CSS3实现自定义边框的优势是适应边界内的单词数的能力。


让我们共享实现方法，主要由HTML代码和CSS代码组成。

HTML代码：

xml代码将内容复制到剪贴板。




CSS3实现的简单涂鸦风格边境欢迎


U3000 U3000



HTML代码结构非常简单，只有3个div，当然后面的CSS代码是关键，我们将逐步解释它。

CSS代码：


CSS代码将内容复制到剪贴板。


{。包
填料：35px 25px；
宽度：450px；
保证金：40px汽车；
背景：# 586786；
边界半径：255px 15px 225px 15px / 15px 225px 15px 255px；
颜色：# Eee；
盒子的影子：1px 1px 0px RGBA（0, 0, 0。75）
}




CSS代码定义了最外层的边界，用边界半径实现边界的圆角效果，并使用框阴影实现微弱的阴影效果。很明显，您也可以修复属性值以使阴影更为明显。

CSS代码将内容复制到剪贴板。


{。箱
职位：相对；
背景：# FFF；
边境：固体5px # FFF；
宽度：200px；
身高：100px；
保证金：0汽车；
边界半径：255px 15px 225px 15px / 15px 225px 15px 255px；
填料：10px；
颜色：# 666；
盒子的影子：2px 3px 1px RGBA（0, 0, 0。75）
}
{盒子：以前
内容：；
位置：绝对；
Bottombottom：- 20px；
左：60px；
边界：0；
权利边界宽度：30px；
底部边框宽度：20px；
边框样式：实心；
边框颜色：透明# FFF；
显示块；
宽度：0；
}




这盒类是与前一个类似，但有一个以上的特征，它是在属性实现的下边框的小三角使用CSS3的效果，所以，提示效果。

CSS代码将内容复制到剪贴板。


box.box {。
位置：绝对；
上图：5px；
左：5px；
宽度：180px；
身高：80px；
边框颜色：# 593207；
阴影框：无；
}
盒子：盒子在{之前
左：45px；
边框颜色：透明# 593207；
}




这是最内部的盒子，它与盒子外面的实现一样，以及使用前属性来实现小三角效应。

另一种是设置一些边界线的颜色和背景颜色，非常简单。不要一个一个地写代码，谢谢大家阅读，希望能帮到您，请大家继续关注，我们会尽力分享更多优秀的文章。