设为首页收藏本站
开启辅助访问
搜索
快捷导航
论坛 › 学院 › 平面设计学院 › btn设置了margin无效，是哪里写错了，求解？ ...
发新帖
返回列表
0 641
电梯直达  跳转到指定楼层

[提问] btn设置了margin无效，是哪里写错了，求解？

燕雀才人|中级会员 |勤币 350 |学币 0
发表于 2018-5-13 15:57 | 复制链接 | 打印 | 上一主题 | 下一主题
html+css网页前端课程 - 5.4.CSS3的transition属性及应用
字体垂直方向无法居中？

<title>无标题文档</title>
<style type="text/css">
  .con{width:400px;height:400px;background: #B8B8B8;margin: 100px auto;}
  
  .con .btn{ width: 150px;height: 40px;text-align: center;line-height: 40px;
   font-size:18px;font-weight:900;margin:50px auto;position: relative;}
  
  .btn span{display:block;position: absolute;transition: 0.3s;opacity: 1;}
  .btn .top{ width:150px;height: 2px;background: #0AA796;top: 0;left: -150px;}
  .btn .left{width:2px;height: 40px;background: #0AA796;top: -40px;left: 0;}
  .btn .bottom{ width:150px;height: 2px;background: #0AA796;top: 40px;left: 150px;}
  .btn .right{width:2px;height: 40px;background: #0AA796;top: 40px;left: 150px;}
  
  .btn:hover span{opacity: 1;}
  .btn:hover .top{left: 0;}
  .btn:hover .left{top: 0;}
  .btn:hover .bottom{left: 0;}
  .btn:hover .right{top: 0;}
</style>
</head>
<body>
<div class="con">
  <div class="btn">
   <span class="top"></span>
   <span class="left"></span>
   <span class="bottom"></span>
   <span class="right"></span>
   MORE
  </div>
</div>

</body>

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有帐号？立即注册

x
举报 使用道具
| 回复

共0个回复 最后回复于 2018-5-13 15:57

发新帖
返回列表
B Color Image Link Quote Code Smilies
高级模式
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表