css3边框、背景、自定义字体、盒模型_css3slidingimagepanels-优快云博客

本文深入讲解CSS3的各种特性，包括圆角边框、阴影、背景缩放、自定义字体及盒模型等，提供了丰富的代码实例，帮助读者掌握CSS3的高级应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1…## CSS3 边框

用 CSS3，你可以创建圆角边框，添加阴影框
· border-radius 圆角边框 ---------->5px 或 5% 可以给一个值到四个值

div{
            width:96px;
            height:48px;
            border:2px solid red;
            border-bottom:50px solid red;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;
        }

box-shadow 阴影边框 ------>六个值(前两个值必写) 单位 : px

水平阴影(可负值) 垂直阴影(可负值) 模糊距离阴影尺寸阴影颜色外部阴影(outset)改为内部阴影(inset)

border-image 用图片创建边框----了解

text-shadow: 水平位置垂直位置模糊距离阴影颜色;

 body{
            /*多阴影写法*/
            text-shadow: 1px 2px 2px #999,
                         -1px -2px 2px #abcdef;
        }

这里使用凹凸文字来展示效果
效果图
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
         .au{
            width: 100%;
            height: 100px;
            font-size: 72px;
            background-color: purple;
            color: purple;
            text-shadow: -1px -1px 1px white,1px 1px 1px black;
        }
        .au1{
            width: 100%;
            height: 100px;
            font-size: 72px;
            background-color: purple;
            color: purple;
            text-shadow:-1px -1px 1px black ,1px 1px 1px white;
        }

    </style>
</head>
<body>
<div class="au"><b>小小小小小小小小小小</b></div>
<div class="au1"><b>燚燚燚燚燚燚燚燚燚燚</b></div>
</body>
</html>

2.背景缩放(CSS3)

通过background-size设置背景图片的尺寸，就像我们设置img的尺寸一样，在移动Web开发中做屏幕适配应用非常广泛。

其参数设置如下：

a) 可以设置长度单位(px)或百分比（设置百分比时，参照盒子的宽高）

b) 设置为cover时，会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。我们平时用的cover 最多

c) 设置为contain会自动调整缩放比例，保证图片始终完整显示在背景区域。

background-image: url('images/gyt.jpg');
			background-size: 300px 100px;
			/* background-size: contain; */
			/* background-size: cover; */

3.背景(CSS3)

以逗号分隔可以设置多背景，可用于自适应布局做法就是用逗号隔开就好了。

一个元素可以设置多重背景图像。
每组属性间使用逗号分隔。
如果设置的多重背景图之间存在着交集（即存在着重叠关系），前面的背景图会覆盖在后面的背景图之上。
为了避免背景色将图像盖住，背景色通常都定义在最后一组上，

background:url(test1.jpg) no-repeat scroll 10px 20px/50px 60px  ,
	   url(test1.jpg) no-repeat scroll 10px 20px/70px 90px ,
	   url(test1.jpg) no-repeat scroll 10px 20px/110px 130px c #aaa;
 /*背景图片位置*/
 background-origin :设置背景图像的位置区域。border-box(盒子边框部分显示背景)  padding-box(盒子padding部分显示背景)   content-box(盒子内容部分显示背景) 
 /*背景图片内容部分为准, 以外的部分被裁剪*/
 background-clip :  设置某个部分以外被裁减  border-box  padding-box  content-box

4.自定义字体

@font-face { font-family: 自定义字体名字; src: url(字体路径); }

div { font-family:自定义字体名字; }

5.CSS3盒模型

CSS3中可以通过box-sizing 来指定盒模型，即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。

可以分成两种情况：

1、box-sizing: content-box 盒子大小为 width + padding + border content-box:此值为其默认值，其让元素维持W3C的标准Box Mode

2、box-sizing: border-box 盒子大小为 width 就是说 padding 和 border 是包含到width里面的

注：上面的标注的width指的是CSS属性里设置的width: length，content的值是会自动调整的。

div:first-child {
			width: 200px;
			height: 200px;
			background-color: pink; 
			box-sizing: content-box;  /*  就是以前的标准盒模型  w3c */
			padding: 10px;
			border: 15px solid red;
			/* 盒子大小为 width + padding + border   content-box:此值为其默认值，其让元素维持W3C的标准Box Mode */
		}
		div:last-child {
			width: 200px;
			height: 200px;
			background-color: purple;
			padding: 10px;
			box-sizing: border-box;   /* padding border  不撑开盒子 */
			border: 15px solid red;
			/* margin: 10px; */
			/* 盒子大小为 width    就是说  padding 和 border 是包含到width里面的 */
}