CSS 基础教程2—CSS3元素属性的升级

最新推荐文章于 2021-11-18 17:45:52 发布

too肥

最新推荐文章于 2021-11-18 17:45:52 发布

阅读量202

点赞数

分类专栏： CSS 基础教程2—CSS3元素属性的升级前端 css 文章标签： CSS3

前端同时被 3 个专栏收录

6 篇文章 0 订阅

订阅专栏

css

6 篇文章 0 订阅

订阅专栏

CSS 基础教程2—CSS3元素属性的升级

1 篇文章 0 订阅

订阅专栏

CSS 基础教程2—CSS3元素属性的升级

简介

在 CSS 中，对背景图片的定位我们使用了 background-position 来调整，不够直观，并且，图片的大小是根据图片的原像素尺寸大小决定的，这些不便在 CSS3 中都有了改善。本节中，我们将对 CSS3 中作了升级调整的背景和边框元素进行简单的介绍。

知识点

背景
边框

背景

在 CSS3 中，背景的样式作了一些升级调整，让我们可以更好的控制背景元素的样式。这里主要介绍以下几个调整：

background-size
background-origin
background-clip

background-size
background-size 指定背景图像的大小，取代了以前背景图像的大小由实际大小决定。背景图像的大小可以是像素或是百分比大小。
background 的语法为：

background-size:length|percentage|cover|contain;

length：设置背景的高度和宽度，如 background-size:100px 200px;。第一个值为宽度，第二个值为高度。如果只设置一个值，则第二个值会被设置为 auto，这时候的第一个值为宽度，第二个值虽然设置为 auto，但实际上与第一个值相同。
percentage：以父元素的百分比来设置背景图像的宽度和高度，如 background-size:50% 50%;。第一个值设置宽度，第二个值设置高度。同 length 的用法，如果只给出一个值，那么第二个值会被设置为 auto。
cover：把背景图像扩展到可以完全覆盖背景区域为止，图片的某些部分可能会无法显示。background-size:cover;
contain：使背景图片的高度和宽度完全适应内容区域。background-size:contain;

例子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
	div{
	   border:2px solid;
	   margin:50px auto;
	   width:200px;
	   height:200px;
	   padding:50px;
	   background-image:url('Baymax.png');
	   background-size:100% 100%;
	   /* 如需要查看其它效果，可将注释中的内容替换上面的background-size */
           /* background-size:100px 200px; */
           /* background-size:50% 50%; */
           /* background-size:cover; */
           /* background-size:contain; */
	   background-repeat:no-repeat;
	}
     </style>
</head>

<body>
     <div></div>
</body>
</html>

效果图：
在这里插入图片描述
请自行调整 background-size 的值，观察背景图片的变化。

background-origin
background-origin 字面理解是背景图片起点的意思，它规定 background-position 属性相对于什么位置来定位。它有三个值：

border-box ：背景图片从盒模型的 border-box 左上角开始绘制，即背景图片相对于边框和来定位。
padding-box ：（默认）背景图片从盒模型的 padding-box 左上角开始绘制，即背景图片相对于内边距框来定位。
cotent-box ：背景图片从盒模型的 content-box 左上角开始绘制，即背景图片相对于内容框来定位。

我们用上一个例子中的代码来演示 background-origin 不同值的效果，为了对比背景图片的不同的起始位置，我们使用图片的原尺寸，即删除 background-size ：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
	div{
	   border:2px solid;
	   margin:50px auto;
	   width:200px;
	   height:200px;
	   padding:50px;
	   background-image:url('Baymax.png');
	   background-repeat:no-repeat;
	   background-origin: border-box;
	}
     </style>
</head>

<body>
     <div></div>
</body>
</html>

在浏览器中运行效果图为：
在这里插入图片描述
更改代码：

background-origin: content-box;

在浏览器中运行效果图为：
在这里插入图片描述
我们很容易可以发现，background-origin 设置为 content-box 和 border-box 的区别，一个是从盒模型的 content-box 的左上角开始绘制，一个是从盒模型 border-box 左上角开始绘制。

