CSS3_文本样式
1. 文字阴影 text-shadow
- 使用:
- text-shadow: 水平方向偏移量 垂直方向偏移量 模糊程度 颜色;
#box {
text-shadow: 10px 10px 3px deeppink; // 1个阴影
}- 多个阴影 加一个逗号 写第二个阴影的样式
#box {
text-shadow: 10px 10px 3px deeppink, 20px 20px 6px blue; // 2个阴影
}
2. text-shadow 做 浮雕文字
- 使用:
#box:hover {
color: #fff; //文字为 白色
text-shadow: 2px 2px 5px #000; // 黑色描边
}
3. text-shadow 做 文字模糊
- 使用:
#box:hover {
color: transparent; // 文字设置为透明
text-shadow: 0px 0px 80px rgba(0, 0, 0, 0.3); // 初探 CSS3 过渡
transition: 1s;
}
4. 文本描边 -webkit-text-stroke
- 使用:
#box:hover {
/* 文本描边:描边区域的宽度 颜色 */
-webkit-text-stroke:2px yellowgreen ;
}
5. 文字排版
- 使用:
#box:hover {
unicode-bidi: bidi-override; // 必须配合使用 // direction: ltr; // 默认方向,从左到右
direction: rtl; // 从右到左
}
6. 文字背景图片 -webkit-background-clip
- 使用:
#box:hover {
background-image: url(./img/bg.jpg);
background-repeat: no-repeat; /* 背景裁剪 */
-webkit-background-clip: text; // 沿着文字呈现 color: rgba(255, 0, 0, 0.3); // 让文本颜色透明,即可看到文字背景图
background-position: -12px -60px; // 调背景图片的位置
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>CSS3 文字样式</title> <style type="text/css">
body {
width: 100%;
color: #000;
background: #96b377;
font: 14px Helvetica, Arial, sans-serif;
} body>div {
width: 500px;
margin: 60px auto; font-size: 27px;
color: #3465c3;
text-align: center;
line-height: 54px;
background-color: #eee;
} #double_shadow:hover {
text-shadow: 10px 10px 3px rgba(255, 0, 0, 0.3), 20px 20px 6px rgba(0, 0, 255, 0.5);
} #embossed_text:hover {
color: #eee;
text-shadow: 0px 0px 6px #000;
} #fuzzy_text:hover {
color: transparent;
transition: 1s;
text-shadow: 0px 0px 30px rgba(43, 2, 2, 0.8);
} #stroke_text:hover {
font-size: 32px;
font-weight: 700;
-webkit-text-stroke: 1px red;
} #rtl_text:hover {
unicode-bidi: bidi-override;
direction: rtl;
} #bg_img_text:hover {
font-size: 48px;
font-weight: 700; background-image: url(./img/RocketRaccoon.jpg);
-webkit-background-clip: text;
color: transparent;
background-repeat: no-repeat;
background-position: -725px -877px;
}
</style>
</head> <body> <div id="text_shaow">
<span id="double_shadow">文字双阴影</span><br/> <span id="embossed_text">浮雕文字</span><br/> <span id="fuzzy_text">文字模糊</span><br/>
</div> <div id="text_border">
<span id="stroke_text">文字描边</span>
</div> <div id="text_direction">
<span id="rtl_text">文字排版</span>
</div> <div id="text_bg_img">
<span id="bg_img_text">文字背景</span>
</div> </body>
</html>
CSS3_文本样式的更多相关文章
- CSS中常见的6种文本样式
前面的话 CSS文本样式是相对于内容进行的样式修饰.由于在层叠关系中,内容要高于背景.所以文本样式相对而言更加重要.有些人对文本和字体样式之间的不同不太了解,简单地讲,文本是内容,而字体则用于显示这个 ...
- 第 15 章 CSS 文本样式[下]
学习要点: 1.文本总汇 2.文本样式 3.文本控制 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 文本样式,通过文本样式的设置,更改字体的大小.样式以及文本的方位. 一.文本总汇 本节课, ...
- 第 15 章 CSS 文本样式[上]
学习要点: 1.字体总汇 2.字体设置 3.Web 字体 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 文本样式,通过文本样式的设置,更改字体的大小.样式以及文本的方位. 一.字体总汇 本节 ...
- 重温CSS之背景、文本样式
CSS背景样式: 背景色:background-color属性,设置元素的背景色,如:div {background:blue;}--设置所有div元素的背景为蓝色: 背景图像:background- ...
- 6.css文本样式
文本样式,只要针对的是文本的效果和文本的方位,即文本样式和文本控制总结起来有一表中的属性可用: 属性名 说明 CSS 版本 text-decoration 装饰文本出现各种划线 1 text-tran ...
- css文本样式及控制文本的大小写
常用文本样式如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- css笔记-文本样式
聊聊text-decoration.text-indent.text-transform.letter-spacing.word-spacing.vertical-align.下面是一些常用设置文本样 ...
- 20190328-CSS样式一:字体样式font-、文本样式text-、背景图样式background-
目录 CSS参考手册:http://css.doyoe.com/ 1.字体简写:font:font-style || font-variant || font-weight || font-size ...
- HTML和CSS前端教程03-CSS文本样式
目录 1.CSS颜色-建议就用十六进制 2.CSS长度的度量单位-建议就用px 3.CSS文本样式 3.1. 字体属性 3.1. 文本样式 1.CSS颜色-建议就用十六进制 p{ color: #ff ...
随机推荐
- Linux Socket I/O
Ref: 一文读懂Socket通信原理 幽默讲解 Linux 的 Socket IO 模型
- luogu P5289 [十二省联考2019]皮配
传送门 首先考虑一个正常的dp,设\(f_{i,j,k}\)为前\(i\)个学校,\(j\)人在\(\color{#0000FF}{蓝阵营}\),\(k\)人在\(\color{#654321}{吔} ...
- vscode 正则表达式替换
比如把1.aa2.bbb替换成 1.aa2.bbb则,查找\d+ 替换成 \n$0 $0为查找的正则匹配项editplus为\0
- 【汇总目录】C#
[2019年04月29日] C# textbox 自动滚动 [2019年02月07日] C#利用VUDP.cs开发网络通讯应用程序 [2019年02月06日] C#利用VINI.cs操作INI文件 [ ...
- 爬虫-通过本地IP地址从中国天气网爬取当前城市天气情况
1.问题描述 最近在做一个pyqt登录校园网的小项目,想在窗口的状态栏加上当天的天气情况,用爬虫可以很好的解决我的问题. 2.解决思路 考虑到所处位置的不同,需要先获取本地城市地址,然后作为中 ...
- HTTP协议08-请求首部字段
请求首部字段 请求首部字段是从客户端往服务器端发送请求报文中所使用的字段,用于补充请求的附加信息.客户端信息,对响应内容相关的优先级等内容 1)Accept 通知服务器,用户代理能够处理的媒体类型及媒 ...
- ansible 使用记录
copy: ansible server -m copy -a 'src=/etc/ansible/port/iptables dest=/etc/sysconfig/iptables owner=r ...
- Angular笔记-select
--select-- 设置默认选中值方法: <select ng-model="url" ng-options="x.url as x.site for x in ...
- Java的家庭记账本程序(J)
日期:2019.3.9 博客期:041 星期六 这次就来看看我使用全新的模板写的家庭记账本程序!本次附带配色样式!作为本周的学习进度条吧!明天再研究微信小程序的方法! 这一次的记账本程序加了很多功能! ...
- ES6 语法学习(一)
1.let 和 const 关键字 let 与 var 的区别有: a.let 声明的变量只在当前的块级作用域内有效(块级作用域通俗的话就是被{}包裹起来的区域声明对象的{}例外). b.let 声明 ...