欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS border虛線邊框?qū)傩越坛?/h1>
  發(fā)布時間：2016-04-19 11:39:33   作者：佚名   我要評論
這篇文章主要介紹了CSS border虛線邊框?qū)傩越坛蹋檀蠹胰绾问褂胏ss制作網(wǎng)頁中的虛線，鞏固CSS border屬性使用方法，感興趣的小伙伴們可以參考一下

上下左右邊框交界處呈現(xiàn)平滑的斜線。利用這個特點(diǎn)，通過設(shè)置不同的上下左右邊框?qū)挾然蝾伾?，可以得到小三角、梯形等?br />調(diào)整寬度大小可以調(diào)節(jié)三角形形狀。

實(shí)現(xiàn)三角形

示例1：

CSS Code復(fù)制內(nèi)容到剪貼板
  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：

在上面的基礎(chǔ)上，把高度寬度都設(shè)為0時，會呈現(xiàn)邊界斜線。

CSS Code復(fù)制內(nèi)容到剪貼板
  1. #test2 {   
  2.     height:0;   
  3.     width:0;   
  4.     overflow: hidden; /* 這里設(shè)置overflow, font-size, line-height */  
  5.     font-size: 0;     /*是因?yàn)? 雖然寬高度為0, 但在IE6下會具有默認(rèn)的 */  
  6.     line-height: 0;  /* 字體大小和行高, 導(dǎo)致盒子呈現(xiàn)被撐開的長矩形 */  
  7.     border-color:#FF9600 #3366ff #12ad2a #f0eb7a;   
  8.     border-style:solid;   
  9.     border-width:20px;   
  10. }   
  11.   

示例3：

示例2中可以看到有4個三角形了，如果把4種顏色，只保留一種顏色，余下3種顏色設(shè)置為透明或者與背景色相同，那就形成一個三角形。

CSS Code復(fù)制內(nèi)容到剪貼板
  1. #test3 {   
  2.     height:0;   
  3.     width:0;   
  4.     overflow: hidden;   
  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下，需要設(shè)置余下三邊的border-style為dashed，即可達(dá)到透明的效果。

CSS Code復(fù)制內(nèi)容到剪貼板
  1. #test4 {   
  2.     height:0;   
  3.     width:0;   
  4.     overflow: hidden;   
  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：

上述畫的小三角的斜邊都是依靠原來盒子的邊，還有另一種形式的小三角，斜邊在盒子的對角線上。


CSS Code復(fù)制內(nèi)容到剪貼板
  1. #test5 {   
  2.     height:0;   
  3.     width:0;   
  4.     overflow: hidden;   
  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. }   

保留其中一種顏色，就可以得到斜邊在對角線上的三角形了。

實(shí)現(xiàn)圓角效果

可以實(shí)現(xiàn)近似圓角，其實(shí)是一個非常小的梯形展示出來的。

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  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>  

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助。

相關(guān)文章

最新評論