css---文本新增样式
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---文本新增样式的更多相关文章
- css 文本气泡样式
1.简易气泡 eg: html部分: <div class="bubble">我是气泡文本</div> css部分: //小三角.bubble:before ...
- css文本背景样式
文本样式 文本类 text-transform:uppercase: 全部变为大写 text-transform:lowercase: 全部变为小写 text-transform:capitalize ...
- 第 15 章 CSS 文本样式[下]
学习要点: 1.文本总汇 2.文本样式 3.文本控制 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 文本样式,通过文本样式的设置,更改字体的大小.样式以及文本的方位. 一．文本总汇 本节课, ...
- css文字与文本相关样式
css文字属性定义文本的字体系列,大小,加粗,风格和变形 font-family 设置字体系列 font-size 设置字体的尺寸 font-style ...
- 第 15 章 CSS 文本样式[上]
学习要点: 1.字体总汇 2.字体设置 3.Web 字体 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 文本样式,通过文本样式的设置,更改字体的大小.样式以及文本的方位. 一．字体总汇 本节 ...
- Css入门课程 Css文本样式
文字是网页的非常基础的内容,文本的样式设置也是非常重要的 1 字体大小 font-size:绝对大小单位和相对大小单位,绝对大小单位有cm,mm in(厘米,毫米,英寸)等,这是大小不随屏幕分辨率大小 ...
- CSS文字，文本常用样式
CSS文字,文本常用样式 字体属性 font-family 如果电脑没有第一个字体,就切换到下一个 body { font-family: Microsoft YaHei,Helvetica,Aria ...
- css 文本外观属性(text) 和 字体样式属性(font)
css文本 text外观属性 color: 颜色值(red,blue)十六进制 ,rgb letter-spacing: 字间距 px,em word-spacing: 单词间距 对中文无效 line ...
- css基础-css选择器和css文本样式相关
css基础-css选择器和css文本样式相关: 使用link链入外部样式,页面加载时会同时加载样式 @import url(“*.css”);使用导入式,页面加载完后,才会加载样式 链接伪类的顺序 : ...
- CSS/CSS3常用样式小结
1.强制文本单行显示: white-space:nowrap; 多行文本最后省略号: display: -webkit-box; -webkit-line-clamp:2; overflow: hid ...
随机推荐
- 6.2_springboot2.x分布式整合Dubbo
1.分布式应用 在分布式系统中,国内常用zookeeper+dubbo组合,而Spring Boot推荐使用全栈的Spring,Spring Boot+Spring Cloud. 分布式系统: 特 ...
- 《深入理解Java虚拟机》-（实战）boolean类型在虚拟机中是如何处理的
这里先引出Java的8大基本类型.直接上图吧. 可以看到,除了boolean和char类型之外,越往下的类型的值域是包含以上的值域的.因此,从上面的基本类型转换成下面的基本类型,无需强制转换.关于它们 ...
- [转] js对键盘输入事件绑定到特定按钮。
<script type="text/javascript" language="javascript"> document.onkeyup = f ...
- w - 显示已经登录的用户以及他们在做什么
总览 (SYNOPSIS) w - [husfV] [user] 描述 (DESCRIPTION) w 显示 系统中 当前用户 的 信息, 以及 他们 的 进程. 第一行 中 依次 显示 当前时间, ...
- singleton 类模板限制类只能定义一个对象
singleton 类模板限制类只能定义一个对象 singleton 类模板限制类只能定义一个对象 singleton 类模板限制类只能定义一个对象 ???
- 明年将制定个人信息保护法 网站部署https迫在眉睫
12月20日,全国人大常委会法工委举行第三次记者会.全国人大常委会法工委发言人岳仲明表示,中国明年将制定个人信息保护法.数据安全法等. 数据泄露为何频频出现 你是否经常接到骚扰电话?推销.诈骗等等均有 ...
- vue之自定义指令
1.自定义指令的作用 除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令.注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件.然而,有的情况下,你仍 ...
- 【Problem】xampp in ubuntu下命令行启动mysql报错： ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/opt/lampp/var/mysql/mysql.sock' (2)
xampp in ubuntu下命令行启动mysql报错: reddevil@reddevil-Lenovo:/opt/lampp$ ./bin/mysql -u root -p Enter pass ...
- Perl 运算符
Perl 运算符 运算符是一种告诉编译器执行特定的数学或逻辑操作的符号,如: 3+2=5. Perl 语言内置了丰富的运算符,我们来看下常用的几种: 算术运算符 比较运算符 逻辑运算符 赋值运算符 位 ...
- Delphi 2010下使用sqlitesimpledelphi连接SQLite数据库及中文乱码问题的解决
应女朋友的要求,要写一款销售管理的软件.用于管理服装店每天的销售记录,已及管理服装店的客户,并对客户进行生日提醒 因为之前使用C#写过一款家庭管理软件,主要是自己用,所以使用了服务器型数据库MySQL ...