1、边框
border : 1px solid pink; 没有顺序
border top: 1px solid red; /* 只设定上边框,其余同理 */
属性 | 作用 |
border-width | 定义边框粗细,单位px |
border-style | 边框的样式,solid实线边框、dashed虚线边框、dotted点线边框 |
border-color | 边框颜色 |
2、表格的细线边框
border-collapse: collapse; /* 表示相邻边框合并在一起 */
3、内边距
值的个数 | 表达意思 |
padding: 5px; | 1个值表示上下左右都有5像素内边距 |
padding:5px 10px; | 2个值代表上下内边距是5像素,左右内边距是10像素 |
padding:5px 10px 20px; | 3个值代表上内边距5像素,左右内边距是10像素,下内边距20像素 |
padding:5px 10px 20px 30px; | 4个值代表上是5像素,右10像素,下20像素,左30像素 |
当盒子已有宽度和高度,再指定内边距会撑大盒子
4、外边距
属性 | 作用 |
margin-left | 左外边距(margin-left: auto;) |
margin-right | 右外边距 |
margin-top | 上外边距 |
margin-bottom | 下外边距 |
外边距可以让块级盒子水平居中,但须满足两个条件:盒子必须指定了宽度;盒子左右的外边距都设置为auto 。语法:.header{ width: 500px; margin: 0 auto;}
5、清除内外边距
/* 行内元素为了照顾兼容性,尽量只设置左右外边距,不要设置上下内外边距,但是转换为块级和行内块元素就可以了 */
*{
padding: 0;
margin: 0;
}
6、盒子阴影 、文字阴影
盒子阴影:box-shadow:h-shadow v-shadow blur spread color inset;
/*盒子阴影不占用空间,不会影响其他盒子排列 */
文字阴影:text-shadow: h-shadow v-shadow blur color;
值 | 描述 |
h-shadow | 必需。水平阴影的位置。允许负值 |
v-shadow | 必需。垂直阴影的位置。允许负值 |
blur | 可选,模糊距离 |
spread | 可选,阴影的尺寸 |
color | 可选,阴影的颜色 |
insert | 可选,将外部阴影(outset)改为内部阴影。【默认外阴影,但不可以写outset,否则阴影无效】 |
6、其他
去掉li前面的项目小圆点:list-style:none;
圆角边框:border-radius:length;
/*100px 等价于50%,就是宽度和高度的一半 */
border-radius: 100px;
若为正方形,设置为圆可把数值改为宽度和高度的一半(或50%);
若为矩形设置为高度的一半即可;
该属性的简写,可以跟四个值分别代表:左上角、右上角、右下角、左下角