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>
