一、边框的属性
(一)、边框
1、简写方式
通过一个属性来控制四个方向的边框效果
border:width style color;
width:宽度; 可以改变边框的粗细,以px为单位。
style:样式; 可以定义边框样式。
取值:solid:实线
dotted:虚线
dashed:虚线
color:颜色; 可以改变边框的颜色。
取值:合法的颜色值(#rrggbb,rgb(x,x,x))
border:none;或者border:0; 可以取消元素边框!!
2、单边定义
定义某一方向的边框。
属性: border-方向:width style color;
方向英文:top(上),right(右),left(左),bottom(下)。
ex:
border-left:1px solid red;
//这行代码的意思就是定义左边框的大小为1像素,线条样式为实线,线条的颜色为红色。
3、单属性定义
用一个属性来定义四个边框。
语法:border-属性:值;
属性:width、style、color
ex:
border-color:#00f;
//定义四个边框的颜色。
border-bottom:dotted;
//定义四个边框的样式。
4、单边单属性定义
用一个方向一个属性来定义边框。
语法:border-方向-属性:值;
ex:
boder-left-color:red;
//定义左边框的颜色为红色。
border-bottom-style:dotted;
//定义底部边框的样式为虚线。
(二)、边框倒角
四个方向的角倒成圆角。
属性:border-radius
取值:绝对数值 或 百分比
ex:
border-radius:5px;
//将四个边的角倒成大小为5px的圆角。
border-radius:50%;
//将四个边的角倒成大小为当前元素宽度的50%(如果当前元素宽和高相等的话,则能将当前元素改为圆形)
倒角可以也可以单独进行定义:
border-top-left-radius:值 //左上角
border-top-right-radius:值 //右上角
border-bottom-left:值 //左下角
border-bottom-right:值 //右下角
(三)、边框阴影
属性:box-shadow
他的取值有:h-shadow、v-shadow、blue、spread、color、inset;
h-shadow:阴影的水平偏移距离, +为右偏移, -为左偏移(必须要有的!)
v-shadow:阴影的垂直偏移距离, +为下偏移, -为上偏移(必须要有的!)
blur:模糊距离
color:颜色
inset:默认的外阴影改为内阴影(他本身就是一个值)
ex:
效果如下:
(四)、轮廓
作用:绘制于元素周围的一条线,位于外边框外。
他的属性为:outline:width style color;
outline-width:轮廓的宽度。
outline-style:轮廓的样式。
outline-color:看轮廓的颜色。
outline:none; 或者 outline:0; 他两个的作用相同都是用来取消元素的轮廓。
效果如下: