CSS3学习四：新增的文字与字体相关的样式、新增的盒相关样式

一、文字与字体相关的样式：

1.给文字添加阴影：

text-shadow：length1 length2 length3 color

length1：必选参数，指阴影离开文字的横向位移多少，正数向右，负数向左。

length2：必选参数，指阴影离开文字的纵向位移多少，正数向下，负数向上。

length3：可选参数，指阴影的模糊半径，值越大，模糊的范围越大。默认为0，表示不向外模糊。

color：可选参数。省略该参数时，CSS2指定颜色为文字的颜色，CSS中用浏览指定的颜色。

示例：

        <style type="text/css">
            p {
                font-size: 50px;
                text-shadow: 20px 10px gray;
            }
        </style>

 

2.文字自动换行：word-break

让浏览器实现任意位置的换行。

属性值：

normal：使用浏览器默认的换行规则。

break-all：允许在单词内换行。

keep-all：只能在半角空格或连字符处换行。

<div id="box2">
            Me and my family visited The Epcot center this summer.
        </div>

        <style type="text/css">
            div {
                width: 100px;
                word-break: break-all;
            }
        </style>

 kepp-all多数浏览器不支持，包括chrom。

 

3.文本效果：text-overflow

文本溢出处理

示例：

文本溢出时，用"...."表示

            div {
                overflow: hidden;
                width: 50px;
                white-space: nowrap;
                text-overflow: ellipsis;
            }

 

 

 overflow:hidden，文本溢出时隐藏文本。

text-overflow：文本溢出时，用....代替。

white-space:nowrap，文本不换行。

三者应该同时使用，才能实现以上效果。

只有white-space：nowrap，则文本不会换行，所有文本在一行显示。

只有overflow：hidden，默认white-space是会换行的，因此文本超过一行时，换行显示；当行数超过元素的高度时，隐藏。

 

二、新增的盒相关样式 

1.盒阴影：box-shadow

语法，同文字阴影。

box-shadow：length1 length2 length3 color

2.盒边框的圆角：border-radius，可以有1,2,,3,4个值

 

示例：

            div {
                width: 100px;
                height: 100px;
                box-shadow: 5px 5px 5px coral;
                background-color: red;
                border-radius: 10px 50px; 
            }

 

 

        <div id="box2">
            Me and my family visited The Epcot center this summer.
        </div>