CSS3----文本新增样式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #wrap{
                width: 300px;
                height: 300px;
                margin: 100px auto;
                background: pink;
                opacity: 0.1;
            }
            #inner{
                width: 100px;
                height: 100px;
                background: deeppink;
            }
        </style>
    </head>
    <body>
        <div id="wrap">
            <div id="inner">
                inner
            </div>
        </div>
    </body>
</html>

设置文字阴影

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #wrap{
                width: 300px;
                height: 300px;
                margin: 100px auto;
                background: rgba(0,0,0,.5);
                /* 最后的.5是透明度 */
            }
        </style>
    </head>
    <body style="background: url(img/zdy.jpg);">
        <div id="wrap">
        </div>
    </body>
</html>

rgba的使用，注意 background:rgba(0,0,0,.5);最后的.5是透明度

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #wrap{
                width: 300px;
                height: 300px;
                margin: 100px auto;
                background: rgba(0,0,0,.1);
                color: #FFFFFF;
                font-size: 30px;
                line-height: 300px;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div id="wrap">
            我是wrap
        </div>
    </body>
</html>

背景透明文字不透明、

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
h1{ 
    font:100px/200px "微软雅黑"; 
    text-align:center; 
    text-shadow: -5px -10px ,5px 10px pink;
    /* text-shadow: ;中的参数  颜色 偏移量 模糊程度*/
}
</style>
</head>
<body>
<h1>尚硅谷</h1>
</body>
</html>

文字阴影　　text-shadow属性，属性值分别是颜色偏移量（-x　-y）模糊程度

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
/* h1{ 
    font:100px/200px "微软雅黑"; 
    color: white;
    text-align:center; 
    text-shadow:2px 2px 9px black;
} */
h1{
    font: 100px/200px "微软雅黑";
    text-align: center;
    color: white;
    text-shadow: black 1px 11px 10px;
}
</style>
</head>
<body>
<h1>尚硅谷</h1>
</body>
</html>

设置文字浮雕注意运用text-shadow

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
/* h1{ 
    font:100px/200px "微软雅黑"; 
    text-align:center; 
    color:#000; 
    text-shadow:0 0 0 rgba(0,0,0,1); 
    border:1px solid #000; 
    transition:1s;
}
h1:hover{
    color:rgba(0,0,0,0);
    text-shadow:0 0 100px rgba(0,0,0,0.5);
} */
h1{
    font: 100px/200px "微软雅黑";
    text-align: center;
    color: black;
    transition: 1s;
}
h1:hover{
    color: rgba(0,0,0,0);
    text-shadow: black 0 0 50px;
}

</style>
</head>
<body>
    <h1>尚硅谷</h1>
</body>
</html>

使用伪类hover设置文字模糊

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/>
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            /* #header{
                position: relative;
                background: rgba(0, 0, 0,.5);
                height: 100px;
                overflow: hidden;
            }
            #header > img{
                margin: 24px 0 0 24px;
            }
            #header #bg{
                position: absolute;
                left: 0;
                top: 0;
                bottom: 0;
                right: 0;
                z-index: -1;
                background: url(img/avatar.jpg) no-repeat;
                background-size:100% 100% ;
                filter: blur(10px); */
            
            .wrap img{
                width: 64px;
                height: 64px;
                margin: 24px 0 0 24px;
                position: relative;
            }
            .wrap{
                height: 100px;
                /* background-color: pink; */
            }
            .wrap .bg{
                position: absolute;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                background: url(img/avatar.jpg) no-repeat;
                background-size: 100% 100%;
                z-index: -1;
                /*元素模糊注意不是背景模糊*/
                filter: blur(10px);
            }
            
            }
        </style>
    </head>
    <body>
        <<!-- div id="header">
            <img src="img/avatar.jpg" width="64" height="64"/>
            <div id="bg"></div>
        </div> -->
        <div class="wrap">
            <img src="img/avatar.jpg" >
            <div class="bg"></div>
        </div>
    
    
    </body>
</html>

设置背景模糊

CSS3中filter属性设置　　filter：blur（10px）；

注意是元素模糊而不是背景模糊

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
    h1{ 
        font:100px/200px "微软雅黑"; 
        text-align:center; 
        color:white;
        -webkit-text-stroke:4px pink;
    }
</style>
</head>
<body>
<h1>尚硅谷</h1>
</body>
</html>

设置文字描边

　　使用-webkit-text-stroke:描边的大小颜色;（注释：两个属性值：大小　颜色）

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
/* p{
    width:300px;
    border:1px solid #000;
    font:14px/30px "宋体";
    direction:ltr;
    unicode-bidi:bidi-override;
} */
div{
    width: 200px;
    height: 200px;
    border: 1px solid;
    margin: 0 auto;
    direction: rtl;
    unicode-bidi: bidi-override;
}

</style>
</head>
<body>
    <div>尚硅谷</div>
</body>
</html>

设置文字的排版，注意direction，属性值

ltr 默认.文本方向从左到右
rtl 文本方向从右向左

unicode-bidi：;

　　　属性值normal　默认值，元素不会打开额外嵌入级别

　　　　　　bidi-override 对于行内元素，创建一个覆盖，对于块元素，将为不在另一个块元素的行内级别后代元素创建一个覆盖

注意：unicode-bidi要和direction一起使用

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
/* p{
    width:300px;
    border:1px solid #000;
    font:14px/30px "宋体";
    white-space:nowrap; 
    overflow:hidden; 
    text-overflow:ellipsis; 
} */
div{
    width: 200px;
    height: 200px;
    border: 1px solid black;
    margin: 0 auto;
    direction: ltr;
    
    
    /* 以下三条样式是绑定在一起的 */
    /*文字不换行*/
    white-space: nowrap;
    overflow: hidden;
    /*溢出内容显示省略号*/
    text-overflow: ellipsis;
}
</style>
</head>
<body>
<!-- <p>尚硅谷的张晓飞同志 你为什么你们有钱 昂？ 为什么？ 昂？</p> -->
<div>尚硅谷的张晓飞同志 你为什么你们有钱 昂？ 为什么？ 昂？尚硅谷的张晓飞同志 你为什么你们有钱 昂？ 为什么？ 昂？</div>
</body>
</html>

设置超出部分省略号

　　注意：文字不换行 white-space：nowrap；

　　　　　溢出部分显示省略号 text-overflow：ellipsis；

　　　　　想要达到这种效果 white-space overflow：hidden； text-overflow:ellipsis;一起使用

posted @ 2021-07-13 12:05 2237774566 阅读(82) 评论(0) 收藏举报

刷新页面返回顶部

2237774566

CSS3----文本新增样式

公告