今天给大家带来一段实例代码，怎么用css3做出关门开门的效果，需要用到的属性有border-width， border-width等，我们一起来看一下。
border-width：边框的宽度 thin 细的
medium 默认的
thick 粗的
不常用
立即学习“前端免费学习笔记（深入）”；
数值px
border-style:none 没有边框 = hidden（用于表格除外，用来解决表格边框冲突）
solid 实线型
dotted 点状
dashed 虚线
double 双线
border-width:十六进制 #fff transparent 透明
border: 1px solid #000;
border-top: 1px solid #000;上边框
border-top-width
border-top-style
border-top-color
border-right：
border-bottom:
border-left:
css3新增的属性
border-image: 使用图片来填充边框
border-image-source:图片的来源，路径
border-image-slice：图片的分割方式
border-image-width：图片的宽度
border-image-outset：图片扩展
border-image-repeat：图片重复
效果实现代码：
nbsp;html>*{padding: 0;margin: 0;} #box{ width: 300px; height: 400px; background: url(img/05.jpg); background-size:cover; margin: 150px auto; position: relative; overflow: hidden; } .left{width: 100%; height: 100%; background: rgba(122,0,0,0.5); position: absolute; top: 0; left: -100%; transition: all 2s; } .right{ width: 100%; height: 100%; background: rgba(0,0,135,0.5); position: absolute; top: 0; left: 100%; transition: all 4s; } #box:hover .left{ left:-50% } #box:hover .right{ left:50% }
登录后复制
效果代码就是上面这些了，感兴趣的朋友可以手动操作一下，更多精彩请关注【创想鸟】其它相关文章！
相关阅读：
border-width
border-width
border-width
以上就是CSS3怎么做出关门开门效果的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/3121489.html
