CSS3 背景和边框

叁歲伎倆 2022-09-21 05:36 220阅读 0赞

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

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

**阴影**  
![这里写图片描述][20160616095527190]

<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)。  
![这里写图片描述][20160616100723849]

<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属性**  
规定背景图片的定位区域  
![这里写图片描述][20160616101245415]  
![这里写图片描述][20160616102020848]  
代码：

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

**多重背景**  
![这里写图片描述][20160616102715577]

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

[20160616095052546]: /images/20220721/573c14cdb964400593b696572575ceb5.png
[20160616095527190]: /images/20220721/2d92ccff6539464a95090e8a44be2b82.png
[20160616100723849]: /images/20220721/ded87c14a0044e09a233b3f43d556248.png
[20160616101245415]: /images/20220721/b4646145c00749a28873ded801482c5c.png
[20160616102020848]: /images/20220721/02e9834cab6643838b6a0487ab3a638c.png
[20160616102715577]: /images/20220721/b940f1e44256413793ad3431b954a321.png

发表评论取消回复

表情：

评论列表（有 0 条评论，220人围观）

还没有评论，来说两句吧...

相关阅读

相关 css中的边框和背景属性

边框属性 border边框 border-width： 1、一个值：四个方向； 2、两个值：上下 ![~~~~][equation_tex] 左右 ...

骑猪看日落/ 2024年04月17日 06:30/ 0 赞/ 80 阅读

相关 CSS3新增属性----背景和边框

一些最重要CSS3模块如下：选择器盒模型背景和边框文字特效 2D/3D转换动画多列布局用户界面 CSS3 边

亦凉/ 2022年12月01日 14:14/ 0 赞/ 283 阅读

相关 CSS3 新增属性（边框，背景，文字，颜色属性）

CSS3 新增属性边框属性背景属性文字属性颜色属性 > 1. 边框属性 <table> <thead> <tr>

秒速五厘米/ 2022年10月13日 01:46/ 0 赞/ 275 阅读

相关 CSS3——新增背景属性和边框样式

新增背景属性 background-clip background-origin

红太狼/ 2022年09月25日 11:20/ 0 赞/ 262 阅读

相关 CSS3 背景和边框

CSS3完全向后兼容，因此不必改变现有的设计。 css3中的模块：选择器，框模型，背景和边框，文本效果，2D/3D转换，动画，多列布局，用户界面 1. 边框

叁歲伎倆/ 2022年09月21日 05:36/ 0 赞/ 221 阅读

相关 css3_边框与背景

Css3只能在ie8以上的版本才能用。 1. 边框圆角 <div class="radius">边框圆角</div> .radius\{width:200px;heigh

Myth丶恋晨/ 2022年05月25日 05:11/ 0 赞/ 248 阅读

相关 CSS3的背景、边框和边距相关属性

CSS3 包含多个新的背景属性，它们提供了对背景更强大的控制，进一步增强了背景功能，这些属性可以控制背景图片的显示位置、分布方式等；除此之外，CSS3还新增了多背景图片支持，从

野性酷女/ 2022年04月22日 18:44/ 0 赞/ 288 阅读

相关【CSS3】边框

CSS3 边框用 CSS3，你可以创建圆角边框，添加阴影框，并作为边界的形象而不使用设计程序，如 Photoshop。在本章中，您将了解以下的边框属性： ![

桃扇骨/ 2022年03月21日 14:46/ 0 赞/ 284 阅读

相关 CSS3 变色背景动态边框

动态边框样式参考： [https://juejin.im/post/5cdbc938f265da034d2a38c1\heading-2][https_juejin.im_po

ゞ浴缸里的玫瑰/ 2022年01月31日 09:15/ 0 赞/ 290 阅读

相关 css背景和边框，了解一下

![这里写图片描述][70] css圆角边框 border-radius 表格border-collapse属性为separate，表格圆角才能正常显示背景属性

╰+攻爆jí腚メ/ 2021年09月15日 12:56/ 0 赞/ 357 阅读