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>
相关推荐
dualven_in_csdn2 小时前
搞了两天的win7批处理脚本问题
java·linux·前端
你的人类朋友2 小时前
✍️【Node.js程序员】的数据库【索引优化】指南
前端·javascript·后端
小超爱编程3 小时前
纯前端做图片压缩
开发语言·前端·javascript
应巅3 小时前
echarts 数据大屏(无UI设计 极简洁版)
前端·ui·echarts
Jimmy4 小时前
CSS 实现描边文字效果
前端·css·html
islandzzzz4 小时前
HMTL+CSS+JS-新手小白循序渐进案例入门
前端·javascript·css·html
Senar4 小时前
网页中如何判断用户是否处于闲置状态
前端·javascript
很甜的西瓜4 小时前
typescript软渲染实现类似canvas的2d矢量图形引擎
前端·javascript·typescript·图形渲染·canvas
Allen Bright5 小时前
【CSS-9】深入理解CSS字体图标:原理、优势与最佳实践
前端·css
阿芯爱编程6 小时前
最长和谐子序列,滑动窗口
前端·javascript·面试