zoukankan      html  css  js  c++  java
  • 为元素添加边框的几种思路。

    http://wishing.vip/ 这是我的移动断h5地址,里面有很多例子。

    我们有时候需要为元素添加一个边框,比如鼠标hover时元素添加一个好看的边框,要求不能对原有的位置造成布局的影响。

    思路

    为元素预设边框,颜色与元素一致,大小与hover的时候一致,鼠标hover过元素只要设置颜色即可。

    优点:不存在兼容问题。

    思路

    为元素设置position:relative,然后添加额外隐藏的边框,鼠标hover的时候显示隐藏的边框即可。

    HTML元素

    <ul class="parent">

    <li> <div class="bd"></div> </li>

    <li> <div class="bd"></div> </li>

    </ul>

    CSS样式

    .parent{ 500px; background: #000; overflow: hidden; }

    .parent li{ position: relative; 200px; background: red; border: 2px solid #000; margin-right: 2px; height: 200px; float: left; }

    .parent li .bd{ display: none; left: 0; top:0; 198px; height: 198px; border: 2px solid yellow; } .parent li:hover .bd{ display: block; }

    优点:不存在兼容问题。

    思路

    利用设置属性box-sizing设置容器为怪异模式,此时容器盒模型宽度=border+padding+内宽。

    关键代码

    .parent li:hover{ box-sizing:border-box; border: 2px solid yellow; }

    兼容性:好。(ie8+,android4.1+,chrome43+等等所有现代浏览器)

    思路四

    当hover过元素的时候,利用H5新属性box-shadow为元素添加实体的阴影作为边框。

    关键代码

    .parent li:hover{ box-sizing:border-box; box-shadow: inset 2px 2px 0 0 yellow,inset -2px -2px 0 0 yellow; }

    兼容性:好。(ie9+,android4.1+,chrome43+等等所有现代浏览器,Opera Mini不支持)

  • 相关阅读:
    Quartz.net
    Perfview 分析进程性能
    windbg 分析cpu异常
    ansible-vault 教程
    ansible 自动化运维(2)
    简单生成随机测试数据
    基于 RabbitMQ-EasyNetQ 实现.NET与Go的消息调度交互
    自绘 TreeDataView 控件
    C# 创建音频WAVE文件头信息(*.wav)
    C# GOF 23种设计模式 学习Log【更新中】
  • 原文地址:https://www.cnblogs.com/zhoudaozhang/p/5035195.html
Copyright © 2011-2022 走看看