CSS3

浏览数：22 / 时间：2015年06月09日

CSS3 边框

CSS3 圆角边框

border-radius：

div
{
   border:2px solid;
   border-radius:25px;
   -moz-border-radius:25px; /* Old Firefox */
}

CSS3 边框阴影

box-shadow：
div
{
    box-shadow: 10px 10px 5px #888888;
}

CSS3 边框图片

border-image：

div
{
     border-image:url(border.png) 30 30 round;
     -moz-border-image:url(border.png) 30 30 round; /* 老的 Firefox */
     -webkit-border-image:url(border.png) 30 30 round; /* Safari 和 Chrome */
     -o-border-image:url(border.png) 30 30 round; /* Opera */
}

 

CSS3 背景

调整背景图片的大小：

div
{
     background:url(bg_flower.gif);
     -moz-background-size:63px 100px; /* 老版本的 Firefox */
     background-size:63px 100px;
     background-repeat:no-repeat;
}

规定背景图片的定位区域:

背景图片可以放置于 content-box、padding-box 或 border-box 区域。

div
{
     background:url(bg_flower.gif);
     background-repeat:no-repeat;
     background-size:100% 100%;
     -webkit-background-origin:content-box; /* Safari */
     background-origin:content-box;
}

CSS3 文本效果

向文本应用阴影：

h1
{
    text-shadow: 5px 5px 5px #FF0000;
}

CSS3 自动换行:

word-wrap:允许对长单词进行拆分，并换行到下一行：
p {word-wrap:break-word;}

 



 

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： class style log si it la sp ha word class style log si it la sp ha word

相关文章

随机文章

您可能还喜欢

您可能还喜欢