您好，登录后才能下订单哦！
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
这篇文章主要介绍了CSS3如何使用新增边框属性制作关门开门效果，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
border: 宽度 类型 颜色 小数不支持
border-width：边框的宽度 thin 细的
medium 默认的
thick 粗的
不常用
数值px
border-style:none 没有边框 = hidden（用于表格除外，用来解决表格边框冲突）
solid 实线型
dotted 点状
dashed 虚线
double 双线
border-color:十六进制 #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：图片重复
效果实现代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{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%
}
</style>
</head>
<body>
<div id="box">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
感谢你能够认真阅读完这篇文章，希望小编分享的“CSS3如何使用新增边框属性制作关门开门效果”这篇文章对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，更多相关知识等着你来学习!
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。