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 ...
随机推荐
- Jenkins和Docker
由于采用了Docker版的Jenkins,导致在Jenkins里无法调用Docker命令行工具进行Docker镜像构建 有三种解决方案: 1. 安装Docker插件,利用Jenkins插件进行构建 2 ...
- KMP2
poj 2752 #include<stdio.h> #include<iostream> #include<algorithm> #include<stri ...
- RTL_PROCESS_MODULE_INFORMATION
typedef struct _RTL_PROCESS_MODULE_INFORMATION { HANDLE Section; // Not filled in PVOID MappedBase; ...
- C语言指针和数组
#include <stdio.h> int main() { /********************************************* * * 指针和数组: * 定义 ...
- S1#Python之shebang
点1 - Python之shebang 一. shebang 在计算机科学中,Shebang是一个由井号和叹号构成的字符串行,其出现在文本文件的第一行的前两个字符. 在文件中存在Shebang的情况下 ...
- javascript基础入门之js中的结构分支与循环语句
javascript基础入门之js中的结构分支与循环语句 程序的结构①顺序结构:自上而下:②选择(分支)结构:多条路径,根据不同的条件,只执行其中一个:③循环结构:重复某些代码④配合特定的语句实现选择 ...
- 构建单页Web应用——简单概述
一.开发框架 ExtJS可以称为第一代单页应用框架的典型,它封装了各种UI组件,用户主要使用JavaScript来完成整个前端部分,甚至包括布局.随着功能逐渐增加,ExtJS的体积也逐渐增大,即使用于 ...
- Java SE（2）
1.this的两种用法:(1)当成员变量和局部变量重名是,可以用关键字this来区分 .this代表对象,代表的是this所在函数所属对象的引用(哪个对象调用了this所在的函数,this就代表哪个对 ...
- 搜索进阶课件,视频,代码(状态压缩搜索,折半搜索,dfs,bfs总结)
链接:https://pan.baidu.com/s/1-svffrprCOO4CtQoCTQ9hQ 提取码:h909 复制这段内容后打开百度网盘手机App,操作更方便哦
- 模拟+算贡献——cf1195D
比赛的时候没看到模数,用java大数在写,最后看到的时候已经慌了.. 把贡献算清楚就可以 下面是贡献的推导 有五位数 abcde * 10个 有两位数 fg * 3 个 那么这两种数组成的情况就是 a ...