CSS基础（七）---CCS3

最新推荐文章于 2023-03-11 16:15:35 发布

BugBear1989

最新推荐文章于 2023-03-11 16:15:35 发布

阅读量1.1k

点赞数 1

分类专栏： CSS 文章标签： CSS

本文链接：https://blog.csdn.net/BearStarX/article/details/84640425

版权

本文详细介绍了CSS3的新特性，包括圆角控制、阴影效果、自定义字体、子元素选择器以及伪元素。通过border-radius实现圆角，box-shadow和text-shadow添加阴影，@font-face导入自定义字体，使用子元素选择器提高样式控制精度，以及::before和::after创建内容前后补充。CSS3的这些特性极大地丰富了网页设计的可能性。

摘要由CSDN通过智能技术生成

一、CSS3介绍

1.什么是CSS3

CSS3是CSS2的一个升级版本，CSS3提供了非常多新途径去改善您的设计工作，且做了不少重要的变化，大部分的CSS3规范都重复了CSS2.1的内容，但也在它的基础上进行了很多增补和修订。

2.CSS3新特性

总的来说CSS3主要拥有以下几个新的亮点：高级选择器，圆角，多背景，自定义字体，动画与过渡，渐变色，box阴影，rgba颜色表示，文字阴影，图形化边界等。

（1）网页细节更易操作

在CSS3之前，如果想要在页面上添加圆角或阴影，只能通过图片的方式才能实现想要表达的效果，但是CSS3添加了“背景和边框”模块，比如常见的圆角、阴影、边框、背景都是该模块的，还有一个模块是"色彩和图像"，比如新增的rgba(0,0,0,0.5)增加了透明色。

（2）字体多样化

CSS3之前，Web设计师必须使用已在用户计算机上安装好的字体。通过CSS3，Web设计师可以使用他们喜欢的任意字体。当您找到或购买到希望使用的字体时，可将该字体文件存放到Web服务器上，它会在需要时被自动下载到用户的计算机上。

（3）种类多样的选择器

CSS3新增了非常多的高级选择器，可用它们选取HTML结构中的特定片段而无需增加特定的ID或类，在CSS3之前想要选择特定的区块只能通过JS来选择，CSS3增加的这些选择器，能够很好的满足我们的需求，并且使用CSS3选择器代码更加简洁且不容易出错。

（4）2D-3D转换

在CSS3中可以为任意元素添加2D的变形，我们能够对元素进行移动、缩放、转动、拉长或拉伸。转换是使元素改变形状、尺寸和位置的一种效果。3D转换是基于二维变换的相同属性，如果熟悉二维变换，会发现3D变形的功能和2D变换的功能类似。CSS3中的3D变换主要包括以下几种，如： 3D位移、 3D旋转、3D缩放、3D矩阵。

（5）过渡和动画

CSS3中的过渡（transition）和动画（animation），都可以让页面增加动效，提高页面的视觉效果，但是这两种是有区分的，过渡（transition）是一种简单的动画，可以理解为从一种状态到另一种状态具有非常平滑的过渡效果，但是过渡需要有某些事件进行触发才可以进行动画，动画（animation）是无需事件触发就能完成特定的动画，现在页面上常见的动态效果基本都是CSS3的animation动画可以完成的。

（6）媒体查询

用户浏览网页的设备越来越复杂，大屏幕电脑、平板、智能手机，以前做设计只针对大屏幕电脑分辨率，现在已经不太适合，因为移动端智能设备的普及。我们应该让我们的设计在不同的设备做出不同的响应，让用户不管使用什么样的设备访问网站都有一个不错的用户体验，完成这种网站的制作就需要使用CSS3的媒体查询，适应不同的设备显示。

二、border-radius圆角控制

1、border-raduis介绍

border-redius可以使尖锐的角转变为圆滑的角，需要使用html5结构

2、border-raduis格式

border-raduis的单位为px像素，也可以是百分比%

2.1、border-radius:10px --- 代表四个角的值都为10px

注意：如果想生成圆形的div，则border-radius的值就是width或者是height的一半（前提是width和height一致），或者用border-radius：50%来控制更加灵活

2.2、border-radius:10px 20px --- 第一个值代表左上角和右下角，第二个值代表右上角和左下角

2.3、border-radius:10px 20px 30px --- 第一个值代表左上角，第二个值代表右上角和左下角，第三个值代表右下角

2.4、border-radius:10px 20px 30px 40px --- 第一个值代表左上角，第二个值代表右上角，第三个值代表右下角，第四个值代表左下角（按照顺时针方向旋转）

3、修改某一个角的方法

3.1、border-top-left-radius 左上角

3.2、border-top-right-radius 右上角

3.3、border-bottom-right-radius 右下角

3.4、border-bottom-left-radius 左下角

4、其他需要注意的事项

4.1、制作圆角按钮，border-radius的值为高度的一半，必须是px

.box10{width: 200px;height: 50px;background-color: pink;border-radius: 25px;
color: white;text-align: center;line-height: 50px;display: inline-block;}

4.2、在修改一个方向的角时，可以设置x轴和y轴的值，来使得一个方向的角呈现不同的效果,50px代表x轴，20px代表y轴

.box11{width: 300px;height: 100px;background-color: #ff6700;border-top-left-radius: 50px 20px;display: inline-block;}

4.3、若四个角的x轴和y轴都需要修改成同样的角,就用x轴/y轴来控制

.box12{width: 300px;height: 300px;background-color: red;border-radius: 50px/20px;display: inline-block;}

以下是上面知识点的具体实例：

<!DOCTYPE html>
	<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>border-radius圆角</title>
		<style type="text/css">
			/*border-radius:使div四周尖锐的角变为圆角*/
			/*四周都是一样的像素*/
			.box1{width: 200px;height: 200px;background-color: red;border-radius: 20px;display: inline-block;}
			/*画圆形:border-radius的值为width或者height的一半，且width=height*/
			.box2{width: 250px;height: 250px;background-color: yellow;border-radius: 50%;display: inline-block;}
			/*若分别控制左上角、右下角和右上角、左下角，可以如下写法*/
			.box3{width: 300px;height: 150px;background-color: #ff6700;border-radius: 10px 30px;display: inline-block;}
			/*若分别控制左上角，右上角、左下角，右下角，可以如下写法*/
			.box4{width: 300px;height: 150px;background-color: pink;border-radius: 50px 10px 20px;display: inline-block;}
			/*若分别控制四个角，顺序是左上、右上、右下、左下顺时针方向控制*/
			.box5{width: 250px;height: 150px;background-color: blue;border-radius: 10px 20px 30px 40px;display: inline-block;}
			/*单独修改某一方向的角*/
			.box6{width: 200px; height: 200px;background-color: green;display: inline-block;border-top-left-radius: 10px; }
			.box7{width: 200px; height: 200px;background-color: red;display: inline-block;
				border-top-right-radius: 20px;}
			.box8{width: 200px; height: 200px;background-color: blue;display: inline-block;
				border-bottom-left-radius:30px; }
			.box9{width: 200px; height: 200px;background-color: yellow;display: inline-block;border-bottom-right-radius: 40px;}
			/*制作圆角按钮，border-radius的值为高度的一半，必须是px*/
			.box10{width: 200px;height: 50px;background-color: pink