css3的一些新属性1

weixin_30241919

于 2016-12-08 14:54:00 发布

阅读量149

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xiaodouding/p/6144953.html

本文介绍了CSS3中的文本阴影效果设置、文本强制换行属性word-wrap:break-word的应用以及2D转换的基本用法。通过实例展示了如何实现这些效果，并提供了代码示例。

<body>
/*文本阴影*/
<h1 style="text-shaow:5px 5px 5px #C0F">我爱你</h1>

</body>

　1.　效果如图：

2.word-wrap: break-word允许文本强制换行

<head>
<style> 
p.test
{
width:11em; 
border:1px solid #000000;
word-wrap:break-word;
}
</style>
</head>
<body>

<p class="test">This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p>

</body>
</html>

如图所示：

3.css3的2D转换

<style>

#kuang{
    height:50px;
    width:100px;
    border:1px solid red;
    background-color:#C3F;}/*正常的div*/
#kuang11{
    height:50px;
    width:100px;
    border:1px solid red;
    background-color:#6F0;
    margin-top:50px;
    transform:rotate(30deg)/*旋转后的div*/
    }
</style>
  <body>
<div id="kuang"></div>
<div id="kuang11"></div>
</body>