HTML5技术

CSS3 基本知识 - 彼岸时光(8)

字号+ 作者:H5之家 来源:H5之家 2016-03-11 17:01 我要评论( )

在 Chrome 中显示如下: 下面的例子,是多个文本阴影效果: 文本阴影带有模糊效果的文本阴影霓虹灯效果的文本阴影白色文本上的阴影 在 Chrome 中显示如下: (2)、CSS3 强制换行 word-wrap 属性允许长的内容可以自动

  在 Chrome 中显示如下:

  下面的例子,是多个文本阴影效果:

文本阴影带有模糊效果的文本阴影霓虹灯效果的文本阴影白色文本上的阴影

  在 Chrome 中显示如下:

 

  (2)、CSS3 强制换行

  word-wrap 属性允许长的内容可以自动换行。

  默认值为 normal 只在允许的断字点换行,浏览器保持默认处理。当值为 break-word 时,指定在在长单词或 URL 地址内部进行换行。

  如果某个单词太长,就可能超出其包含块,扩展到外面。

  CSS3 的自动换行属性允许强制文本换行,即使这意味着会对单词进行拆分。

  IE9+、Firefox、Chrome、Safari 和 Opera 都支持 word-wrap 属性

  下面的例子,是浏览器默认换行和强制换行的对比:

文本换行彼岸时光: 彼岸流年,时光清浅彼岸时光: 彼岸流年,时光清浅

  由于各个游览器引擎对于文档的渲染存在差异,以及浏览器缺省值的不同,导致显示结果也存在差异,这一点在实际使用时需要注意,避免造成不必要的结果。

  清空上面文档的内外边距,重置浏览器的默认样式,具体显示如下:

  在 Chrome 中显示如下:

  在 IE9+ 中显示如下:

 

 

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • CSS3 选择器 - Glunefish

    CSS3 选择器 - Glunefish

    2017-04-22 09:00

  • HTML5和CSS3 - 奔跑在起跑线佼佼者

    HTML5和CSS3 - 奔跑在起跑线佼佼者

    2017-04-20 13:00

  • 【CSS3】精美横向滚动菜单按钮 - Glunefish

    【CSS3】精美横向滚动菜单按钮 - Glunefish

    2017-04-14 14:00

  • 【CSS3动画】下拉菜单模拟 - Glunefish

    【CSS3动画】下拉菜单模拟 - Glunefish

    2017-04-12 13:00

网友点评