CSS3 文本效果(阴影)

CSS3中包含几个新的文本特征。

在本章中您将了解以下文本属性：

  • text-shadow
  • box-shadow
  • text-overflow
  • word-wrap
  • word-break

 

CSS3 的文本阴影

CSS3 中，text-shadow属性适用于文本阴影。

阴影效果!

您指定了水平阴影，垂直阴影，模糊的距离，以及阴影的颜色：

<style>
h1
{
    text-shadow: 5px 5px 5px #FF0000;
}
</style>

 

 

1.　　CSS3 box-shadow属性

CSS3 中 CSS3 box-shadow 属性适用于盒子阴影

div
{
    width:300px;
    height:100px;
    background-color:yellow;
    box-shadow: 10px 10px 5px #888888;
}

 

 

 

接下来给阴影添加颜色

div {
    box-shadow: 10px 10px 5px grey;
}

 

 

 

2.　　CSS3 Text Overflow属性

CSS3文本溢出属性指定应向用户如何显示溢出内容

 

复制代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style> 
div.test
{
    white-space:nowrap; 
    width:12em; 
    overflow:hidden; 
    border:1px solid #000000;
}
</style>
</head>
<body>

<p>以下 div 容器内的文本无法完全显示，可以看到它被裁剪了。</p>
<p>div 使用 &quot;text-overflow:ellipsis&quot;:</p>

<div class="test" style="text-overflow:ellipsis;">This is some long text that will not fit in the box</div>
<p>div 使用 &quot;text-overflow:clip&quot;:</p>
<div class="test" style="text-overflow:clip;">This is some long text that will not fit in the box</div>
<p>div 使用自定义字符串 &quot;text-overflow: &gt;&gt;&quot;(只在 Firefox 浏览器下有效):</p>
<div class="test" style="text-overflow:'>>';">This is some long text that will not fit in the box</div>
</body>
</html>
复制代码

 

 

 

 

3.　　CSS3的换行

如果某个单词太长，不适合在一个区域内，它扩展到外面：

CSS3中，自动换行属性允许您强制文本换行 - 即使这意味着分裂它中间的一个字：

CSS代码如下：

 

p.test
{
    width:11em; 
    border:1px solid #000000;
    word-wrap:break-word;
}

 

 

 

 

CSS3 单词拆分换行

CSS3 单词拆分换行属性指定换行规则：

CSS代码如下：

复制代码
p.test1
{
    width:9em; 
    border:1px solid #000000;
    word-break:keep-all;
}

p.test2
{
    width:9em; 
    border:1px solid #000000;
    word-break:break-all;
}
</style>
复制代码

 

 

总结:

 

posted @   QiaoZhi  阅读(660)  评论(0)  编辑  收藏  举报
编辑推荐：
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
· 没有源码，如何修改代码逻辑？
· 一个奇形怪状的面试题：Bean中的CHM要不要加volatile？
阅读排行：
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码，我用AI程序员写了一个飞机大战
· Obsidian + DeepSeek：免费 AI 助力你的知识管理，让你的笔记飞起来！
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
点击右上角即可分享
微信分享提示