小柒

www.xiaoqi.cn

0%

CSS画三角

发表于 更新于 分类于 
1
2
3
4
5
6
7
8
9
10
11
div {
    width:0;
    height:0;
    border: 10px solid transparent;
    border-left-color:pink;
    /*照顾兼容性*/
    line-height:0;
    font-size:0;
    

}

margin负值巧妙使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<style>
       ul li {
           list-style-type: none;
           float:left;
           width: 150px;
           height: 200px;
           border:1px solid red;
           margin-left: -1px;
       }
       ul li:hover {
           /* 如果盒子没有定位则添加相对定位使得合资压住所有其他标准流 */
           position:relative;
           border: 1px solid blue;
       }
       ul li :hover {
           /* 如果盒子有定位设置z-index提高盒子层级 */
           z-index:1;
           border: 1px solid blue;
       }
   </style>
   
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
  </ul>