千锋教育-做有情怀、有良心、有品质的职业教育机构

400-811-9990
手机站
千锋教育

千锋学习站 | 随时随地免费学

千锋教育

扫一扫进入千锋手机站

领取全套视频
千锋教育

关注千锋学习站小程序
随时随地免费学习课程

上海
  • 北京
  • 郑州
  • 武汉
  • 成都
  • 西安
  • 沈阳
  • 广州
  • 南京
  • 深圳
  • 大连
  • 青岛
  • 杭州
  • 重庆
当前位置:重庆千锋IT培训  >  技术干货  >  写一个1px的边框移动端是怎么处理的?

写一个1px的边框移动端是怎么处理的?

来源:千锋教育
发布人:lxl
时间: 2023-05-26 11:34:55

边框移动端

  方法一:用伪元素结合transform实现元素的1px边框设置 ,比如设置某元素的右边框

.box{position:relative} 
.box::after{
content:"";
height:100%;
width:1px;
background:red;
position:absolute;
right:0;
top:0;
transform:scaleX(0.5)
}
/*样式使用的时候,也要结合 js 代码,判断是否 Retina 屏*/

   方法二:使用border-image实现

.box{
border-right:1px solid;
border-image: url(border.gif) 2 repeat;
}

   方法三:使用box-shadow模拟边框实现

.box {   
box-shadow: 1px 0 0px 0px chartreuse;
}

 

声明:本站稿件版权均属千锋教育所有,未经许可不得擅自转载。

猜你喜欢LIKE

如何进行mysql数据备份?

2023-05-30

从零开始学Java之Java中的内部类是怎么回事?

2023-05-29

什么是事件流以及事件流的传播机制 ?

2023-05-29

最新文章NEW

什么是servlet的生命周期?servlet请求处理流程是怎样的?

2023-05-30

在java中,super关键字怎样使用

2023-05-29

什么是JavaScript伪数组?

2023-05-25

相关推荐HOT

更多>>

快速通道 更多>>

最新开班信息 更多>>

网友热搜 更多>>