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. 【小知识】神经网络中的SGD优化器和MSE损失函数

    今天来讲下之前发的一篇极其简单的搭建网络的博客里的一些细节 (前文传送门) 之前的那个文章中,用Pytorch搭建优化器的代码如下: # 设置优化器 optimzer = torch.optim.SG ...

  2. 5-vim-工作模式-02-工作模式切换演练

    1.末行模式 命令 英文 功能 :   进入末行模式 w write 保存 q quit 退出,如果没有保存,不允许退出 q! quit 强行退出,不保存退出 wq write&quit 保存 ...

  3. uoj#244. 【UER #7】短路

    题目 orz myy 这个矩形对称的性质非常优美,所以我们只需要考虑一个\(\frac{1}{4}\)的矩阵,即一个倒三角形 现在我们要求的是从\((1,1)\)到三角形对边上每个点的最短路,不难发现 ...

  4. VisualStuido中将C#脚本封装打包DLL并调用

    DLL (Dynamic Link Library)---动态链接库 首先了解下使用DLL的优势,程序运行时不用加载所有代码,只有运行到引用时,才从DLL库中取出.并且使用DLL文件还可以减小程序体积 ...

  5. HTML5和CSS3工具资源汇总

    HTML5 & CSS3 准备就绪 该网站通过扇形图表的形式展现了从08年到10年以来各大浏览器对HTML5和CSS3的支持情况.发展势头还是很可观的. HTML5安全手册 CSS3按钮生成器 ...

  6. Ubuntu 奇怪踩坑记录

    仓库ppa问题 当你使用 apt-get update 时候,提示 仓库 "http://ppa.launchpad.net/hzwhuang/ss-qt5/ubuntu bionic Re ...

  7. docker Dockerfile学习---nginx负载均衡tomcat服务

    1.此过程在nginx的基础上,也就是上篇博客写的内容. 2.创建项目目录并上传包,解压 $ mkdir centos_tomcat $ cd centos_tomcat $ tar zxvf jdk ...

  8. tomcat+apache+jk

    安装JDK下载地址 http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html安装 rpm ...

  9. WordTEX

    https://www.andrew.cmu.edu/user/twildenh/wordtex/

  10. 小程序登录时如何获取input框中的内容

    最近写小程序项目遇到一些问题,今天整理下这些问题的解决方法,希望对用户有帮助.下面是登录页,点击登录时获取input框中的值, 效果如下: wxml布局如下: <view > <in ...