CSS基础之边框属性

边框设置

边框的4大要素：边框宽度；边框颜色；边框样式；边框方向。

border-top: 1px red solid;

border-left:1px red solid;

border-bottom:1px red solid;

boder-right:1px red solid;

边框宽度和边框颜色

语法：border-边框方向：边框宽度 边框颜色 边框样式；属性值之间用空格隔开

边框宽度的值使用符合CSS要求的尺寸单位，如px、em、rem，但百分比不能使用。实际开发中，常使用px。

边框颜色的值使用符和CSS标准的颜色值，如十六进制颜色值、rgb、rgba、颜色名。实际开发中，颜色常用十六进制

边框样式

边框样式有：solid--实线；dashed--虚线；double--双实线；dotted--点状线。

实际开发中常用solid，结合li的boder-bottom，

边框方向

border-top: 1px red solid;

border-left:1px red solid;

border-bottom:1px red solid;

boder-right:1px red solid;

圆角边框

圆角边框的2大要素：圆角方向，通过垂直和水平方向可以表示一个角，方向1表示上下，方向2表示左右；圆角半径/幅度，水平半径和垂直半径

border-bottom-left-radius:20px 30px;
border-top-left-radius:
border-bottom-right-radius:
border-top-right-radius:
在CSS中，先垂直方向后水平方向,如border-bottom-left-radius:20px 30px;20px指垂直方向的半径为20px,30px表示水平方向的半径为30px。
圆角边框的半径可以使用符合CSS规定的尺寸单位，如px、em、rem、百分比
圆角半径设置为一个值时，另一个值则和设置的值一致。比如说border-bottom-left-radius:20px，则是指垂直方向和水平方向的圆角半径都是20px

圆角边框的半径单位使用百分比作为单位时，圆角半径的值不是固定的。当设置为50%时，背景元素为正方形时，则是圆形。长方形时，则为椭圆形。
圆角边框的简写/同时设置4个角的圆角：border-radius:10px 20px 30px 40px;10px指左上角，20px指右上角，30px指右下角，40px指左下角。
border-radius:10px 20px 30px; 10px指左上角 20px指右上角和右下角 30px指右下角 border-radius:10px 20px；10px指左上角和右下角 20px则指右上角和左下角 border-radius：10px;则指四个角的圆角板件均为10px
实际开发中，常使用border-radius：10px

边框阴影

设置边框阴影，可以让页面更有立体感。
box-shadow:值1 值2 值3 值4 值5
值1表示水平阴影位置 ;值2表示垂直阴影 ;值3表示阴影模糊距离 ;值4表示阴影尺寸 可选；值5表示阴影颜色，合法颜色值，可选
配合圆角边框可以更好看，边框阴影的可选值可以不写

轮廓及样式重置

outline:值1 值2 值3 值4
和border一样。
轮廓会添加在border之外，常用来重置input外边框样式.实际开发中很少使用到轮廓


input,textarea{outline:none}