css-4.边框和盒子模型

边框

border: 1px solid black;
border-right: 1px solid red;
border-top: 1px dashed green;
border-top: 1px dashed green;

/*隐藏边框*/
border-bottom: 0px;
border-right: none;    /*效率最高，就是没有*/
border: transparent;

边框倒脚

·顺时针
border-radius: 150px;
border-radius: 150px,20px,0px;

边框阴影

box-shadow: 5px 5px 5px #0000FF inset;
/*inset 内阴影*/
box-shadow: 0px 0px 5px 1px red;
/*
h-shadow v-shadow blur模糊阴影      spread扩展（阴影）   color颜色
*/

边框轮廓

(1)边框：
·border-immage 属性：将图片规定为包围div元素的边框
-border-image:source width repeat;
-也可以分别设置
border-image-source:图片的路径
border-image-width：图片边框的宽度
border-image-repeat：图片边框是否应平铺（repeat）铺满（round）或拉伸（stretch）
eg：
#d1{
border-image: url(img/head2.png) 26 stretch;
/*
* round 环绕
* repeat 重复
* stretch 拉伸
*将图片九宫格切片，26是一个切片的宽度
*/
}
(2)轮廓
·位于border外的一圈类似描边的样式
#d1{
outline: 2px solid red;}

· 去掉chrome默认表单元的蓝边
#d1{outline ：none}

框模型(盒子模型)

·定义元素框处理元素的内容、内边距、边框和外边距的方式
外边距:margin
·默认情况下，以下html块级元素都存在外边距
-body
-h1,h2,h3··h6
-p ···
声明margin属性，可以覆盖默认样式
body，h1，p {
margin:0;
}
eg:
#d1 {
border-color: red;
margin:  10px 20px;  /*行内元素只有左右margin生效，上下不生效，要放到块元素*/
margin-bottom : 20px;
}
#d2 {
border-color: green;
margin: 20px auto;
/*左右margin auto 居中
 
*/
margin-top : 30px;    /*这个比上面的margin-bottom大，所以上下距离30px*/
}
/*当上下margin相遇时，较大的值生效，而不是叠加*/

内边距：padding
会将元素撑大，实际宽度是大小加上左右padding大小
eg:
#d1 {
border-color: red;
padding:  10px ;
}