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. Java 中 Properties 类的操作

    一.Java Properties类 Java中有个比较重要的类Properties(Java.util.Properties),主要用于读取Java的配置文件,各种语言都有自己所支持的配置文件,配置 ...

  2. java-day26

    ## DOM简单学习:为了满足案例要求     * 功能:控制html文档的内容     * 获取页面标签(元素)对象:Element         * document.getElementByI ...

  3. jetson nano VNC

    寻找比较好的远程桌面方式,最新系统里有写. ======================================================================= README ...

  4. 一.Python特点

    python第一节 简介 Python介绍 什么样的语言? 解释性语言:开发中没有编译的环节 交互式语言:在命令提示行执行python引擎,直接执行代码 面向对象语言:支持面向对象 优点 a.易学 b ...

  5. 30个优秀的CSS技术和实例 By 彬Go 2008-12-04

    在这里可发现很多与众不同的技术,比如:图片集.阴影效果.可扩展按钮.菜单等…这些实例都是使用纯CSS和HTML实现的.单击每个实例的标题可以被转向到该技术实例的相关教程或说明页面(英文),单击每个实例 ...

  6. CKEditor与CKFinder学习--自定义界面及按钮事件捕获

    原文地址:CKEditor与CKFinder学习--自定义界面及按钮事件捕获  讨厌CSDN的广告,吃香太难看! 效果图 界面操作图 原始界面 调整后的界面(删除了flush,表单元素等) 该界面的皮 ...

  7. ros语音交互（五）移植科大讯飞语音识别到ros

    将以前下载的的语音包的 samples/iat_record/的iat_record.c speech_recognizer.c speech_recognizer.c 拷贝到工程src中, linu ...

  8. react 组件的构造函数

    constructor 函数时组件最先执行的函数 class childen extends react.Component{ constructor(props){ super(props); th ...

  9. Java 二叉树遍历相关操作

    BST二叉搜索树节点定义: /** * BST树的节点类型 * @param <T> */ class BSTNode<T extends Comparable<T>&g ...

  10. 【基础】Hint控制语句执行

    mysql常用的hint对于经常使用oracle的朋友可能知道,oracle的hint功能种类很多,对于优化sql语句提供了很多方法.同样,在mysql里,也有类似的hint功能.下面介绍一些常用的. ...