首页 > 开发 > CSS > 正文

纯CSS3实现自定义Tooltip边框涂鸦风格的教程

2024-07-11 08:30:23
字体:
来源:转载
供稿:网友

  这是一款用纯CSS3打造的自定义Tooltip边框的应用,之前我们讨论过如何用CSS3来实现不同样式的Tooltip,今天的这款Tooltip却可以用CSS3来自定义边框,边框呈涂鸦风格。用CSS3实现自定义边框的好处是可以自适应边框内部的文字数量大小。

  下面我们来分享一下实现的方法,主要由HTML代码和CSS代码组成。

  HTML代码:

XML/HTML Code复制内容到剪贴板
  1. <div>       <div>  
  2.         <div>CSS3简单实现涂鸦风格边框 Welcome to</div>       </div>  
  3. </div>     

  HTML代码结构非常简单,仅仅是3个div组成,当然后面的CSS代码才是关键,我们一步步来解说一下。

  CSS代码:

CSS Code复制内容到剪贴板
  1. .wrap {        padding:35px 25px;   
  2.     width:450px;        margin:40px auto;   
  3.     background:#586786;        border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;   
  4.     color:#eee;        box-shadow:1px 1px 0px rgba(0, 0, 0, .75)   
  5. }  
  这个CSS代码定义了最外面的边框,利用border-radius实现边框的圆角效果,同时利用了box-shadow实现类微微的阴影效果,不是很明显,你也可以修个属性值来让阴影变得更加明显一点。
CSS Code复制内容到剪贴板
  1. .box {        position:relative;   
  2.     background:#fff;        border:solid 5px #fff;   
  3.     width:200px;        height:100px;   
  4.     margin:0 auto;        border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;   
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表