Day 12 CSS <圆角边框、盒子阴影>

圆角边框

使用border-radius圆角边框样式，可以修改盒子边框变成圆角

语法:

border-radius:length;

//四边属性设置同样
border-radius: 10px;

//简写属性，顺序为 左上 右上 右下 左下 (顺时钟)
border-radius: 15px 12px 10px 5px;

//分开写
border-top-left-radius: 10px;
border-top-right-radius: 15px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 15px;

• 参数值可以为数值或百分比的形式
• 参数设置成正方形数值的一半或50%可成圆形
• 设置为高度的一半可成为矩形
• 该属性也可当简写属性 跟四个值

border-radius - - - codepen

盒子阴影

使用box-shadow属性为盒子添加阴影

语法:

box-shadow:h-shadow v-shadow blur spread color inset;
/* 
h-shadow 必须，水平阴影的位置 (可以为负值)
v-shadow 必须，垂直阴影的位置 (可以为负值)
blur     可选，模糊距离
spread   可选，阴影的尺寸
color    可选，阴影的颜色
inset    可选，将外部阴影改为内部阴影
*/
box-shadow: 10px 10px 10px 10px black; /*(经常使用的范例)*/
box-shadow: 10px 10px;

备注:

1. 默认的是外阴影(outset) 但是不可使用这个参数 否则将无效
2. 盒子阴影不占用空间，不会影响其他盒子排列

文字阴影

text-shadow 将文字添加阴影

语法:

text-shadow: h-shadow v-shadow blur color;
text-shadow: 2px 2px 5px black;
/* 
h-shadow 必须，水平阴影的位置 (可以为负值)
v-shadow 必须，垂直阴影的位置 (可以为负值)
blur     可选，模糊距离
color    可选，阴影的颜色
*/

box&text-shadow - - - codepen