边框与圆角与阴影

342 阅读2分钟

边框

边框的三要素

宽度(width) 线型(style)(主要包括常见的三种,dashed dotted solid ) 颜色(color)

边框的小属性

边框的每个属性都可以去设置小属性,上下左右边框的各自的线型,宽度和颜色都可以设置,小属性的主要作用就是用来覆盖住大属性的。

利用边框来构造三角形

主要就是利用边框的属性和小属性进行设置的,然后呢要强调的是,盒子的宽和高都要设置为0,有三条边上的的颜色要设置为透明色,transparen)

圆角

圆角呢主要用到的就是border-radius属性

设置圆角的方法

(1)可以用像素来进行设置。表示的是圆角的起始位置,起始也就相当于是圆角的半径。当然设置的时候,可以设置一个值,两个值,三个值,四个值。其与margin的四种表示方法相同。 (2)可以设置单独的小属性,比如说左上角就是border-top-left-radius,其他三个角都可以用相同的方法,需要注意的是,上下要写到左右的前面。 (3)用百分数来表示圆角起始于每条边的哪里,其实也就相当于是半径。就可以用这种方法,来设置正圆形和椭圆形。

阴影

阴影用到的是box-shadow的属性,其主要有两种,一种是外阴影,一种是内阴影。

外阴影

外阴影可以有三个数+颜色来表示,比如说box-shadow:20px 30px rgba(255,0,0,0.4)三个数分别表示的是向右阴影的量,向下偏移的量,模糊量。 也可以用四个数+颜色来表示:比如说box-shadow:20px 20px 30px 40px rgba(255,0,0,0.4)四个数分别表示的是x方向的便宜,y方向上的偏移,模糊量,阴影延展。(注意阴影延展是四条边都要向外延展)

内隐形

向盒子内部进行阴影,主要用到的是box-shadow属性,属性值前面要加上inset。

多阴影

多阴影就是可以将多个阴影值用逗号隔开,进而达到多阴影的效果。