CSS3之解决相邻border重合加粗问题

解决这个问题的 方法

  1. 该元素 上设置 相关方向margin为-1px
  2. 如果需要 伪类显示 的话,在 该元素的伪类 中加 相对定位目的是被压住border 显示出来
  3. 如果 还需要此元素 上加 拥有绝对定位的其它元素,那么在 该元素 上加 相对定位,在 该元素的伪类 上加 z-index 属性
     

下面两个例子就是利用了这个方法!!!


代码示例1:


<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>CSS3之margin负值title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }
        #box {
            width: 1300px;
            margin: 50px auto;
        }
        .showdiv {
            float: left;
            position: relative;
            width: 300px;
            height: 400px;
            margin: 0 -1px -1px 0;
            border: 1px solid dimgray;
        }
        .showdiv:hover {
            z-index: 1;
            border: 1px solid orange;
        }
    style>
head>
<body>
    <div id="box">
        <div class="showdiv">div>
        <div class="showdiv">div>
        <div class="showdiv">div>
        <div class="showdiv">div>
        <div class="showdiv">div>
        <div class="showdiv">div>
        <div class="showdiv">div>
        <div class="showdiv">div>
    div>
body>
html>

CSS3之解决相邻border重合加粗问题_第1张图片
 


代码示例2:


<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>CSS3之margin负值title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }
        li {
            list-style: none;
        }
        #box {
            margin: 50px 10px 50px;
            width: 200px;
        }
        #box li a {
            position: relative;
            display: block;
            margin-top: -1px;
            border: 1px solid rgba(0, 0, 0, .9);
            
            color: white;
            line-height: 50px;
            letter-spacing: 4px;
            text-align: center;
            text-decoration: none;
            background-color: rgba(0, 0, 0, .8);
        }
        #box li a:hover {
            z-index: 1;
            transition: 150ms;
            background-color: dodgerblue;
            border-color: dodgerblue;
            box-shadow: 0 0 10px 0 #4fbfff inset;
        }
        #box li a:active {
            transition: 75ms;
            background-color:  #1075ff;
            border-color: #1075ff;
            box-shadow: 0 0 10px 0 black inset;
        }
        #first {
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
        }
        #last {
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
        }
    style>
head>
<body>
    <div id="box">
        <ul>
            <li class="showli"><a id="first" href="#">页面一a>li>
            <li class="showli"><a href="#">页面二a>li>
            <li class="showli"><a href="#">页面三a>li>
            <li class="showli"><a href="#">页面四a>li>
            <li class="showli"><a href="#">页面五a>li>
            <li class="showli"><a href="#">页面六a>li>
            <li class="showli"><a href="#">页面七a>li>
            <li class="showli"><a href="#">页面八a>li>
            <li class="showli"><a href="#">页面九a>li>
            <li class="showli"><a href="#">页面十a>li>
            <li class="showli"><a href="#">页面十一a>li>
            <li class="showli"><a id="last" href="#">页面十二a>li>
        ul>
    div>
body>
html>

CSS3之解决相邻border重合加粗问题_第2张图片

你可能感兴趣的:(前端技术-CSS)