标签：end block The none 虚线 多层 内容 style order
border-color
border-width
border-style
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-style
none
hidden
dotted
dashed 虚线
solid
double
border简写
同时设置边框的颜色、粗细和样式
实例：
border:1px solid#3a6587;
border: 1px dashedred;
margin
margin-top
margin-right
margin-bottom
margin-left
margin
网页居中对齐
margin:0px auto；
网页居中对齐的必要条件
块元素
固定宽度
padding
padding-left
padding-right
padding-top
padding-bottom
padding
盒子模型总尺寸=border+padding+margin+内容宽度
box-sizing
box-sizing：content-box | border-box | inherit；
,
| 属 性 名 | IE | Firefox | Chrome | Opera | Safari |
|---|---|---|---|---|---|
| box-sizing | 8+ | 1.5+ | 1.0+ | 9.0+ | 3.1+ |
半圆形
利用border-radius属性制作半圆形的两个要点
制作上半圆或下半圆时，元素的宽度是高度的2倍，而且圆角半径为元素的高度值
制作左半圆或右半圆时，元素的高度是宽度的2倍，而且圆角半径为元素的宽度值
扇形
利用border-radius属性制作扇形遵循“三同，一不同”原则
“三同”是元素宽度、高度、圆角半径相同
“一不同”是圆角取值位置不同
box-shadow:inset x-offset y-offset blur-radius color；
多层阴影用，隔开
| 属 性 名 | IE | Firefox | Chrome | Opera | Safari |
|---|---|---|---|---|---|
| box-shadow | 9+ | 3.5+ | 2.0+ | 10.5+ | 4.0+ |
标签：end block The none 虚线 多层 内容 style order
原文地址：https://www.cnblogs.com/joenx/p/13176055.html
