CSS3 笔记三(Shadow/Text/Web Fonts)
2024-09-28 05:28:56
CSS3 Shadow Effects
text-shadow
box-shadow
1> text-shadow
- The text-shadow property adds shadow to text.
- This property accepts a comma-separated list of shadows to be applied to the text.
syntax
text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit;
Values
Value |
Description |
---|---|
h-shadow | Required. The position of the horizontal shadow. Negative values are allowed |
v-shadow | Required. The position of the vertical shadow. Negative values are allowed |
blur-radius | Optional. The blur radius. Default value is 0 |
color | Optional. The color of the shadow. Look at CSS Color Values for a complete list of possible color values |
none | Default value. No shadow |
initial | Sets this property to its default value. |
inherit | Inherits this property from its parent element. |
Example
h2 {
text-shadow: 0 0 3px #FF0000;
}
h1 {
color: white;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}
2> box-shadow
- The box-shadow property attaches one or more shadows to an element
box-shadow: none|h-shadow v-shadow blur spread color |inset|initial|inherit;
Values
Value | Description |
---|---|
none | Default value. No shadow is displayed |
h-shadow | Required. The position of the horizontal shadow. Negative values are allowed |
v-shadow | Required. The position of the vertical shadow. Negative values are allowed |
blur | Optional. The blur distance |
spread | Optional. The size of shadow. Negative values are allowed |
color | Optional. The color of the shadow. The default value is black. |
inset | Optional. Changes the shadow from an outer shadow (outset) to an inner shadow |
initial | Sets this property to its default value. |
inherit | Inherits this property from its parent element. |
Example
div {
box-shadow: 10px 10px 5px grey;
}
CSS3 Text
text-overflow
word-wrap
word-break
1> Text-overflow
text-overflow: clip|ellipsis|string|initial|inherit;
Values
Value | Description |
---|---|
clip | Default value. Clips the text |
ellipsis | Render an ellipsis ("...") to represent clipped text |
string | Render the given string to represent clipped text |
initial | Sets this property to its default value. |
inherit | Inherits this property from its parent element |
2> word-wrap
- The word-wrap property allows long words to be able to be broken and wrap onto the next line.
syntax
word-wrap: normal|break-word|initial|inherit;
Value | Description |
---|---|
normal | Break words only at allowed break points |
break-word | Allows unbreakable words to be broken |
3> word-break
The word-break property specifies line breaking rules for non-CJK scripts.
syntax
word-break: normal|break-all|keep-all|initial|inherit;q
Value | Description |
---|---|
normal | Default value. Break words according to their usual rules |
break-all | Lines may break between any two letters |
keep-all | Breaks are prohibited between pairs of letters |
Web Fonts
- Web fonts allow Web designers to use fonts that are not installed on the user's computer.
- When you have found/bought the font you wish to use, just include the font file on your web server, and it will be automatically downloaded to the user when needed.
- Your "own" fonts are defined within the CSS3
@font-face
rule.
Different Font Formats
1> TrueType Fonts (TTF)
2> OpenType Fonts (OTF)
3> The Web Open Font Format (WOFF)
4> The Web Open Font Format (WOFF 2.0)
5> SVG Fonts/Shapes
6> Embedded OpenType Fonts (EOT)
Example
@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
} div {
font-family: myFirstFont;
}
Tip: Always use lowercase letters for the font URL. Uppercase letters can give unexpected results in IE.
最新文章
- TopCoder kawigiEdit插件配置
- centos6-honeyd安装&;配置
- 攻城狮在路上(叁)Linux(二十二)--- linux磁盘挂载与卸载 mount umount
- 浅谈java性能分析
- ES5严格模式(Strict mode)
- TestLink学习一:Windows搭建Apache+MySQL+PHP环境
- WindowsService(Windows服务)开发步骤附Demo 【转】
- 隐藏自定义的tabbar之后,push到B视图,B视图的键盘工具条无法响应点击事件
- js压缩、混淆和加密
- iOS实用技能扩展-静态库的制作与简单使用
- 五种I/O 模式——阻塞(默认IO模式),非阻塞(常用语管道),I/O多路复用(IO多路复用的应用场景),信号I/O,异步I/O
- (原)Ubuntu16中卸载并重新安装google的Protocol Buffers
- Python学习笔记——基础篇【第四周】——迭代器&;生成器、装饰器、递归、算法、正则表达式
- hadoop环境运行程序出现 Retrying connect to server 问题
- Android第四次作业
- zookeeper的搭建和简单的使用
- RBM:深度学习之Restricted Boltzmann Machine的BRBM学习+LR分类—Jason niu
- java多线程系列10 阻塞队列模拟
- Python基础【day03】:文件操作(六)
- 移动端 图片切换 轮播(banner)
热门文章
- 配置Office 365单点登录过程中的一些注意事项
- Random随机类(11选5彩票)BigInteger大数据类(华为面试题1000的阶乘)
- 读书笔记:const和readonly、static readonly 那些事
- Thinkphp控制器,1.多层控制器2.多级控制器
- jQuery $ 第二个参数的用法
- ASP.NET MVC 项目中 一般处理程序ashx 获取Session
- SQLServer一次性删除重复的数据
- wamp下多域名配置问题
- JMeter学习-040-JMeter图形化 HTML 报表概要说明
- CentOS7 配置网卡端口镜像