码迷,mamicode.com
首页 > Web开发 > 详细

CSS3

时间:2015-05-18 20:07:36      阅读:114      评论:0      收藏:0      [点我收藏+]

标签:

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;}

 



 

CSS3

标签:

原文地址:http://www.cnblogs.com/showtime813/p/4512683.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!