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

1. 圆角

1.1 border-radius

从左上角顺时针转一圈
border-top-left-radius
border-top-right-radius
border-bottom-left-radius
border-bottom-right-radius

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

2.阴影

2.1 box-shadow

盒子阴影

            水平偏移   垂直偏移  [屏距][扩大半径] 颜色 
box-shadow: leftOffset topOffset blur spread color inset;

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

2.2 text-shadow

字体阴影

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

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

3.文本效果

3.1 text-overflow

规定应如何呈现隐藏的溢出内容，前提是overflow: hidden

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

一行显示文字，超出部分用...代替

overflow:hidden;
text-overflow:ellipsis;
white-space: nowrap;

// 三行
overflow:hidden;
text-overflow:ellipsis;
display: -webkit-box; 
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;

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指定引入的网络字体为某一font-family

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