CSS3边框

1、CSS3边框简介

border-width: 设置边框的粗细
border-color: 设置边框的颜色
border-style: 设置边框的类型
也可以将上面三个属性合并在一起,缩写的语法是:
  border: border-width border-style border-color;
这三个值中唯一必须的是“border-style”,例如下面这种边框写法将不会有任何效果。
.elm {border: 3px red}
  此外可以对边框的四条边分别设置不同的width、color和style。以style为例:

border-top-style: /*设置元素顶部边框类型*/
border-right-style: /*设置元素右边边框类型*/
border-bottom-style: /*设置元素底部边框类型*/
border-left-style: /*设置元素左边边框类型*/

还有一种简写方式:

border-style: solid;
/* 一个值时,表示四条边都是solid类型 */
border-style: solid dotted;
/* 两个值时,第一个值表示上下边框的类型,第二个值表示左右边框的类型 */
border-style: solid dotted dashed;
/* 三个值时,第一个值表示上边框的类型,第二个值表示左右边框的类型,第三个值表示下边框的类型 */
border-style: solid dotted dashed inset;
/* 四个值时,依次代表上右下左边框 */

2、边框的类型

下面列举常用的边框类型:

属性值 功能描述
none 定义无边框
dotted 定义点状边框
dashed 定义虚线边框
solid 定义实现边框
double 定义双线。双线的宽度等于border-width的值
inherit 规定从父元素继承边框样式(部分浏览器不支持这个属性值)

3、CSS3圆角边框属性

  border-radius是一种缩写方法。如果反斜杠符号“/”存在,“/”前面的值是设置圆角的水平方向半径,“/”后面的值是设置圆角的垂直方向的半径;如果没有“/”,则圆角的水平和垂直方向的半径值相等。另外四个值是按照top-left、top-right、bottom-right和bottom-left顺序来设置的,其主要会有以下四种情况:

  • border-radius:{1}设置一个值时,四个圆角的效果一样;
  • border-radius:{2}设置两个值时,top-left=bottom-right=第一个值,top-right=bottom-left=第二个值;
  • border-radius:{3}设置三个值时,第一个值设置top-left,第二个值设置top-right和bottom-left,第三个值设置bottom-right;
  • border-radius:{4}设置四个值是,就按顺序设置样式。
      此外四个圆角也可以不合在border-radius这一个属性里写,可以分成四个设置,这样就可以只设置需要样式的角。
border-top-left-radius:
/* 两个值时分别代表圆角的水平半径和垂直半径 */
border-top-right-radius:
border-bottom-right-radius:
border-bottom-left-radius:

4、实战体验:制作特殊图形

1)圆形

  • 元素的宽度和高度相同。
  • 圆角的半径值为元素宽度的一般或者直接设置圆角半径值为50%。
    CSS3边框_第1张图片
    2)半圆
CSS3边框_第2张图片

3)扇形(四分之一圆)
原理同半圆,扇形只需要一个角有值即可。

4)椭圆

CSS3边框_第3张图片
'/'前面指水平半径,后面指竖直半径。

你可能感兴趣的:(css)