7.22CSS

　　　　　　　　　　　７.２２CSS

 

• Margin(外边距) - 清除边框外的区域，外边距是透明的。
• Border(边框) - 围绕在内边距和内容外的边框。
• Padding(内边距) - 清除内容周围的区域，内边距是透明的。
• Content(内容) - 盒子的内容，显示文本和图像。

边框属性

border:1px soild #345677;

 border:1px solid #3a6587;

border: 1px dashed red;

          边框粗细 线样式 线颜色

边框杨色

border-color

 

属性	说明	示例
border-top-color	上边框颜色	border-top-color:#369;
border-right-color	右边框颜色	border-right-color:#369;
border-bottom-color	下边框颜色	border-bottom-color:#fae45b;
border-left-color	左边框颜色	border-left-color:#efcd56;
border-color	四个边框为同一颜色	border-color:#eeff34;
	上、下边框颜色：#369 左、右边框颜色：#000	border-color:#369 #000;
	上边框颜色：#369 左、右边框颜色：#000 下边框颜色：#f00	border-color:#369 #000 #f00;
	上、右、下、左边框颜色： #369、#000、#f00、#00f	border-color:#369 #000 #f00 #00f;

边框粗细

border-width

单位:thin medium thick 像素值

border-top-width

border-right-width

border-bottom-width

border-left-width

border-width:20px; 同时设置上下左右粗细

border-width:20px 30px;上下粗细为20px左右粗细为30px

border-width:20px,30px 40px:上 左右 下

border-width:20px 30px 25px 22px; 上 下 左 右

边框线属性

border-style

dotted

dashed :虚线

solid :实线

double:双线

margin:外边距:指盒子与盒子之间的距离

margin-top

margin-right

margin-bottom

margin-left

margin: 25px;上下左右

网页对齐居中:margin:0px auto;

只能上下为auto

padding:内边框:内同与边框的距离

padding-left

padding-right

padding-top

padding-bottom

padding 20px

box-sizing属性

content-box:默认盒子会随着padding的大小而改变

border-box:当padding改变时盒子大小不改变

圆角边框

border-radius: 20px  10px  50px  30px;

利用border-radius属性制作圆形的两个要点 元素的宽度和高度必须相同 圆角的半径为元素宽度的一半，或者直接设置圆角半径值为50%

 div{             width: 100px;      

                height: 100px;

            border: 4px solid red;  

          border-radius: 50%;  

      }

盒子阴影 

box-shadow:inset  x-offset  y-offset  blur-radius  color;

                   内阴影 水平位移量 垂直位移量 模糊半径 颜色

ul li:hover{box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1), 0 0 10px 0 rgba(0,0,0,0.2);}