【CSS3系列】第二章 · CSS3 新增盒模型和背景属性 |
您所在的位置：网站首页 › 渐变高级背景图 › 【CSS3系列】第二章 · CSS3 新增盒模型和背景属性 |
【CSS3系列】第二章 · CSS3 新增盒模型和背景属性
|
写在前面
Hello大家好， 我是【麟-小白】，一位软件工程专业的学生，喜好计算机知识。希望大家能够一起学习进步呀！本人是一名在读大学生，专业水平有限，如发现错误或不足之处，请多多指正！谢谢大家！！！ 如果小哥哥小姐姐们对我的文章感兴趣，请不要吝啬你们的小手，多多点赞加关注呀！❤❤❤ 爱你们！！！
目录 写在前面 1. 新增盒模型相关属性 1.1 box-sizing 怪异盒模型 1.2 resize 调整盒子大小 1.3 box-shadow 盒子阴影 1.4 opacity 不透明度 2. CSS3 新增背景属性 2.1 background-origin 2.2 background-clip 2.3 background-size 2.4 backgorund 复合属性 2.5 多背景图 结语 【往期回顾】 【CSS3系列】第一章 · CSS3新增的三种基本属性 【其他系列】 【HTML5系列】 【HTML4系列】 【CSS2系列】 【Java基础系列】 1. 新增盒模型相关属性 1.1 box-sizing 怪异盒模型 使用 box-sizing 属性可以设置盒模型的两种类型
语法： box-shadow: h-shadow v-shadow blur spread color inset;各个值的含义： 
默认值： box-shadow:none 表示没有阴影
示例： /* 写两个值，含义：水平位置、垂直位置 */ box-shadow: 10px 10px; /* 写三个值，含义：水平位置、垂直位置、颜色 */ box-shadow: 10px 10px red; /* 写三个值，含义：水平位置、垂直位置、模糊值 */ box-shadow: 10px 10px 10px; /* 写四个值，含义：水平位置、垂直位置、模糊值、颜色 */ box-shadow: 10px 10px 10px red; /* 写五个值，含义：水平位置、垂直位置、模糊值、外延值、颜色 */ box-shadow: 10px 10px 10px 10px blue; /* 写六个值，含义：水平位置、垂直位置、模糊值、外延值、颜色、内阴影 */ box-shadow: 10px 10px 20px 3px blue inset; 03_box-shadow .box1 { width: 400px; height: 400px; background-color: orange; margin: 0 auto; margin-top: 100px; font-size: 40px; /* 写两个值，含义：水平位置 垂直位置 */ /* box-shadow: 10px 10px; */ /* 写三个值，含义：水平位置 垂直位置 阴影的颜色 */ /* box-shadow: 10px 10px blue; */ /* 写三个值，含义：水平位置 垂直位置 模糊程度 */ /* box-shadow: 10px 10px 20px; */ /* 写四个值，含义：水平位置 垂直位置 模糊程度 阴影颜色 */ /* box-shadow: 10px 10px 20px blue; */ /* 写五个值，含义：水平位置 垂直位置 模糊程度 外延值 阴影颜色 */ /* box-shadow: -10px -10px 20px 10px blue; */ /* 写六个值，含义：水平位置 垂直位置 模糊程度 外延值 阴影颜色 内阴影 */ /* box-shadow: 10px 10px 20px 10px blue inset; */ position: relative; top: 0; left: 0; transition: 0.4s linear all ; } .box1:hover { box-shadow: 0px 0px 20px 10px black; top: -1px; left: 0; } 你好啊 1.4 opacity 不透明度 opacity 属性能为整个元素添加透明效果， 值是 0 到 1 之间的小数， 0 是完全透明， 1 表示完全不透明。 opacity 与 rgba 的区别？ opacity 是一个属性，设置的是整个元素（包括元素里的内容）的不透明度。 rgba 是颜色的设置方式，用于设置颜色，它的透明度，仅仅是调整颜色的透明度。 04_opacity .box1 { width: 200px; height: 200px; background-color: orange; font-size: 40px; opacity: 0.1; font-weight: bold; } .box2 { position: relative; } h1 { position: absolute; top: 100px; left: 0; background-color: black; color: white; width: 400px; line-height: 100px; text-align: center; font-size: 40px; opacity: 0.5; } 你好啊
你瞅啥
作用：设置背景图的原点。 语法 padding-box ：从 padding 区域开始显示背景图像。—— 默认值 border-box ：从 border 区域开始显示背景图像。 content-box ：从 content 区域开始显示背景图像。 01_background-origin .box1 { width: 400px; height: 400px; background-color: skyblue; margin: 0 auto; font-size: 40px; padding: 50px; border: 50px dashed rgba(255, 0, 0, 0.7); background-image: url('../images/bg01.jpg'); background-repeat: no-repeat; background-origin: border-box; } 你好啊 2.2 background-clip作用：设置背景图的向外裁剪的区域。 语法 border-box ：从 border 区域开始向外裁剪背景。 —— 默认值 padding-box ：从 padding 区域开始向外裁剪背景。 content-box ：从 content 区域开始向外裁剪背景。 text ：背景图只呈现在文字上。 注意：若值为 text ，那么 backgroun-clip 要加上 -webkit- 前缀。 02_background-clip .box1 { width: 400px; height: 400px; background-color: skyblue; margin: 0 auto; font-size: 120px; font-weight: bold; padding: 50px; border: 50px dashed rgba(255, 0, 0, 0.7); color: transparent; background-image: url('../images/bg02.jpg'); background-repeat: no-repeat; background-origin: border-box; -webkit-background-clip: text; } 你好啊 2.3 background-size作用：设置背景图的尺寸。 语法： 用长度值指定背景图片大小，不允许负值。 background-size: 300px 200px; 用百分比指定背景图片大小，不允许负值。 background-size: 100% 100%; auto ：背景图片的真实大小。 —— 默认值 contain ： 将背景图片等比缩放，使背景图片的宽或高，与容器的宽或高相等，再将完整背景图片包含在容器内，但要注意：可能会造成容器里部分区域没有背景图片。 background-size: contain; cover ：将背景图片等比缩放，直到完全覆盖容器，图片会尽可能全的显示在元素上，但要注意：背景图片有可能显示不完整。—— 相对比较好的选择 background-size: cover; 03_background-size div { width: 400px; height: 400px; padding: 50px; border: 50px dashed rgba(255, 0, 0, 0.7); background-image: url('../images/bg03.jpg'); background-repeat: no-repeat; /* background-size: 400px 400px; */ /* background-size: 100% 100%; */ /* background-size: contain; */ background-size: cover; } 2.4 backgorund 复合属性语法： background: color url repeat position / size origin clip注意： origin 和 clip 的值如果一样，如果只写一个值，则 origin 和 clip 都设置；如果设置了两个值，前面的是 origin ，后面的 clip 。 size 的值必须写在 position 值的后面，并且用 / 分开。 04_background复合属性 .box1 { width: 400px; height: 400px; margin: 0 auto; font-size: 40px; padding: 50px; border: 50px dashed rgba(255, 0, 0, 0.7); /* background: 背景颜色 背景url 是否重复 位置 / 大小 原点 裁剪方式; */ background:skyblue url('../images/bg03.jpg') no-repeat 10px 10px / 500px 500px border-box content-box; } 你好啊 2.5 多背景图 CSS3 允许元素设置多个背景图片 05_多背景图 div { width: 400px; height: 400px; border: 1px solid black; background: url('../images/bg-lt.png') no-repeat left top, url('../images/bg-rt.png') no-repeat right top, url('../images/bg-lb.png') no-repeat left bottom, url('../images/bg-rb.png') no-repeat right bottom; }
本人会持续更新文章的哦！希望大家一键三连，你们的鼓励就是作者不断更新的动力
|
【本文地址】
今日新闻 |
推荐新闻 |