【css技术指南笔记】七章 border-radius box-shadow

border-radius:10px 6px 4px 12px / 20px 12px 8px 20px; //4 个 X 轴值,4 个 Y 轴值

顺序为 左上,右上,右下,左下

【css技术指南笔记】七章 border-radius box-shadow_第1张图片

阴影

box-shadow:4px 4px 5px 8px #444 inset;

假设是太阳的光造成的阴影;几个值分别代表:水平偏移量(太阳往左的距离),垂直量(太阳往上的距离),模糊量(阴影的模糊程度,0则就是实线),扩展量(将阴影延长多少,为负值时往里缩),颜色,阴影位于框内还是框外(inset、outset)

太阳越往左(水平偏移量)则右边的阴影越大,垂直偏移量同理

【css技术指南笔记】七章 border-radius box-shadow_第2张图片

你可能感兴趣的:(阴影,box-shadow,border-radius)