圆角
div:nth-child(4){
border-radius:10px 20px 30px 40px;
}
div:nth-child(5){
border-radius:50%;
border:10px solid #f00;
}
div:last-child{
border:10px solid #f00;
border-radius:150px/150px;\
}
盒子阴影
box-shadow: 10px 10px 5px 5px rgba(0,0,0,0.5);\
| 值 | 描述 | 测试 |
|---|---|---|
| h-shadow | 必需。水平阴影的位置。允许负值。 | 测试 |
| v-shadow | 必需。垂直阴影的位置。允许负值。 | 测试 |
| blur | 可选。模糊距离。 | 测试 |
| spread | 可选。阴影的尺寸。 | 测试 |
| color | 可选。阴影的颜色。请参阅 CSS 颜色值。 | 测试 |
| inset | 可选。将外部阴影 (outset) 改为内部阴影。 |
内减
box-sizing:border-box;
背景图
div{
width: 500px;
height: 500px;
border:1px solid #f00;
margin:100px auto;
background:url(ldh.jpg) no-repeat left top,url(site-logo.png) repeat-x left bottom;\
}
background-clip: border-box|padding-box|content-box;
| 值 | 描述 | 测试 |
|---|---|---|
| border-box | 背景被裁剪到边框盒。 | 测试 |
| padding-box | 背景被裁剪到内边距框。 | 测试 |
| content-box |
\
background- position
| 值 | 描述 |
|---|---|
| * top left |
- top center
- top right
- center left
- center center
- center right
- bottom left
- bottom center
- bottom right | 如果您仅规定了一个关键词，那么第二个值将是"center"。默认值：0% 0%。 | | x% y% | 第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果您仅规定了一个值，另一个值将是 50%。 | | xpos ypos | 第一个值是水平位置，第二个值是垂直位置。左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。如果您仅规定了一个值，另一个值将是50%。您可以混合使用 % 和 position 值。 |
\
\
