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 ...
随机推荐
- 第一章 Linux是什么
Linux是核心与系统调用接口两层中间的操作系统 不同硬件的功能函数并不相同,IBM的Power CPU与Inter的x86架构不同,所以同一套操作系统是不能在不同的硬件平台上面运行的.也就是说,每种 ...
- 不在B中的A的子串数量 HDU - 4416 (后缀自动机模板题目)
题目: 给定一个字符串a,又给定一系列b字符串,求字符串a的子串不在b中出现的个数. 题解: 先将所有的查询串放入后缀自动机(每次将sam.last=1)(算出所有子串个数) 然后将母串放入后缀自动机 ...
- 前端跨域实现的几种方式？及使用Nginx反向代理配置。
早期为了防止CSRF(跨域请求伪造)的攻击,浏览器引入了同源策略(SOP)来提高安全性.而所谓"同源策略",即同域名(domain或ip).同端口.同协议的才能互相获取资源,而不能 ...
- 微信小程序开发简易计算器改进版
微信小程序开发计算器有多种方法,但是大部分代码比较复杂.不容易理解.本案例进行了改进,主要是组件bindtap属性绑定的自定义函数clickBtn(),采用了switch语句,使得代码结构更加清晰,学 ...
- Pregel的计算过程
- 47. List中特有的方法
集合的体系:--------------| Collection 单列集合的根接口----------| List 如果实现了List接口的集合类,该类具备的特点是:有序,可重复---------- ...
- 16. 继承（extends）
1.语法 class 类名1 extends 类名2{ //成员变量和成员方法 } 2.继承要注意的事项: 1)千万不要为了减少重复代码而去继承,只有真正存在着继承关系的时候才去继承. 2)父类私有的 ...
- 七种数据库中Select Top的使用方法 （只显示数据库的几条记录）
七种数据库中Select Top的使用方法 1. Oracle数据库 SELECT * FROM TABLENAME WHERE ROWNUM <= N 2. Infomix数据库 SELE ...
- 引入CSS样式表（书写位置）
CSS可以写到那个位置? 是不是一定写到html文件里面呢? 内部样式表 内嵌式是将CSS代码集中写在HTML文档的head头部标签中,并且用style标签定义,其基本语法格式如下: <head ...
- Java中获取前一天和后一天时间
今天在开发项目的时候遇到一个问题就是怎么获取当前时间的前一天和后一天,这个实现的逻辑并不复杂,自己要写的话的也不是难事,但是貌似感觉没必要自己写这样的方法,想想Java中的Calendar类应该有这样 ...