没有合适的资源?快使用搜索试试~ 我知道了~
温馨提示
试读
3页
上下左右边框交界处呈现平滑的斜线。利用这个特点,通过设置不同的上下左右边框宽度或颜色,可以得到小三角、梯形等。调整宽度大小可以调节三角形形状。 实现三角形 示例1: CSS Code复制内容到剪贴板 #test1{ height:20px; width:20px; border-color:#FF9600 #3366ff #12ad2a #f0ed7a; border-style:solid; border-width:20px; } 示例2: 在上面的
资源推荐
资源详情
资源评论
CSS border虚线边框属性教程虚线边框属性教程
上下左右边框交界处呈现平滑的斜线。利用这个特点,通过设置不同的上下左右边框宽度或颜色,可以得到小三角、梯形等。
调整宽度大小可以调节三角形形状。
实现三角形
示例1:
CSS Code复制内容到剪贴板
#test1{
height:20px;
width:20px;
border-color:#FF9600 #3366ff #12ad2a #f0ed7a;
border-style:solid;
border-width:20px;
}
示例2:
在上面的基础上,把高度宽度都设为0时,会呈现边界斜线。
CSS Code复制内容到剪贴板
#test2 {
height:0;
width:0;
overflow: hidden; /* 这里设置overflow, font-size, line-height */
font-size: 0; /*是因为, 虽然宽高度为0, 但在IE6下会具有默认的 */
line-height: 0; /* 字体大小和行高, 导致盒子呈现被撑开的长矩形 */
border-color:#FF9600 #3366ff #12ad2a #f0eb7a;
border-style:solid;
border-width:20px;
}
示例3:
示例2中可以看到有4个三角形了,如果把4种颜色,只保留一种颜色,余下3种颜色设置为透明或者与背景色相同,那就形成
一个三角形。
CSS Code复制内容到剪贴板
#test3 {
height:0;
width:0;
overflow: hidden;
font-size: 0;
line-height: 0;
border-color:#FF9600 transparent transparent transparent;
border-style:solid;
border-width:20px;
}
示例4:
weixin_38558186
- 粉丝: 4
- 资源: 878
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
- 1
- 2
前往页