边框、圆角和阴影

边框

简写方式：border:width style color，通过一个属性控制四个方向边框的效果

width：宽度，控制边框粗细，单位为px

style：边框样式，取值有solid(实线)，dotted(虚线)，dashed(虚线)

color：合法的颜色值

eg：border:1px solid red

单边定义，border-方向:width style color

方向可以取值为top，left，bottom，right

单属性的定义，border-属性:值

属性可以取值width，style，color

单边单属性定义，border-方式-属性

注意

1、color 可以取值为 transparent

2、取消边框显示，border:none；border:0;

3、设置元素的宽度高度都为0，边框的宽度不为0，可以设置三角形

轮廓

outline，绘制于元素边框周围的一条线，位于边框之外

outline:width style color，

常用的是outline:none，outline:0

边框倒角

border-radius，向元素添加圆角圆角，取值以‘px’或是‘%’为单位

单角定义: border-top-left-radius:左上角

border-bottom-right-radius:右下角

border-bottom-left-radius:左下角

border-top-right-radius:右上角

eg：border-radius:10px，所有角都使用半径为10px的圆角

border-radius:10px 8px 6px 4px，四个半径值分别是左上角、右上角、

右下角和左下角，顺时针

实心上半圆：把高度(height)设为宽度（width）的一半，并且只设置左上角和

右上角的半径与元素的高度一致（大于也是可以的）。

实心圆：把宽度（width）与高度(height)值设置为一致（也就是正方形），并

且四个圆角值都设置为它们值的一半

边框阴影

box-shadow，向盒子添加阴影。支持添加一个或者多个

box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式，inset内阴影，默认是外阴影];

投影方式可以写在参数的第一个或是最后一个，其他位置无效

eg：box-shadow:4px 2px 6px #333333;

如果添加多个阴影，只需用逗号隔开即可。box-shadow:4px 2px 6px #333333,-4px -2px 6px #000;