2. border-radius、阴影、文本效果、字体

1. 圆角

---

1.1 border-radius

border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius

border-radius: 5px 10px 5px 10px
border-radius: 5px

2.阴影

---

2.1 text-shadow

字体阴影

text-shadow: 水平偏移，垂直偏移，模糊半径(可选)，颜色

text-shadow: 2px 5px 1px #666;
text-shadow: -1px 0 black, 1px 0 black, 
              0 1px black, 0 -1px black; // 实现文字边框效果

2.2 box-shadow

盒子阴影

box-shadow: 水平偏移 
            垂直偏移
            blur(模糊距离即模拟出阴影到屏幕远近距离，可选) 
            spread(阴影扩大尺寸，可选) 
            color 
            inset(默认为outer，可选);

3.文本效果

---

3.1 text-overflow

规定应如何向用户呈现未显示的溢出内容，前提是overflow: hidden

text-overflow: clip(裁剪) | ellipsis(省略号)

3.2 word-wrap

使长文字能够被折断并换到下一行

word-wrap: break-word;

3.3 word-break

指定换行规则

word-break: keep-all(连字符处打断) | break-all(任何字符串打断);

3.4 writing-mode

规定文本行是水平放置还是垂直放置

writing-mode: vertical-rl(垂直)|horizontal-tb(水平，默认); 

4.网络字体

---

可以使用@font-face定制规则引入网络字体

1.引入，并命名为myFirstFont
@font-face {
  font-family: myFirstFont;
  src: url(sansation_light.woff);
}
2.使用
div {
  font-family: myFirstFont;
}