CSS3 背景和边框

CSS3完全向后兼容，因此不必改变现有的设计。
css3中的模块：
选择器，框模型，背景和边框，文本效果，2D/3D转换，动画，多列布局，用户界面
1. 边框
Internet Explorer 9+ 支持 border-radius 和 box-shadow 属性。
Firefox、Chrome 以及 Safari 支持所有新的边框属性。
圆角

<style>
div{
position:relative;
top:50px;
left:30px;
width:200px;
border:2px solid blue;
border-radius:20px;
}
</style>
<div>
这是一段文字，通过css3可以设置圆角。
</div>

阴影

<style>
div{
position:relative;
top:50px;
left:30px;
width:200px;
height:100px;
background-color:#CC6699;
box-shadow:10px 10px 5px #888888;<!--第一个参数：水平阴影的位置，允许为负值。第二个参数垂直阴影，允许负值。第三个参数模糊距离。-->
}
</style>
<div>
这是一段文字，通过css3可以设置阴影。
</div>

边框图像
border-image-source 用在边框的图片的路径。
border-image-slice 图片边框向内偏移。
border-image-width 图片边框的宽度。
border-image-outset 边框图像区域超出边框的量。
border-image-repeat 图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。

<style>
div
{
border:15px solid transparent;
width:300px;
padding:10px 20px;
}#round
{
-moz-border-image:url(/i/border.png) 30 30 round;   /* Old Firefox */
-webkit-border-image:url(/i/border.png) 30 30 round;    /* Safari and Chrome */
-o-border-image:url(/i/border.png) 30 30 round;     /* Opera */
border-image:url(/i/border.png) 30 30 round;
}#stretch
{
-moz-border-image:url(/i/border.png) 30 30 stretch; /* Old Firefox */
-webkit-border-image:url(/i/border.png) 30 30 stretch;  /* Safari and Chrome */
-o-border-image:url(/i/border.png) 30 30 stretch;   /* Opera */
border-image:url(/i/border.png) 30 30 stretch;
}
</style><div id="round">在这里，图片铺满整个边框。</div>
<br>
<div id="stretch">在这里，图片被拉伸以填充该区域。</div><p>这是我们使用的图片：</p>
<img src="/i/border.png">

2.背景
background-size
css3之前，背景图片的尺寸是由图片的实际尺寸决定的。在css3中，可以规定背景图片的尺寸，这就允许我们重复使用背景图片。

background-size:200px 100px;

background-origin属性
规定背景图片的定位区域

代码：

<style>
div{
border:2px solid blue;
padding:30px;
width:400px;
height:300px;
background-image:url(../images/1.jpg);
background-repeat:no-repeat;
}
#div1{
background-origin:border-box;
}<!--第一个背景图片放在边缘-->
#div2{
background-origin:content-box;<!--第一个背景图片放在内容-->
}
</style>
<div id="div1">
这是一段文字，这是一段文字，这是一段文字，这是一段文字，这是一段文字，这是一段文字，
</div>
<div id="div2">
这是一段文字，这是一段文字，这是一段文字，这是一段文字，这是一段文字，这是一段文字，
</div>

多重背景

background-image:url(../images/1.jpg),url(../images/11.png);

CSS3 背景和边框相关推荐

css3背景、边框、和补丁相关属性
border :基本语法 border: border-width || border-style || border-color 默认值为: medium none . border-color 的 ...
CSS3选择器、边框、背景、按钮
1.CSS3概述 (1).CSS3简介如同人类的的进化一样,CSS3是CSS2的"进化"版本,在CSS2基础上,增强或新增了许多特性,弥补了CSS2的众多不足之处,使得Web开 ...
08.CSS3选择器、边框、背景、按钮
CSS3概述 CSS3简介如同人类的的进化一样,CSS3是CSS2的"进化"版本,在CSS2基础上,增强或新增了许多特性, 弥补了CSS2的众多不足之处,使得Web开发变得更为高 ...
css3选择器、背景、边框、渐变、阴影以及文本效果的介绍及实现
HTML代码: <!DOCTYPE html> <html lang="en"> <head><meta charset="UT ...
css随记01编辑技巧,背景与边框
代码优化一个按钮的例子,使其值同比例变化; button{color: white;background: #58a linear-gradient(#77a0bb, #58a);padding: ...
css中的背景、边框、补丁相关属性
css中的背景.边框.补丁相关属性关于背景涉及到背景颜色与背景图片背景颜色background-color即可设定: 背景图片background-image即可设定: 但是背景图片还涉及到其他的 ...
CSS进阶（一）背景与边框
CSS进阶(一)背景与边框文章目录 CSS进阶(一)背景与边框一.浏览器前缀二.CSS编码技巧 1.尽量减少代码重复(可复用性) (1)当某些值相互依赖时,应该把他们的相互关系用代码表示出来 ( ...
【前端系列教程之CSS3】06_CSS3边框、渐变、文本效果等
一.CSS3边框(重要) 用 CSS3,你可以创建圆角边框,添加阴影框,并作为边界的形象而不使用设计程序,如 Photoshop. 1.1 CSS3边框圆角在 CSS2 中添加圆角棘手.我们不得不在 ...
css3动画边框一闪一闪,css3动画条纹边框_觉唯设计
之前分享过一篇关于<焦点图相框>的文章,深受大家的喜爱.今天也同样为大家分享一篇用css3制作的动画条纹边框,效果还是蛮有趣的,推荐大家用一用.玩一玩. 先简单的说一下实现原理,大家都可以 ...

CSS3 背景和边框

CSS3 背景和边框相关推荐

最新文章

热门文章