HTML5新特性|05 CSS3边框CSS3背景

CSS3边框

1、CSS3边框:

通过CSS3，您能够创建圆角边框，向矩形添加阴影，使用图片来绘制边框-并且不需使用设计软件，比如PhotoShop。

属性:

border-radius 圆角
box-shadow:水平阴影垂直阴影阴影的清晰度阴影的大小阴影的颜色阴影的位置
border-image

浏览器支持:

Internet Explorer 9+支持 border-radius 和 box-shadow 属性。 Firefox、Chrome 以及 Safari 支持所有新的边框属性。

2、示例: 设置阴影、box阴影、图片阴影

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>css边框</title><style>.div1{width:200px;height: 50px;line-height: 50px;text-align: center;border: 1px solid #ffaa00;/*设置圆角*/border-radius: 30px;/*Mozilla Firefox 浏览器设置 圆角*/-moz-border-radius: 30px;/*Internet Explorer 浏览器设置的圆角效果*/-ms-border-radius: 30px;/*基于 WebKit 引擎的浏览器（如早期的 Chrome、Safari 以及当时的新版 Opera）设置的圆角效果*/-webkit-border-radius: 30px;}.div2{width: 200px;height: 100px;border: 2px solid #00f;background-color: aqua;margin-top: 50px;margin-bottom: 50px;text-align: center;/*设置阴影  box-shadow:水平阴影 垂直阴影 阴影的清晰度 阴影的大小 阴影的颜色 阴影的位置 inset outset(默认值)*/box-shadow: -10px 10px 10px #f00;}img{box-shadow: 10px 5px 6px #eeaaf0;}</style>
</head>
<body>
<div class="div1">这是一个圆角效果</div>
<div class="div2">阴影效果</div>
<p>图片阴影</p>
<div class="div3"><img src="../raw/bg.png">
</div></body>
</html>

在这里插入图片描述

CSS3背景

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

属性:

background-size
background-origin
- background-origin: border-box;背景图像会从元素的边框线开始，向内填充到内边距区域，覆盖整个元素，包括边框和内边距区域。
- background-origin: content-box; 背景图像只会覆盖内容区域，不会延伸到内边距或边框。

浏览器支持:

Internet Explorer 9+、Firefox、 Chrome、 Safari 以及 Opera 支持新的背景属性。

2、示例1：缩放背景图片

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>css3背景-缩放背景图片</title><style>body{background: url("../raw/bg.png");/*设置背景图片的大小*/background-size: 50px 50px;background-repeat: no-repeat;padding-top: 30px;}</style>
</head>
<body><p>上面是放大的图片</p><p>原始图片：<img src="../raw/bg.png" alt="五角星"></p>
</body>
</html>

在这里插入图片描述

3、示例2：背景图片设置放在content-box还是border-box

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>css背景_背景图片设置放在content-box还是border-box</title><style>div{border:1px solid #ffaa00;padding: 35px;background-image: url("../raw/bg.png");background-repeat: no-repeat;/*设置left后会在左边居中位置，否则默认左上角位置*/background-position: left;}.div1{background-origin: border-box;}.div2{background-origin: content-box;}</style>
</head>
<body><p>border-box</p><div class="div1">6月12日，上海戏剧学院公开2024年博士研究生拟录取名单，显示林更新已被上戏戏剧影视表演创作方向拟录取。根据上海戏剧学院博士研究生拟录取名单，可以看到戏剧影视表演创作专业有4名拟录取考生，林更新专业成绩排名第二。潇湘晨报此前报道，5月9日，上海戏剧学院发布2024年博士研究生（申请-考核制）考生复试注意事项及名单。潇湘晨报记者致电上海戏剧学院招生办工作人员了解详细情况。5月10日招生办工作人员的肯定回应：“就是（明星）本人。”工作人员告诉记者：“每一位考生都是一样，不会存在特殊对待，复试都是会按照正常流程去录取。”对于最终录取人数，每一年录取人数并不固定都会变动。</div><p>content-box</p><div class="div2">6月12日，上海戏剧学院公开2024年博士研究生拟录取名单，显示林更新已被上戏戏剧影视表演创作方向拟录取。根据上海戏剧学院博士研究生拟录取名单，可以看到戏剧影视表演创作专业有4名拟录取考生，林更新专业成绩排名第二。潇湘晨报此前报道，5月9日，上海戏剧学院发布2024年博士研究生（申请-考核制）考生复试注意事项及名单。潇湘晨报记者致电上海戏剧学院招生办工作人员了解详细情况。5月10日招生办工作人员的肯定回应：“就是（明星）本人。”工作人员告诉记者：“每一位考生都是一样，不会存在特殊对待，复试都是会按照正常流程去录取。”对于最终录取人数，每一年录取人数并不固定都会变动。</div></body>
</html>

在这里插入图片描述

4、示例3：设置多个背景图片

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>css背景_设置多个背景图片.html</title><style>body {/*background-image: url("../raw/bg.png"), url("../svg/svg.svg");*/background-image: url("../svg/svg.svg"),url("../raw/bg.png");}</style>
</head>
<body></body>
</html>