CSS3中与文字相关的样式
1.给文字添加阴影:text-shadow属性(特别指出IE浏览器要IE10+的版本才支持)
语法如下:
text-shadow:length length length color;
其中,第一个参数length表示阴影离开文字的横向距离,为必需参数,该值为正时, 阴影在文字的右方,该值为负时,阴影在文字的左方;第二个参数length表示阴影离开文字 的纵向距离,为必需参数,该值为正时,阴影在文字的下方,该值为负时,阴影在文字上方 ;第三个length表示阴影的模糊半径,模糊半径为可选参数,默认值为0,数值越大,阴影越模糊;color表示阴影的颜色。
<div id="test1">
这是一个测试
</div> <style type="text/css">
#test1{
font-size: 40px;
text-shadow:10px 10px 15px red;
}
</style>
上例中给文字指定了向左10px,向下10px,模糊半径为15px的红色阴影,chrome浏览器中的效果如下:
也可以给文字指定多个阴影,并且每个阴影颜色可以不同,在指定时对多个阴影用逗号隔开,
<div id="test2">
这是一个测试
</div> <style type="text/css">
#test2{
font-size: 40px;
text-shadow:10px 10px 15px red,
25px 25px 15px green;
}
</style>
chrome浏览器中的效果如下:
2.使用服务器端字体:Web Font与@font-face属性
可以使用@font-face属性来利用服务器端字体,用法:
@font-face{
font-family:WebFont;
src:url(font/Fontin_Sans_R_45b.otf") format("opentype");
}
font-family的值WebFont用来声明使用服务器端字体,src路径指明服务器端字体文件所在的路径,format声明字体文件的格式,可以省略。在IE中只能使用微软自带的Embedded OpenType字体文件,文件扩展名为“.eot”。
3.让文本自动换行:word-break属性
用法:
<style type="text/css">
div{
word-break:keep-all;
}
</style>
word-break有三个取值:
normal:表示使用浏览器默认的换行规则;
keep-all:只能在半角空格或连字符处换行;
break-all:允许在单词内换行。
4.让长单词和URL地址自动换行:word-wrap属性
用法:
div{
word-wrap:break-word;
}
CSS3中与文字相关的样式的更多相关文章
- html5--6-16 CSS3中的文字与字体
html5--6-16 CSS3中的文字与字体 中文字体包很大,少量字体的话可以有其它方法. 有字库-首页-全球第一中文web font(在线字体)服务平台.web font.webfont.在线字体 ...
- html5--6-23 CSS3中的文字与字体
html5--6-23 CSS3中的文字与字体 text-overflow 设置是否使用一个省略标记(...)标示对象内文本的溢出 clip: 默认值当对象内文本溢出时不显示省略标记(...),而是将 ...
- html5--6-19 CSS3中的文字与字体
html5--6-19 CSS3中的文字与字体 学习要点 掌握文字与字体的设置 颜色值查询方法: 百度查询,很多网站有提供 下载相关手册等需要时查表 运用绘图工具中的拾色器 CSS中常用的字体属性设置 ...
- css3中的布局相关样式
web页面中的布局是指在页面中如何对标题.导航栏.主要内容.脚注.表单等各种构成要素进行合理编辑.在css3之前,主要使用float属性或position属性进行页面中的简单布局,但是也存在一些缺点, ...
- CSS3中媒体查询,更换样式表
<link rel="stylesheet" href="css/1.css" media="(min- width:600px)"& ...
- 转载 -- CSS3 中关于 select 下拉列表的样式
截图效果:
- css3 中的transition和transform
我以前始终都把他搞反,或者是混淆.现在可以稍微小结下. Transition:CSS3中处理动画的一个样式:只涉及动画起始和终止两个状态.如果涉及到一个动画的各个时间或者状态,那就必须要用到的另外一个 ...
- CSS3基础(2)—— 文字与字体相关样式、盒子类型、背景与边框相关样式、变形处理、动画功能
一. CSS3 文字与字体相关样式 1. 给文字添加阴影 text-shadow: length length length ccolor; 属性适用于文本阴影,指定了水平阴影,垂直阴影,模糊的距离, ...
- css3-5 css3鼠标、列表和尺寸样式怎么用(文字有关的样式会被继承)
css3-5 css3鼠标.列表和尺寸样式怎么用(文字有关的样式会被继承) 一.总结 一句话总结:css标签中文字有关的样式会被继承.由常用样式记起. 1.鼠标常用样式有哪些? cursor:poi ...
随机推荐
- 安装和配置jenkins
1.首先准备java环境,安装JDK 2.下载jenkins至Linux服务器 sudo wget -O /etc/yum.repos.d/jenkins.repo http://pkg.jenkin ...
- VS的编译选项
转载下,对于VS的编译选项介绍蛮清楚的!! 1. 静态链接库.动态链接库.CRT.STL 我们要到一个函数,要么是需要该函数的源代码,要么是知道该函数的声明并有该函数的实现,这里的“实现”又分为静态链 ...
- rgba透明的兼容处理
background-color: rgba(0, 0, 0, .6);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr ...
- servlet3.0 的新特性之二注解代替了web.xml配置文件
servlet3.0 的新特性: 注解代替了 web.xml 文件 支持了对异步的处理 对上传文件的支持 1.注解代替了配置文件 1.删除了web.xml 文件 2. 在Servlet类上添加@Web ...
- Mac 安装Minikube
环境信息: guoguo-MacBook-Pro-3:~ guoguo$ docker versionClient: Version: 17.12.0-ce API version: 1. ...
- 关于android编程中service和activity的区别
一. 绝大部分情况下,Service的作用是用来“执行”后台的.耗时的.重要的任务,三者缺一不可,而最重要的原因是第三点:要执行重要的任务. 因为当一个进程启动了Service后,进程的优先级变高了, ...
- AndroidStudio项目import进的包都是红色的
今天在开发项目时,一不留神,项目中import部分的内容全部变成了灰色,最后的类名却都变成了红色,如图: 一时之间,懵逼了~~~.Alt+Enter快捷键导包竟然是这个样子的@_@: 这简直就没见过 ...
- App的开发过程
不同的项目管理模式或许会有完全不同的流程步骤.但是专业性几乎是保证产品质量的唯一准则. App的开发过程主要分为以下阶段,本文会按顺序为大家简单地说明: 1.需求梳理.分析 2.产品原型图绘制 3.U ...
- 'is' in Python
在Python中应该避免将“is”运算符用于比较 像“数值”和“字符串”这种不可变的值.由于Python内部操作这些对象的方式,使得对这些对象使用“is”运算符的结果将是不可预测的. 下面以两个例子加 ...
- 面向对象之继承(Day24)
一.继承 1.什么是继承 继承是一种创建新类的方式,在Python中,新建的类可以继承一个或多个父类,父类又可称为基类或超类,新建的类称为派生类或子类 2.继承与抽象(先抽象再继承) 抽象基抽取类似或 ...