常见的CSS技巧(二)

使用CSS实现三角形

1.CSS实现三角形的原理

首先我们先来看一段代码:

html代码:

1
<div class="triangle">CSS实现三角形原理</div>

css代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
.triangle {
width: 200px;
height: 100px;
text-align: center;
line-height: 100px;
margin: 10px auto;
border-width: 30px;
border-style: solid;
border-top-color: #8ef26e;
border-bottom-color: #4a56f2;
border-left-color: #f24ae8;
border-right-color: #e2464a;
}

效果如下如所示:

从图中我们可以看到,当一个元素的border-width达到一定宽度时,在每条边的交界处会出现均分现象,即这个元素的每个角都被形成这个角的两条边框所平分。产生这个现象的原因为:矩形框的四个角并不单独属于某条边,而是由形成它的两条边所共有。正因为有了这几条外边框,才会形成各个角。

常见的CSS技巧(一)

常见的水平垂直居中方法

  1. 水平居中:
    1.内联元素:

    1
    text-align: center

    2.块级元素:

    1
    margin: 0 auto

    3.绝对定位的元素:

    1
    2
    3
    position:absolute;
    left: 50%;
    margin-left: -width/2;
  2. 垂直居中:
    1.line-height: 在css中设置line-height:height,即可让元素中的单行文本垂直居中
    2.table-cell:在css中设置元素的display:table-cell以及vertical-align:middle
    3.绝对定位的元素:

    1
    2
    3
    position:absolute;
    top: 50%;
    margin-top: -height/2;