【前端开发系列】—— 文字阴影与样式

id与class的区别

id是这个界面唯一的元素，标识某个特定的容器，比如div等等。而class是一种样式，可以应用与多个div。

另外他们在配置CSS也是不同的：

id:

div#test1{
...
}

class:

div.test2{

}

text-shadow

为字体属性添加样式阴影

word-break

　　一段文字自动换行

　　normal：默认样式

　　keep-all：不分割单词

　　break-all：可以分割单词

@font-face字体属性

font-family：字体

font-size：字体大小

　　

<style type="text/css">
        div#div1{
            font-family:Comic Sans MS;
            font-size:16px;
            color:blue;
            word-break:keep-all;
            text-shadow:5px 5px 5px gray;
        }
        div#div2{
            font-family:Tahoma;
            font-size:16px;
            color:red;
            word-break:normal;
        }
        div.div3{
            font-family:Arial;
            font-size:16px;
            color:purple;
            word-break:break-all;
        }
        div.div4{
            font-family:Times New Roman;
            font-size:16px;
            color:green;
        }
    </style>

测试样例