opacity属性指定了一个元素的透明度

默认值：1.0 不可继承    兼容性不是太好

兼容性写法

opacity{

　　　opacity:0.5;

　　　filter:alpha(opacity=);  //filter 过滤器   兼容IE678

}
<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            *{

                margin: ;

                padding: ;

            }

            #wrap{

                width: 300px;

                height: 300px;

                margin: 100px auto;

                background: pink;

                opacity: 0.5;

                filter:alpha(opacity=);

            }

            #inner{

                width: 100px;

                height: 100px;

                background: deeppink;

            }

        </style>

    </head>

    <body>

        <div id="wrap">

            <div id="inner">

                inner

            </div>

        </div>

    </body>

</html>

rgba   颜色英文字符转换

            #wrap{

                width: 300px;

                height: 300px;

                margin: 100px auto;

                background: rgba(,,,.);

            }
<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            *{

                margin: ;

                padding: ;

            }

            #wrap{

                width: 300px;

                height: 300px;

                margin: 100px auto;

                background: rgba(,,,.);

            }

        </style>

    </head>

    <body style="background: url(img/zdy.jpg);">

        <div id="wrap">

        </div>

    </body>

</html>

rgb  背景颜色透明度

    background: rgb(,,);
<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            *{

                margin: ;

                padding: ;

            }

            #wrap{

                width: 300px;

                height: 300px;

                margin: 100px auto;

                background: rgb(,,);

                color: rgba(, , ,.);

                font-size: 30px;

                line-height: 300px;

                text-align: center;

            }

        </style>

    </head>

    <body>

        <div id="wrap">

            我是wrap

        </div>

    </body>

</html>

text-shadow  文字阴影

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            *{

                margin: ;

                padding: ;

            }

            h1{

                text-align: center;

                font: 100px/200px "微软雅黑";

                text-shadow:10px 10px 10px gray,pink 20px 20px 20px;

            }

        </style>

    </head>

    <body>

        <h1>尚硅谷</h1>

    </body>

</html>

text-shadow

text-shadow: black 1px 1px 100px;   浮雕文字

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            *{

                margin: ;

                padding: ;

            }

            h1{

                text-align: center;

                font: 100px/200px "微软雅黑";

                color: white;

                text-shadow: black 1px 1px 10px;

            }

        </style>

    </head>

    <body>

        <h1>博客园</h1>

    </body>

</html>

text-shadow  ：文字模糊

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            *{

                margin: ;

                padding: ;

            }

            h1{

                text-align: center;

                font: 100px/200px "微软雅黑";

                color: black;

                transition: 1s;

            }

            h1:hover{

                color: rgba(,,,);

                text-shadow: black   200px;

            }

        </style>

    </head>

    <body>

        <h1>博客</h1>

    </body>

</html>

模糊背景

<!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: ;

                padding: ;

            }

            #wrap{

                height: 100px;

                background: rgba(,,,.);

                position: relative;

            }

            #wrap #bg{

                position: absolute;

                left: ;

                right: ;

                top: ;

                bottom: ;

                background: url(img/avatar.jpg) no-repeat;

                background-size:% % ;

                z-index: -;

                filter: blur(10px);

            }

            img{

                margin: 24px   24px;

            }

        </style>

    </head>

    <body>

        <div id="wrap">

            <img src="img/avatar.jpg" width="64px" height="64px"/>

            <div id="bg"></div>

        </div>

    </body>

</html>

-webkit-text-stroke:pink 4px;   文字描边

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style>

    h1{

        font:100px/200px "微软雅黑";

        text-align:center;

        color:white;

        -webkit-text-stroke:pink 4px;

    }

</style>

</head>

<body>

<h1>尚硅谷</h1>

</body>

</html>

direction:rtl;
unicode-bidi:bidi-override； 文字排版

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style>

    div{

        width: 200px;

        height: 200px;

        border: 1px solid;

        margin:  auto;

        direction:rtl;

        unicode-bidi:bidi-override;

    }

</style>

</head>

<body>

    <div>博客园</div>

</body>

</html>

text-overflow: ellipsis;      溢出显示省略号

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style>

    div{

        width: 200px;

        height: 200px;

        border: 1px solid;

        margin:  auto;

        white-space: nowrap;

        overflow: hidden;

        text-overflow: ellipsis;

    }

</style>

</head>

<body>

    <div>尚硅谷尚硅谷尚硅谷尚硅谷尚硅谷尚硅谷尚硅谷尚硅谷尚硅谷尚硅谷尚硅谷尚硅谷尚硅谷尚硅谷尚硅谷</div>

