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. testNG官方文档翻译-1 简介

    官方文档链接http://testng.org/doc/documentation-main.html 简介 TestNG是一个被设计用来简化广泛的测试需求的测试框架,它既可应用于单元测试(测试一个独 ...

  2. 2变量与基本类型之const限定符

    一.const介绍: const对象一旦被创建其值就不能再改变,所以const对象必须初始化.任何试图对const赋值的行为都会引发错误. 二.初始化和const: 对const对象的主要限制就是只能 ...

  3. 使用js 判断当前运行环境实在浏览器还是在手机

    转: 在跨平台,各种浏览器,移动设备兼容的时候,经常要根据设备.浏览器做特定调整,所以判断设备和浏览器的工作,经常会用到,这里做一下总结. 有关浏览器类型的信息都藏在USER-AGENT里面,首先读取 ...

  4. 修改Ubuntu16.04默认主题标题栏的颜色

    默认主题为Ambiance: sudo gedit /usr/share/themes/Ambiance/gtk-3.0/gtk-main.css 将: @define-color dark_bg_c ...

  5. leetcode-158周赛-5225-最大相等频率

    题目描述: 方法: class Solution(object): def maxEqualFreq(self, A): count = collections.Counter() freqs = c ...

  6. SQL Server中配置ODBC数据源

    单击“开始→windows系统→控制面板”,打开控制面板 单击“管理工具→ODBC数据源(32位)”打开ODBC数据源配置对话框 在数据源配置对话框中单击“系统DSN”选项卡下的“添加”按钮,创建数据 ...

  7. JavaScript做个时间表 Date()

    <span id="shiji"></span><script> window.setInterval("time()",5 ...

  8. 《DNS攻击防范科普系列2》 -DNS服务器怎么防DDoS攻击

    在上个系列<你的DNS服务真的安全么?>里我们介绍了DNS服务器常见的攻击场景,看完后,你是否对ddos攻击忧心重重?本节我们来告诉你,怎么破局!! 首先回顾一下DDoS攻击的原理.DDo ...

  9. thinkphp 标签扩展

    标签库加载直线电机参数 模板中加载标签库,预加载自定义标签库,扩展内置标签库的加载 请参考:http://document.thinkphp.cn/manual_3_2.html#taglib 自定义 ...

  10. NX二次开发-UFUN获取工程图视图边界线是否显示UF_DRAW_ask_border_display

    #include <uf.h> #include <uf_draw.h> #include <uf_ui.h> UF_initialize(); logical b ...