南强小屋

CSS border虚线边框属性教程
站长资源 2024/12/28 佚名
38 1538
南强小屋 Design By 杰米

上下左右边框交界处呈现平滑的斜线。利用这个特点，通过设置不同的上下左右边框宽度或颜色，可以得到小三角、梯形等。
调整宽度大小可以调节三角形形状。

实现三角形

示例1：

CSS border虚线边框属性教程

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 border虚线边框属性教程

CSS Code复制内容到剪贴板
  1. #test2 {   
  2.     height:0;   
  3.     width:0;   
  4.     overflow: hidden; /* 这里设置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个三角形了，如果把4种颜色，只保留一种颜色，余下3种颜色设置为透明或者与背景色相同，那就形成一个三角形。

CSS border虚线边框属性教程

CSS Code复制内容到剪贴板
  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下，需要设置余下三边的border-style为dashed，即可达到透明的效果。

CSS Code复制内容到剪贴板
  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 border虚线边框属性教程

CSS Code复制内容到剪贴板
  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. }   

保留其中一种颜色，就可以得到斜边在对角线上的三角形了。

CSS border虚线边框属性教程

实现圆角效果

可以实现近似圆角，其实是一个非常小的梯形展示出来的。

CSS border虚线边框属性教程

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>  

以上就是本文的全部内容，希望对大家的学习有所帮助。

标签：
CSS,border,虚线,边框
南强小屋 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
南强小屋 Design By 杰米

评论“CSS border虚线边框属性教程”

暂无CSS border虚线边框属性教程的评论...
www.nqxw.com 南强小屋
8,675无损音乐
1,324高清电影
213破解软件
70,141收录教程

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。

据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网