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 ...
随机推荐
- certbot免费证书
yum install python-certbot-nginx 开启防火墙443端口 firewall-cmd --add-port=443/tcp --permanent 别忘了重启 firewa ...
- 巧用border属性
border是常见的css2属性,大家的印象中是不是只是作为边框使用,如下所示: 事实上border,还可以当做图标去使用 我们先来看段代码 <style> .div1{ margin: ...
- Avito Cool Challenge 2018 B - Farewell Party
题目大意: 有n个人 接下来一行n个数a[i] 表示第i个人描述其他人有a[i]个的帽子跟他不一样 帽子编号为1~n 如果所有的描述都是正确的 输出possible 再输出一行b[i] 表示第i个人的 ...
- eclipse search只能打开一个文件
通过search找到的文件只能打开一个.以前search打开的那个文件就自动关闭了,找不到了.解决办法: window-preferences-general-search找到第一行的一个选项 re ...
- svg圆环缓冲动画
代码如下 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8& ...
- JavaScript ---- 原型，原型链（什么是原型）
和“闭包”一样,“原型”这个概念也经常被提起. 其实这个“概念”应该和构造函数,对象放在一起讲,但是由于时间关系,先把这部分抽取出来讲.再讲这个概念时我们先大致了解下JavaScript中的“对象”. ...
- bootstrap 基础模板相关信息
<!DOCTYPE html> <html> <head> <title></title> <link rel="style ...
- cocos2D-X 常见49种Action
bool HelloWorld::init() { ////////////////////////////// // 1. super init first if ( !CCLayer::init( ...
- Java——package和import关键字
1.8 package和import关键字 1.8.1 package 包其实就是目录,特别是项目比较大,java 文件特别多的情况下,我们应该分目录管理,在java 中称为分包管理,包名称通常采用小 ...
- QString与string的相互转换【转载】
文章转载自https://blog.csdn.net/qq_33485434/article/details/80680506 1.QString转换String string s = qstr.to ...