轮廓和圆角

轮廓

outline用来设置元素的轮廓线，用法和border一模

一样

轮廓和边框的不同点，就是轮廓不会影响到可见框的大小

 

阴影

box-shadow用来设置元素的阴影效果，阴影不会影响页面的布局

box-shadow:10px  10px  50px   rgba(0,0 0,  .3);

 

前边的两个10px是指阴影的偏移量

第一个值    左侧偏移量，设置阴影的水平位置 ， 正值向右移动，负值向左移动

第二个值    垂直偏移量   设置阴影的水平位置，正值向下移动，负值向上移动

第三个值    阴影的模糊半径

第四个值    阴影的颜色

这四个值都不能少写。

 

圆角

border-radius:  用来设置圆角         圆角设置的圆的半径大小

border-top-left-radius:   左上角

border-top-right-radius:    右上角

border-bottom-left-radius:左下角

border-bottom-right-radius:右下角

 

border-radius可以分别指定四个角的圆角

四个值   左上    右上    右下    左下

三个值    左上   右上/左下      右下

两个值     左上/右下     右上/左下

 

将元素设置为一个圆形

border-radius:50%

网页就会显示一个圆形。