CSS边框问题及妙用

发布时间:2020-06-17 10:12:16 作者:落错的紫沙
来源:网络 阅读:236

CSS边框并非矩形重叠拼接,而是以梯形无缝拼接。

如下图:

CSS边框问题及妙用

 实现代码:

.test1{	width: 20px;	height: 20px;	border-color: red green blue yellow;	border-style: solid;	border-width: 60px 60px 60px 60px;}

如果只给其中两条边设置宽度,则未设置的边依然呈现矩形:

CSS边框问题及妙用

 实现代码:

.test1{	width: 10px;	height: 20px;	border-color: red green blue yellow;	border-style: solid;	border-width: 60px 60px 0 0;}

利用以上内容,可以利用一个边为彩色,其余边为透明,来显示一个梯形:

CSS边框问题及妙用

 实现代码:

.test1{	width: 30px;	height: 30px;	border-color: transparent transparent red transparent;	border-style: solid;	border-width: 60px 60px 60px 60px;}

同理可显示一个三角形:

CSS边框问题及妙用

 实现代码:

.test1{	width: 0px;	height: 0px;	border-color: transparent transparent red transparent;	border-style: solid;	border-width: 60px 60px 60px 60px;}

注意:以上实现均使用div(块级元素),如果使用的为行级元素,则可能出现显示不全的问题。


推荐阅读:
  1. CSS边框border
  2. CSS边框样式

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css

上一篇:独角兽蚂蚁花呗5面:Spring+数据库+缓存+红黑树+Docker+微服务等

下一篇:go语言中select的基本用法

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》