移动端给图片加聚焦线（横竖线）

=^_^=银爪

已于 2023-05-23 17:15:28 修改

阅读量28

点赞数

文章标签： css html

于 2023-05-23 17:14:57 首次发布

本文链接：https://blog.csdn.net/weixin_65635437/article/details/130831302

版权

html部分

 <div class="imageline">
    <img src="./images/动漫.png" alt="" style="width:100%; height:100%;border: 1px dashed red;">
 </div>

css样式

用伪类元素元素画横竖线

.imageline {
        position: relative;
        display:inline-flex; 
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .imageline::before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        border-left: 1px dashed red;
        transform: translateX(-50%);
    }
    .imageline::after {
        content: '';
        position: absolute;
        top: 50%;
        right: 0;
        left: 0;
        border-top: 1px dashed red;
        transform: translateY(-50%);
        margin-left: 1rem;
        margin-right:1rem;
    }

除了上面的用伪类元素画横线，还可以用div span 或者hr 标签画线，如下所示：

html:

 <hr class="hengxian">

css:

  .hengxian {
    position: absolute;
    bottom: 50%;
    left: 0;
    right: 0;
    border: none;
    border-top: 1px dashed red;
    margin-left: 1rem;
    margin-right:1rem;
  }

效果图：