</body>

</html>

css---文本新增样式的更多相关文章

  1. css 文本气泡样式

    1.简易气泡 eg: html部分: <div class="bubble">我是气泡文本</div> css部分: //小三角.bubble:before ...

  2. css文本背景样式

    文本样式 文本类 text-transform:uppercase: 全部变为大写 text-transform:lowercase: 全部变为小写 text-transform:capitalize ...

  3. 第 15 章 CSS 文本样式[下]

    学习要点: 1.文本总汇 2.文本样式 3.文本控制 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 文本样式,通过文本样式的设置,更改字体的大小.样式以及文本的方位. 一．文本总汇 本节课, ...

  4. css文字与文本相关样式

    css文字属性定义文本的字体系列,大小,加粗,风格和变形   font-family          设置字体系列 font-size          设置字体的尺寸 font-style     ...

  5. 第 15 章 CSS 文本样式[上]

    学习要点: 1.字体总汇 2.字体设置 3.Web 字体 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 文本样式,通过文本样式的设置,更改字体的大小.样式以及文本的方位. 一．字体总汇 本节 ...

  6. Css入门课程 Css文本样式

    文字是网页的非常基础的内容,文本的样式设置也是非常重要的 1 字体大小 font-size:绝对大小单位和相对大小单位,绝对大小单位有cm,mm in(厘米,毫米,英寸)等,这是大小不随屏幕分辨率大小 ...

  7. CSS文字，文本常用样式

    CSS文字,文本常用样式 字体属性 font-family 如果电脑没有第一个字体,就切换到下一个 body { font-family: Microsoft YaHei,Helvetica,Aria ...

  8. css 文本外观属性(text) 和 字体样式属性(font)

    css文本 text外观属性 color: 颜色值(red,blue)十六进制 ,rgb letter-spacing: 字间距 px,em word-spacing: 单词间距 对中文无效 line ...

  9. css基础-css选择器和css文本样式相关

    css基础-css选择器和css文本样式相关: 使用link链入外部样式,页面加载时会同时加载样式 @import url(“*.css”);使用导入式,页面加载完后,才会加载样式 链接伪类的顺序 : ...

  10. CSS/CSS3常用样式小结

    1.强制文本单行显示: white-space:nowrap; 多行文本最后省略号: display: -webkit-box; -webkit-line-clamp:2; overflow: hid ...

随机推荐

  1. Editor REST Client

    Editor REST Client 制作一个http请求 请求行 GET https://example.com/comments/1 HTTP/1.1 POST https://example.c ...

  2. Day 20: 面向对象【多态，封装，反射】字符串模块导入/内置attr /包装 /授权

    面向对象,多态: 有时一个对象会有多种表现形式,比如网站页面有个按钮, 这个按钮的设计可以不一样(单选框.多选框.圆角的点击按钮.直角的点击按钮等),尽管长的不一样,但它们都有一个共同调用方式,就是o ...

  3. jQuery片段 - 表单action的更改和提交

    //点击表单“提交”按钮 $("#submitBut").bind("click", function() { var url = "..." ...

  4. drf中间件流程图

  5. 天道神诀--samba和NFS部署

    samba yum -y install samba samba-client rpm -qa |grep samba service smb start(445端口) service nmb sta ...

  6. 转： Meshlab简介

    本文翻译自Meshlab主页:http://www.meshlab.net/ MeshLab是用于处理和编辑3D三角形网格的开源系统.它提供了一组用于编辑,清理,修复,检查,渲染,纹理和转换网格的工具 ...

  7. linux安装lolcat实现彩色文字输出信息

    [root@localhost ~]# mount /dev/sr0 /media/[root@localhost ~]# rpm -ivh epel-release-latest-7.noarch. ...

  8. 「题解」：Kill

    问题 A: Kill 时间限制: 1 Sec  内存限制: 256 MB 题面 题面谢绝公开. 题解 80%算法 赛时并没有想到正解,而是选择了另一种正确性较对的贪心验证. 对于每一个怪,我们定义它的 ...

  9. 暑假集训test-8-31(am)

    1.字符串匹配 看到题目以为真是字符串题结果是数学题..70分做法很傻逼然而我更傻逼只有30... 正解是发现两个位置会匹配当且仅当mod gcd(lena,lenb)同余,在一个lcm(lena,l ...

  10. NX二次开发-将对象移动到图层UF_OBJ_set_layer

    #include <uf.h> #include <uf_obj.h> #include <uf_modl.h> #include <uf_layer.h&g ...