css3_边框与背景

Myth丶恋晨 2022-05-25 05:11 230阅读 0赞

Css3只能在ie8以上的版本才能用。

1. 边框圆角

<div class="radius">边框圆角</div>

.radius\{width:200px;height:100px;border:1px solid red;margin:50px auto;

border-radius:20px;

border-top-left-radius:20px;

border-top-right-radius:30px;

border-bottom-right-radius:40px;

border-bottom-left-radius:5px;

\}

![20180508161917605][]

2. 边框阴影

<div class="shadow">边框阴影</div>

.shadow\{

width:200px;height:100px;border:1px solid red;margin:50px auto;

/\*水平 垂直 模糊半径 扩展半径 颜色\*/

box-shadow:2px 3px 4px 5px \#00CCFF;

\}

![20180508161937932][]

<div class="shadow\_inset">边框向内阴影</div>

.shadow\_inset\{width:200px;height:100px;border:1px solid red;margin:20px auto;

box-shadow:inset 0px 0px 9px 2px \#00CCFF;

\}

![20180508162000498][]

3. 背景

<div class="background">

<p>

CSS3 包含多个新的背景属性，它们提供了对背景更强大的控制。<br />

background-size<br/ >

background-origin<br/ >

</p>

</div>

.background\{width:600px;height:300px;border:1px solid red;margin:10px auto;

background:url("images/RAV4.jpg") no-repeat;

\}

** ![20180508162021474][]**

1.**指定背景大小**

.background\{ width:600px;height:300px;border:1px solid red;margin:10px auto;

background:url("images/RAV4.jpg") no-repeat;

background-size:500px 250px;

\}

指定大小为宽500px 高25px，如图：

![20180508162043820][]

指定大小为比例，宽100% 高80%，如图：

![20180508162107710][]

按比例放缩的情况下最大化，不超出容器（容器可能有空白）

![20180508162130698][]

按比例放缩，填充满容器（图片可能部分在容器外）

![20180508162154780][]

[20180508161917605]: /images/20220525/dbf64b283a3d423aac587db0be86baf7.png
[20180508161937932]: /images/20220525/8b6fc7cb30274cfa91ff89d885f35055.png
[20180508162000498]: /images/20220525/525422c2aa314ce3b34c7b9cb2cd3a9f.png
[20180508162021474]: /images/20220525/175d663ccf9f465db9cd3ec33b35381f.png
[20180508162043820]: /images/20220525/98ccccca00d04483b49c887505cce209.png
[20180508162107710]: /images/20220525/e4e8074c2a7643119ad042c4cd226d72.png
[20180508162130698]: /images/20220525/99118ed69eda466a82089a4f35af03f2.png
[20180508162154780]: /images/20220525/ebdca153609c4350a1cee031ff8b7dac.png

发表评论取消回复

表情：

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

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

相关阅读

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

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

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

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

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

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

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

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

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

相关 CSS3 背景和边框

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

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

相关 HTML5+CSS3-边框背景图、多背景图、CSS选择器、网络字体、边框背景图片、过渡、放大、旋转

边框背景图片 1、 background-origin：设置背景图片的起始原点 background-origin:border-box;------背景图片从边框开始显

野性酷女/ 2022年08月22日 15:13/ 0 赞/ 231 阅读

相关 CSS3 选择器、颜色与度量单位、文本、边框、背景

一．选择器总汇本节课主要涉及到三种选择器：基本选择器、复合选择器和伪元素选择器，具体如下：选择器名称说明 CSS 版本 \ 通用选择器选择所有元素 2

秒速五厘米/ 2022年06月10日 08:29/ 0 赞/ 188 阅读

相关 css3_边框与背景

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

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

相关【CSS3】边框

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

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

相关 CSS3 变色背景动态边框

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

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

相关 CSS3边框与圆角

1. CSS3 圆角 border-radius 属性 > 一个最多可指定四个border -\- radius属性的复合属性，这个属性允许你为元素添加圆角边

水深无声/ 2021年11月05日 12:56/ 0 赞/ 359 阅读