（1）border 探究

border-width: 1px 5px 20px

border-style: dotted（点） dashed（虚线） solid（实线） double（双线）

border-color: blue blue green

border-radius: （最大有效值为50%，超过50%就不发生变化了）

（2）border的4条边

• border 实际上同时代表了4个属性：border-top, border-right, border-bottom, border-left
• 这4个属性的取值与border相同，（不区分先后顺序）分别是：width、style、color
• 尝试一下，画透视图效果不错！（滑稽）

border-top-width: px

border-right-width: px

border-bottom-width: px

border-left-width: px

content_size: px

（3）border-radius 探究

• 单独的border-radius属性已经在（1）中探究，下面探究border-top-left-radius等属性
• 不同的属性组合，可以绘制出多种不同的图形，尝试一下，说不定有惊喜！

border-width: {{border_width + 'px'}}
border-top-left-radius: {{TL_radius + '%'}}
border-top-right-radius: {{TR_radius + '%'}}
border-bottom-left-radius: {{BL_radius + '%'}}
border-bottom-right-radius: {{BR_radius + '%'}}
content-size: {{content_size + 'px'}}

（4）利用border绘制三角形

• 当content的size为0，border的width不为0时，4个三角形就出现了
• 还可以通过在4个三角形当中两两组合，又可以形成三角形，组合的方式就是让另外两个三角形的颜色变为transparent透明
• 在上面几个例子中，已经可以实现三角形的效果了，去试一试吧

返回首页