CSS border虚线边框属性教程

发布时间：2020-03-12 20:13:30 所属栏目：系统来源：站长网

导读：这篇文章主要介绍了CSS border虚线边框属性教程，教大家如何使用css制作网页中的虚线，巩固CSS border属性使用方法，感兴趣的小伙伴们可以参考一下

border-color:#FF9600 transparent transparent transparent;

border-style:solid dashed dashed dashed;

border-width:20px;

}

示例5：

上述画的小三角的斜边都是依靠原来盒子的边，还有另一种形式的小三角，斜边在盒子的对角线上。

CSS border虚线边框属性教程

CSS Code复制内容到剪贴板

#test5 {

height:0;

width:0;

overflow: hidden;

font-size: 0;

line-height: 0;

border-color:#FF9600 #3366ff transparent transparent;

border-style:solid solid dashed dashed;

border-width:40px 40px 0 0 ;

}

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

CSS border虚线边框属性教程

实现圆角效果

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

CSS border虚线边框属性教程

XML/HTML Code复制内容到剪贴板

<!DOCTYPE HTML>

<html>

<head>

.test{width:200px;height:50px;}

.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);}

.test .center{width:200px;height:40px;background-color:#FF9600;}

.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);}

</style>

</head>

<body>

</div>

</div>

</body>

</html>

（编辑：焦作站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

2/2

首页