css框模型框的分类

开开心心罗非鱼

已于 2022-11-07 23:10:55 修改

阅读量360

点赞数 1

文章标签： css 前端 css3

于 2022-11-07 20:40:27 首次发布

本文链接：https://blog.csdn.net/qq_59384581/article/details/127737112

版权

css新模型

为了丰富网页的样式功能，去除一些冗余的样式代码，CSS3中添加了一些新的盒子模型属性，如颜色透明、圆角、阴影、渐变等。

思维导图

颜色透明度

通过RGBA的模式和opacity（不透明）属性，对背景图片设置不透明度

rgba（r，g，b，alpha）

颜色透明度是background-color的属性，使用方法

background-color：rgba（255，0，0，0.5）/*颜色透明红色，透明度为0.5*/

opacity属性用于定义标签的不透明度，参数opacityValue表示不透明度的值，它是一个介于0~1之间的浮点数值。其中，0.0表示完全透明，1.0表示完全不透明，而0.5则表示半透明。

opacity：opacityValue（值）；

opacity：opacity0.3；/*设置透明度为0.3/30%左右*/

圆角

在网页设计中，经常会看到一些圆角的图形，如按钮、头像图片等，运用CSS3中的border-radius属性可以将矩形边框四角圆角化，实现圆角效果。

border-radius：value（值）；

border-radius：20px；

border-radius就会把图片给四角圆化

图片边框

在网页设计中，我们还可以使用图片作为元素的边框。运用CSS3中的border-image属性可以轻松实现这个效果。

border-image

border-image-source

border-image-source 指定图片的路径

border-image-source：url(图片路径)

border-image-slise 指定图像的顶部，右侧，底部，左侧的偏移量

border-image-slise：30% 30% 30% 30%

border-image-width 指定边框宽度书写类似于slise

阴影

在网页制作中，经常需要对盒子添加阴影效果。使用CSS3中的box-shadow属性可以轻松实现阴影的添加。

box-shadow属性也可以改变阴影的投射方向以及添加多重阴影效果

 box-shadow:5px 5px 10px 2px #999 inset；
            5px 5px 10px 2px #333 inset             /*设置四边大小与阴影颜色*/

渐变

线性渐变

在线性渐变过程中，起始颜色会沿着一条直线按顺序过渡到结束颜色。运用CSS3中的 “background-image:linear-gradient（参数值）;”样式可以实现线性渐变效果。渐变效果是一个颜色效果渐变到另一个颜色效果。

linear-gradient用于定义渐变方式为线性渐变，括号内用于设定渐变角度和颜色值。

语法 background-image: linear-gradient(渐变角度,颜色值,颜色值);

渐变角度•渐变角度指水平线和渐变线之间的夹角，可以是以deg为单位的角度数值或关键词。

渐变•颜色值用于设置渐变颜色，其中“颜色值1”表示起始颜色，“颜色值n”表示结束颜色，起始颜色和结束颜色之间可以添加多个颜色值，各颜色值之间用“,”隔开。

background-image: linear-gradient(160deg,#945278 20%,#492646 50%);

案列音乐播放器

源码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>播放器图标</title>
		<style type="text/css">
			.big_bg{
				width: 500px ;
				height: 500px ;
				
				background-image: linear-gradient(180deg,#62426c 20%,#d4b5d5 50%,#91576f 85%);
				padding-top: 105px;
				box-sizing: border-box;
				margin: 50px  auto;
				
			}
			.bg{
				width: 300px;
				height: 300px;
				margin: 0px auto;
				background-image: linear-gradient(160deg,#945278 20%,#492646 50%);
				border-radius: 20px;
				box-shadow: 10px 10px 30px #2f0f2c;
				padding-top: 55px;
				box-sizing: border-box;
			}
			.box{
				width: 240px;
				height: 195px;
				background-image: linear-gradient(160deg,#fab097 20%,#a85a67 50%);
				margin: 0 auto;
				border-radius: 20px;
				border: 26px solid #241826;
				padding-top: 20px;
				box-sizing: border-box;
			}
			.box_1{
				width: 100px;
				height: 100px;
				margin: 0 auto;
				border-radius: 50%;
				background: #fff;
				padding: 20px 0 0 10px ;
				box-sizing: border-box;
			}
			.play{
				width: 0px;
				height: 0px;
				margin: 0 auto;
				border: 30px solid #fff;
				border-left: 30px solid #281a29;
				border-right: none;
			}
		</style>
	</head>
	<body>
		<div class="big_bg">
		<div class="bg">
			<div class="box">
				<div class="box_1">
					<div class="play"></div>
						
					</div>
				</div>
			</div>
		</div>
	
	</body>
</html>

如图结果

径向渐变

径向渐变同样是网页中一种常用的渐变，在径向渐变过程中，起始颜色会从一个中心点开始，按照椭圆或圆形形状进行扩张渐变。运用CSS3中的“background-image:radial-gradient（参数值）;”样式可以实现径向渐变效果。

顾名思义，它是以半径来渐变的

语法 background-image:radial-gradient（渐变角度,颜色值,颜色值）；

案例音乐排名

css代码部分

/*重置浏览器的默认样式*/
*{
	margin: 0%;
	padding: 0%;
	
}
/*整体控制歌曲排行*/
.bg{
	width: 600px;
	height: 550;
	/*重复径向渐变，圆心位置50%，50%，颜色#333，渐变到#000，两种颜色渐变间隔为1%*/
	background-image: repeating-radial-gradient(circle at 50% 50%,#333,#000 1%);
	margin: 50px auto;
	padding: 40px;
	border-radius: 50%;
	padding-top: 50px;
	border: 10px solid #ccc;
	
}
/*歌曲排名部分*/
	width: 372px;
	height: 530px;
	background: #fff;
	border-radius: 30px;
	box-shadow: 15px 15px 12px #000;
	margin: 0 auto;
	
}
.sheet p{
	width: 372px;
	height: 55px;
	background: #504d58;
	margin-bottom: 2px;
	font-size: 18px;
	color: #d6d6d6;
	line-height: 55px;
	text-align: center;
	font-family: "微软雅黑";
}
/* 需要单独控制的列表项*/

.sheet{.sheet .tp{
	width: 372px;
	height: 247px;
	background: #fff;
	background-image: url(yinyue.jpg),url(wenzi.jpg);
	background-repeat: no-repeat;
	background-position: 87px 16px,99px 192px;
	border-radius: 30px 30px 0 0;
	
}
.sheet.yj{border-radius: 0 0 30px 30px ;}

html部分调用css

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>制作音乐排行榜</title>
		<link rel="stylesheet" type="text/css" href="style13.css"/>
	</head>
	<body>
		<div class="bg">
			<div class="sheet">
				<p class="tp"></p>
				<p>听闻远方有你，涉徒跋涉千里</p>
				<p>我吹过你吹过的风，算不算想拥</p>
				<p>我喜欢你</p>
				<p>从一到终</p>
				<p>认真 且怂</p>
			</div>
		</div>
	</body>
</html>

结果