话题
文章列表
莫卓颖 CSS/重构
背景 相信大家在做项目的过程中会经常遇到这样的一个需求,鼠标hover到某个元素的时候为这个元素添加边框,这个简单的需求仅需注意添加边框后不会对原有的位置造成布局的影响从而造成布局跳动。本文将会试图探讨完成这个简单需求的方法。 方案一 实现思路:为元素中预先设置边框,边框的颜色与元素所在父元素背景色一致,边框大小与hover时候的边框大小一致,鼠标hover过元素的时候只需要设置边框颜色便可。 兼容问题:无 实现代码: HTML结构 <ul class="parent"> <li></li><li></li></ul> CSS .parent{ width: 500px; background: #000; overflow: hidden; } .parent li{ width: 200px; background: red; border: 2px solid #000; margin-right: 2px; height: 200px; float: left; } .parent li:hover{ ...显示全部
2 年前发表 4029次浏览 3条评论 1次收藏
link ,除了分享,也是知识管理。 CSS/重构
街景wap官网中有在视网膜屏幕中实现1px border的需求. 首先,来看下面视觉给的输出图中的border:[http://7tszky.com1.z0.glb.clouddn.com/Fg8OjQ3yHWrQyg0IA0kXG-GMn7uf] 从上面的视觉图可以看到,border是一根非常细的线。这篇文章将说明如何使用border-image实现在视网膜屏中1px的border效果。 注:因为硬件条件的限制,设备像素比(devicePixelRatio)为1的非视网膜屏手机无法达到这样的效果 首先准备一张符合你要求的border-image: [http://7tszky.com1.z0.glb.clouddn.com/FmfBKPpD4hdPyvQFjaCHAFBco9Jp] 通常手机端的页面设计稿都是放大一倍的,如:为适应iphone retina,设计稿会设计成640*960的分辨率,图片按照2倍大小切出来,在手机端看着就不会虚化,非常清晰。 同样,在使用border-image时,将border设计为物理1px,如下: 样式设置: .border-image-1px{ ...显示全部
3 年前发表 3637次浏览 0条评论 1次收藏