您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
CSS边框并非矩形重叠拼接,而是以梯形无缝拼接。
如下图:
实现代码:
.test1{ width: 20px; height: 20px; border-color: red green blue yellow; border-style: solid; border-width: 60px 60px 60px 60px;}
如果只给其中两条边设置宽度,则未设置的边依然呈现矩形:
实现代码:
.test1{ width: 10px; height: 20px; border-color: red green blue yellow; border-style: solid; border-width: 60px 60px 0 0;}
利用以上内容,可以利用一个边为彩色,其余边为透明,来显示一个梯形:
实现代码:
.test1{ width: 30px; height: 30px; border-color: transparent transparent red transparent; border-style: solid; border-width: 60px 60px 60px 60px;}
同理可显示一个三角形:
实现代码:
.test1{ width: 0px; height: 0px; border-color: transparent transparent red transparent; border-style: solid; border-width: 60px 60px 60px 60px;}
注意:以上实现均使用div(块级元素),如果使用的为行级元素,则可能出现显示不全的问题。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。