前端学习之CSS---阴影、圆角、字体引入、怪异盒模型

阴影、圆角、字体引入、怪异盒模型

一、阴影

1、文本阴影

text-shadow:10px 10px 1px red;
水平方向位移 垂直方向位移 模糊程度 阴影颜色
text-shadow:10px 10px 1px red, 10px 10px 1px yellow;
需要多个阴影时用逗号隔开

 

2、盒子阴影

box-shadow:10px 10px 1px 10px red inset
水平方向位移 垂直方向位移 模糊程度 阴影大小 阴影颜色 设置为内阴影
box-shadow:10px 10px 1px red, 10px 10px 1px yellow;
需要多个阴影时用逗号隔开

blur 模糊程度 spread 阴影大小 color 阴影颜色 inset 内阴影

 

---

二、圆角

border-radius:10px单位：px或百分比

相当于矩形的角的顶点在水平和垂直方向上各缩进了一段距离，并将两个点用弧线连接

border-radius:10px 20px 30px 40px;
一个值:四个角一样
两个值:左上右下 左下右上
三个值:左上 左下右上 右下
四个值:顺时针

border-top-left-radius:10px;
只设置一个角，必须保证垂直方向在前，水平方向在后

border-radius:10px 20px 30px 40px/50px 60px 70px 80px
border-radius:30px/60px
水平/垂直 在不同方向缩进的距离不同

border-radius:50%;
超过盒子边长的一半时会变成圆形

 

---

三、字体引入

@font-face

CSS3中的一个模块，可以把自定义的字体引入web页面中

@font-face{
    font-family:<YourWebFontName>; //字体的名字，任意
    src:url(文件路径.ttf);
    [font-weight:<weight>]; //可选，是否加粗
    [font-style:<style>];	//可选，是否倾斜
}
div{
    font-family:YourWebFontName;
    font-size:16px;
}

 

---

四、怪异盒模型

盒子的宽高 = padding + border + content

• 普通的盒子：

  • 我们给div设置的长宽 = content，实际上计算盒子的宽高时会加上内边距和边框

• 怪异盒模型：

  • 我们给div设置的长宽 = padding + border + content
  • 如果同时设置了padding和border，盒子会挤压content的空间

只需在盒子的样式中加入下面的代码即可切换标准盒和怪异盒模型
box-sizing: content-box; //默认
标准盒模型
box-sizing: border-box;
怪异盒模型