css3文本与字体

text-shadow文本阴影

css3文本与字体

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style type="text/css">
        h1{
            text-shadow:  5px 5px 5px red;
        }
    </style>
    <title>Title</title>
</head>
<body>
<h1>lesson1 text-shadow</h1>
</body>
</html>

text-outline

文本轮廓

现在所有都不支持这个属性

css换行

word-wrap

css3文本与字体

新文本属性

css3文本与字体

这个属性只有在text-align设置为justify的时候才能设置并生效

css3文本与字体

效果如下

css3文本与字体

练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>text-overflow</title>
    <style type="text/css">
        p { width: 500px;font-size:20px; margin: 10px auto; background: #abcdef;overflow: hidden}
        /*此处写代码*/
        .p1{
            text-overflow: clip;
        }
        .p1:hover ,
        .p2:hover{
            overflow: visible;
        }
        .p2{
            text-overflow: ellipsis;
        }

    </style>
</head>
<body>
<p class="p1">bababadalgharaghtakamminarronnkonnbronntonne,rronntuonnthunn,trovarrhounawnskawntoohoohoordenenthurnuk</p>
<p class="p2">bababadalgharaghtakamminarronnkonnbronntonne,rronntuonnthunn,trovarrhounawnskawntoohoohoordenenthurnuk</p>
</body>
</html>

总结：1.p要加上overflow：hidden

css3字体

加载出不是电脑自带的字体

css3文本与字体

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>CSS字体</title>
<style type="text/css">
@font-face {
    font-family: 'myfont';
    src: url('font/myFont.eot');/*ie9*/
    src: url('font/myFont.eot?#iefix') format('embedded-opentype'),/*ie6 -ie8*/
         url('font/myFont.ttf') format('truetype'),/*safari android ios*/
         url('font/myFont.woff') format('woff'),/*modern browser*/
         url('font/myFont.svg#myFont') format('svg');/*legacy ios*/
}
h1 {
    font-family: 'myfont';
}
</style>
</head>
<body>
<h1>将梦想悬挂于枝头，在夏季的丰盛中饱满，绽放；为梦想披星戴月，刷新生命的温度。那些因梦想蜕变了的灵魂，历经时光坎坷，痛苦挣扎，依然在枝头放歌，温暖了生命如花的影子。前世，储蓄梦想；今生，演绎铿锵。</h1>
</body>

</html>

相关推荐