CSS border虚线边框特性实例教程

日期:2021-03-18 类型:科技新闻 

关键词:小程序如何制作,预约小程序,微信小程序怎么做,微信抽奖小程序,小程序外包

左右上下边框交界处处展现光滑的斜线。运用这个特性,根据设定不一样的左右上下边框宽度或色调,能够获得小3角、梯形等。
调剂宽度尺寸能够调整3角形样子。

完成3角形

示例1:

CSS Code拷贝內容到剪贴板
  1. #test1{   
  2.     height:20px;   
  3.     width:20px;   
  4.     border-color:#FF9600 #3366ff #12ad2a #f0ed7a;   
  5.     border-style:solid;   
  6.     border-width:20px;   
  7. }   

示例2:

在上面的基本上,把高宽比宽度都设为0时,会展现界限斜线。

CSS Code拷贝內容到剪贴板
  1. #test2 {   
  2.     height:0;   
  3.     width:0;   
  4.     overflowhidden/* 这里设定overflow, font-size, line-height */  
  5.     font-size: 0;     /*是由于, 尽管宽高宽比为0, 但在IE6下会具备默认设置的 */  
  6.     line-height: 0;  /* 字体样式尺寸和行高, 致使盒子展现被撑开的长矩形框 */  
  7.     border-color:#FF9600 #3366ff #12ad2a #f0eb7a;   
  8.     border-style:solid;   
  9.     border-width:20px;   
  10. }   
  11.   

示例3:

示例2中能够看到有4个3角形了,假如把4种色调,只保存1种色调,余下3种色调设定为全透明或与情况色同样,那就产生1个3角形。

CSS Code拷贝內容到剪贴板
  1. #test3 {   
  2.     height:0;   
  3.     width:0;   
  4.     overflowhidden;   
  5.     font-size: 0;   
  6.     line-height: 0;   
  7.     border-color:#FF9600 transparent transparent transparent;   
  8.     border-style:solid;   
  9.     border-width:20px;   
  10. }   
  11.   

示例4:

示例3中,在IE6下,必须设定余下3边的border-style为dashed,便可做到全透明的实际效果。

CSS Code拷贝內容到剪贴板
  1. #test4 {   
  2.     height:0;   
  3.     width:0;   
  4.     overflowhidden;   
  5.     font-size: 0;   
  6.     line-height: 0;   
  7.     border-color:#FF9600 transparent transparent transparent;   
  8.     border-style:solid dashed dashed dashed;   
  9.     border-width:20px;   
  10. }  

示例5:

上述画的小3角的斜边全是借助原先盒子的边,也有另外一种方式的小3角,斜边在盒子的对角网上。


CSS Code拷贝內容到剪贴板
  1. #test5 {   
  2.     height:0;   
  3.     width:0;   
  4.     overflowhidden;   
  5.     font-size: 0;   
  6.     line-height: 0;   
  7.     border-color:#FF9600 #3366ff transparent transparent;   
  8.     border-style:solid solid dashed dashed;   
  9.     border-width:40px 40px 0 0 ;   
  10. }   

保存在其中1种色调,便可以获得斜边在对角网上的3角形了。

完成圆角实际效果

能够完成近似圆角,实际上是1个十分小的梯形展现出来的。

XML/HTML Code拷贝內容到剪贴板
  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <head>  
  4. <style type="text/css">  
  5. .test{width:200px;height:50px;}   
  6. .test .top{width:194px;border-color:transparent transparent #FF9600 transparent;*border-color:pink pink #FF9600 pink;border-style:dashed dashed solid dashed;border-width:3px;filter:chroma(color=pink);}   
  7. .test .center{width:200px;height:40px;background-color:#FF9600;}   
  8. .test .bottom{width:194px;height:5px;border-color:#FF9600 transparent transparent transparent;*border-color:#FF9600 pink pink pink;border-style:solid dashed dashed dashed;border-width:3px;filter:chroma(color=pink);}   
  9. </style>  
  10. </head>  
  11. <body>  
  12. <div class="test">  
  13.   <div class="top">  
  14.   </div>  
  15.   <div class="center"></div>  
  16.   <div class="bottom">  
  17.   </div>  
  18. </div>  
  19. </body>  
  20. </html>  

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助。