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阴影、图片阴影

html 复制代码

<!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：缩放背景图片

html 复制代码

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

html 复制代码

<!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：设置多个背景图片

html 复制代码

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