边框border:html
属性 | 用途 | 注意 |
---|---|---|
border-color | 边框颜色 | 颜色用十六进制#fff |
border-width | 边框宽度 | 单位px |
border-style | 边框样式 | solid实线,dashed虚线,dotted点线 |
综合写法 | 边框 样式 颜色 | border:1px solid red; |
border-top-style | 单独指定边框 | border-top-style:1px solid red; |
外边框margin:spa
marign:0 auto;
内边距padding:code
padding: 0 auto;
盒子阴影:htm
box-shadow:水平阴影 垂直阴影 模糊距离(虚实) 阴影尺寸(影子大小) 阴影颜色 内/外阴影;
值 | 描述 |
---|---|
h-shadow | 水平阴影ci |
v-shadow | 垂直阴影table |
blur | 模糊距离class |
spread | 阴影的尺寸样式 |
color | 阴影颜色margin |
inset | 内/外阴影top |
综合写法 | box-shadow:0 15px 30px rgba(0,0,0,.3); |
圆角边框:
border-radius:length;
盒子坍塌解决方案:
1.能够给父元素定义上边框 transparent透明 |
border-top:1px solid transparent; |
2.能够给父级指定一个上padding值 |
padding-top:1px; |
3.能够给父元素添加overflow:hidden |
overflow:hdden; |