background-clip
background-clip 与 background-origin 可以取到的值相同，它们的功能大致相同。但是两者存在一些细微的差别。当它们的值都为 border-box 时，虽然都是从盒模型的边框左上角开始绘制背景图片，但是 background-clip 绘制出来的背景图片不会覆盖左方和上方的边框，而 background-origin 绘制出来的背景图片则会覆盖左方和上方的边框。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
	div{
	   border:2px solid;
	   margin:50px auto;
	   width:200px;
	   height:200px;
	   padding:50px;
	   background-image:url('Baymax.png');
	   background-repeat:no-repeat;
	   background-clip: border-box;
	}
     </style>
</head>

<body>
     <div></div>
</body>
</html>

在浏览器中运行效果图为：
在这里插入图片描述

边框

CSS3 中，针对边框的样式作了一些升级调整，这里主要讲解两个属性：

border-radius
border-image

border-radius
在 CSS2 中添加边框圆角是一件很困难的事情，我们需要在每个角落使用不同的图像。但是，在 CSS3 中，我们只需要使用属性 border-radius 就可以创建圆角。

border-radius:1-4 length|% / 1-4 length|%;

例子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
	div{
	   border:2px solid;
	   margin:50px auto;
	   width:200px;
	   height:200px;
	   padding:50px;
	   border-radius:20px;
	   background-image:url('Baymax.png');
	   background-repeat:no-repeat;
	   background-clip: border-box;
	}
     </style>
</head>

<body>
     <div><p>border-radius</p></div>
</body>
</html>

在浏览器中运行效果图为：
在这里插入图片描述
border-radius 属性其实是 border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius 四个属性的简写模式，四个数值的书写顺序是：左上角、右上角、右下角、左下角。

当 border-radius 只设置一个值，即将该值应用到元素的四个角上。
当 border-radius 设置两个或三个值时，按照对角线相同原则，如：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
	div{
	   border:2px solid;
	   margin:50px auto;
	   width:200px;
	   height:200px;
	   padding:50px;
	   /*省略了左下和右下，按照对角线相同的原则，
	   应为 20px 50px 20px 50px*/
	   border-radius:20px 50px;
	   background-image:url('Baymax.png');
	   background-repeat:no-repeat;
	   background-clip: border-box;
	}
     </style>
</head>

<body>
     <div></div>
</body>
</html>

在浏览器中运行效果图为：
在这里插入图片描述

border-radius 按照语法的完整写法其实是 border-radius:10px 10px 10px 10px / 10px 10px 10px 10px; ，前面四个表示圆角的水平半径，后面四个表示圆角的垂直半径。
除了为边框添加圆角，你还可以将 border-radius 属性运用到图片上来制作你的圆角图片。

border-image
使用属性 border-image ，我们可以使用图片来创建一个边框。语法为：

border-image: source(url) slice width outset repeat;

source:所使用图片的路径。
slice:图片边框向内偏移。
width:图片边框宽度。
outset:边框图像区域超出边框的量。
repeat:图像边框是否应该平铺（repeat）、铺满（round）或拉伸（stretch）。

例子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
	div{
	   border:40px solid;
	   margin:50px auto;
	   width:200px;
	   height:200px;
	   padding:50px;
	   border-image:url('Baymax.png') 30 30 stretch;
	}
     </style>
</head>

<body>
     <div></div>
</body>
</html>

在浏览器中运行效果图为：
在这里插入图片描述

too肥

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS 基础教程2—CSS3元素属性的升级

CSS 基础教程2—CSS3元素属性的升级简介在 CSS 中，对背景图片的定位我们使用了 background-position 来调整，不够直观，并且，图片的大小是根据图片的原像素尺寸大小决定的，这些不便在 CSS3 中都有了改善。本节中，我们将对 CSS3 中作了升级调整的背景和边框元素进行简单的介绍。知识点背景边框背景在 CSS3 中，背景的样式作了一些升级调...
复制链接

扫一扫