CSS3的学习：边框，背景，渐变，过渡

最新推荐文章于 2024-05-01 03:07:49 发布
最新推荐文章于 2024-05-01 03:07:49 发布
阅读量304 收藏 2
点赞数
分类专栏： CSS3 CSS3的学习：边框，背景，渐变，过渡 文章标签： CSS3的学习：边框，背景，渐变，过渡
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43551373/article/details/84107616
版权

 

  1. 边框（border）

边框的圆角（border-radius）

边框阴影（box-shadow）

边框的图片（border-image/border-image-source）

Border-image-repeat：边框图片平铺方式

Border-image-slice： 图片裁剪区域

Border-image-width： 边框图片的厚度

Border-image-ouset：设置边框背景图向外拓展的距离

案例::

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			div{
				/*border: 1px solid red;*/
				background: #666;	
			}
			p{
			  color:#666;
				font-family: "微软雅黑";
				font-size: 50px;
				font-weight: 900;
				margin: auto;
			  text-shadow: -1px -1px 1px #fff,1px 1px 1px #000;		   
			}
			span{
				color:#666;
				font-family: "微软雅黑";
				font-size: 50px;
				font-weight: 900;
				margin: auto;	
			  text-shadow: -1px -1px 1px #000,1px 1px 1px #fff;	
			}
		</style>
	</head>
	<body>
		<div>
		   <p>心之所向,梦之所往</p>
		   <span>心之所向,梦之所往</span>
	   </div>
	</body>
</html>

2.浏览器的私有化前缀

-moz： 设置火狐的私有化前缀

-webkit： 设置苹果和谷歌

-o  ： 设置欧朋浏览器的前缀

-ms： 设置IE的前缀

 

3.文本的阴影的属性

Text-shadow：10px（水平偏移量） 20px（垂直的偏移量） 10px（模糊程度） 2px（阴影的大小）

多个阴影显示

Text-shadow：10px（水平偏移量） 20px（垂直的偏移量） 10px（模糊程度） 2px（阴影的大小） #fff（阴影的颜色），10px（水平偏移量） 20px（垂直的偏移量） 10px（模糊程度） 2px（阴影的大小） #fff（阴影的颜色）

内阴影：Text-shadow：inset  10px（水平偏移量） 20px（垂直的偏移量） 10px（模糊程度） 2px（阴影的大小） #fff（阴影的颜色）

注:模糊度不能为负值

4.盒子模型

盒子模型具备的条件：

  1. Content（内容）
  2. Padding（内边距）
  3. Border（边框）
  4. Margin（外边距）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				width: 300px;
				height: 150px;
				/*border: 1px solid red;*/
				float: left;
				margin-top: 50px;
				margin-right: 20px;
			}
			img{
				/*width: 300px;
				height: 150px;*/
				width: 100%;
				height: 100%;
			}
			div:hover{
				border: 5px solid gray;
			}
		</style>
	</head>
	<body>
		
		<div>
			<img src="img/1.jpg" />
		</div>
		<div>
			<img src="img/2.jpg" />
		</div>
		<div>
			<img src="img/3.jpg" />
		</div>
	</body>
</html>

5.背景

(1) 背景尺寸:backgroun-size

(2)背景原点/起始点:background-origin

               属性:border-box(以边框为起始点)

                         content-box(以内容为起始点,是默认值)

                         padding-box(以内边距为起始点)

(3)背景裁剪:background-clip (属性同background-0rigin)

(4)多背景:background: url(img/bg1.png) left top no-repeat,
                            url(img/bg2.png)right top no-repeat,
                            url(img/bg3.png) right bottom no-repeat,
                            url(img/bg4.png) left bottom no-repeat,
                            url(img/bg5.png) no-repeat center center;

案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			.wrap{
				width: 300px;
				height: 250px;
				border: 10px solid rgba(0,255,0,0.2);
				padding: 30px;
				background: url(img/baby0.jpg) no-repeat;
				background-size: 200px 200px;
				background-origin:border-box ;
				/*background-origin: padding-box;*/
				/*background-clip: padding-box;*/
				background-clip: content-box;
			}
			.div{
				width: 620px;
				height: 417;
				border: 1px solid red;
				margin:300px auto;
				background: url(img/bg1.png) left top no-repeat,
							url(img/bg2.png)right top no-repeat,
							url(img/bg3.png) right bottom no-repeat,
							url(img/bg4.png) left bottom no-repeat,
							url(img/bg5.png) no-repeat center center;
				 line-height: 417px;
	             text-align:center;
	             font-size:50px;
	             color:red;
	             font-family: "楷体";

			}
		</style>
	</head>
	<body>
		<div class="wrap"></div>
		<div class="div">流传千古</div>
	</body>
</html>

7.渐变

(1)线性渐变:linear-gradient();

(2)径向渐变:radial-gradient();

案例1:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				width: 500px;
				height: 50px;
				border: 1px solid black;
				margin: 50px auto;
			}
			.div01{
				background:linear-gradient(to left,red,yellow)
			}
			.div02{
				background:linear-gradient(120deg,green,yellow)
			}
			.div03{
				background:linear-gradient(90deg,
				yellow 0%,
				pink 25%,
				blue 75%,
				red 100%
				
				)
			}
			.div04{
				background: linear-gradient(120deg,
				black 0%,black 25%,
				yellow 25%,yellow 50%,
				green 50%,green 75% , 
				red 75%,red 100%
				)
			}
		</style>
	</head>
	<body>
		<div class="div01"></div>
		<div class="div02"></div>
		<div class="div03"></div>
		<div class="div04"></div>
	</body>
</html>

案例2:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				width: 200px;
				height: 200px;
				border: 1px solid black;
				margin: 50px auto;
			}
			.div01{
				background: radial-gradient(at center,yellow,green);
			}
			.div02{
				background: radial-gradient(at left top,yellow,green);
			}
			.div03{
				background: radial-gradient( at 50px 50px,yellow,pink,green,red);
			}
			.div04{
				background: radial-gradient(100px at 50px 50px,yellow,pink,green,red);
			}
			.div05{
				background: radial-gradient(100px 50px at center,yellow,green);
			}
		</style>
	</head>
	<body>
		<div class="div01"></div>
		<div class="div02"></div>
		<div class="div03"></div>
		<div class="div04"></div>
		<div class="div05"></div>
	</body>
</html>

8.过渡:transition

transition:param1  param2

param1表示要过渡的属性,param2表示要过渡的时间

属性:(1)设置过渡的属性:transition-property:left;

          (2)设置过渡时间:transition-duration:2s;

          (3)设置过渡的延迟加载:transition-timing-function:linear;

               

linear：线性过渡。

ease：平滑过渡。

ease-in：由慢到快。

ease-out：由快到慢。

ease-in-out：由慢到快再到慢。

step-start：等同于 steps(1, start)

step-end：等同于 steps(1, end)

steps(<integer>[, [ start | end ] ]?)：接受两个参数的步进函数。第一个参数必须为正整数，指定函数的步数。第二个参数取值可以是start或end，指定每一步的值发生变化的时间点。第二个参数是可选的，默认值为end。

cubic-bezier(<number>, <number>, <number>, <number>)：特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内

案例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.wrap{
				width: 200px;height: 200px;
				border: 1px solid black;
				margin: 50px;
				background: pink;
				transition: all 2s;
				
			}
			.wrap:hover{
				background: red;
				width: 500px;
				
			}
			.boss{
				width: 200px;height: 200px;
				border: 1px solid black;
				margin: 120px;
				background: pink;
				transition:all 2s;
				transition-timing-function: ease;
				/*transition-property: left;*/
			}
			.boss:hover{
				width: 500px;height:500px;
				/*background: blueviolet;*/
				border-radius: 50px;
				background: url(img/baby0.jpg) no-repeat;
				background-size: 100% 100%;
			}
		</style>
	</head>
	<body>
		<div class="wrap"></div>
		<div class="boss"></div>
	</body>
</html>

延伸JS小知识(动画效果)

案例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				border: 1px solid black;
				width: 1000px;
				height: 100px;
				margin: 100px auto;
			}
			.wrap{
				background: linear-gradient(135deg,
				#000 0%,
				#000 25%,
				red 25%,
				red 50%,
				#000 50%,
				#000 75%,
				red 75%,
				red 100%
				);
				background-size:100px 100px ;
				animation:move 1s linear infinite;
			}
			@keyframes move{
				from{
					background-position: 0px 0px;
				}
				to{
					background-position: -100px 0px;
				}
			}
		</style>
	</head>
	<body>
		<div class="wrap"></div>
	</body>
</html>

 

森屿海岛
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS3中的基础（圆角，边框背景，过渡）
m0_68169119的博客
07-21 545
css3的概要
CSS3 渐变背景详解
weixin_44793212的博客
11-08 406
????渐变背景 详解 ！ W3C 与 2010年11月份 正式支持渐变背景样式，背景图像源可以定义为渐变背景 渐变背景包括 线性渐变和 径向渐变俩种类型 1.线性渐变 创建一个线性渐变 只需要两个颜色 ，也可以选择设置一个起点或一个方向，用法： linear-gradient (angle , color-stop1 , color-stop2 , …) angle : 渐变方向 取值为角度或者关...
Background:linear-gradient()详解
热门推荐
m0_53438035的博客
07-21 3万+
一般渐变 未设置角度，则默认为180deg（从上到下） 设置了角度，则0deg为竖直向上，然后顺时针旋转 上图！ 块渐变 .aq1{ background-image: linear-gradient(45deg,#87f 60%,#f78 60%); } .aq2{ background-image: linear-gradient(90deg,#87f 60%,#f78 60%); } .aq3{ background
CSS高级篇——渐变 (gradient)
老梁的专栏
10-04 922
配合background和可以实现线性（linear）和辐射（radial）渐变。
border-image-slice详细说明
qwguo
05-01 557
上一篇文章我们介绍了的用法，其中都比较简单好理解，这边文章我们重点学一下属性，它用于定义边框图像如何被切割并应用到元素的边框上。这个属性允许你指定边框图像的四个边缘（顶部、右侧、底部、左侧）的向内偏移量，从而将边框图像切割成九个区域：四个角、四条边和一个中间部分。如下图所示：我们结合上边的图片来详细学习一下。
CSS border-image（边框图片）
細水、長流√的专栏
03-01 8791
对于元素的边框我们除了可以使用《》一节中介绍的一些默认样式外，还可以通过 CSS3 中的 border-image 属性使用图像来作为元素的边框，以创建出丰富多彩边框效果。border-image 属性可以通过一些简单的规则，将一副图像划分为 9 个单独的部分，浏览器会自动使用相应的部分来替换边框的默认样式。
border-image-slice
dengdai848586的博客
05-24 9030
border-image-slice是用来分解引入进来的背景图片，这个参数相对来说比较复杂和特别，主要表现在以下几点： 1、其取值支持: | 其中number是没有单位的，专指像素px，因为其默认的单位就是像素px，所以在使用number时不需要加上单位，如果加上了单位反而是错误的写法。另外我们除了直接用nuember来设置外，我们还可以使用百分比值来表示，百分比的值是相对于边框背景图片而言
CSS3的border-image-slice属性详细介绍
吴小迪的博客
03-18 2万+
border-image-slice说明：基础知识：参数：具体使用：小总结： 首先我们来了解一下它是干嘛的。 说明： 文档说明：它是控制图像边界向内偏移的。 what？？？这是嘛意思啊？根本看不懂！！！好的，我们先不要急，我们在看看： 基础知识： 当我们通过 border-image-source 引用边框图片后，border-image-slice属性会将图片分割为9个区域：四个角，四个边（ed...
CSS3文字背景色渐变过渡特效源码.zip
11-02
【标题】"CSS3文字背景色渐变过渡特效源码" 涉及的核心知识点是CSS3中的渐变（gradients）和过渡（transitions），这两个特性为网页设计提供了丰富的视觉效果和动态交互。在现代网页开发中，CSS3已经成为不可或缺的...
CSS3蓝色渐变几何背景特效
06-24
"CSS3蓝色渐变几何背景特效"就是利用CSS3的特性，创造出独特且吸引人的文字背景布局。这个特效以蓝色渐变为基底，结合几何形状，为网页增加了一种现代感和专业感。 首先，我们要了解CSS3中的渐变（Gradient）。在...
纯CSS3悬停文字边框动画特效
06-24
在"纯CSS3悬停文字边框动画特效"这个项目中，我们将学习五种不同的边框动画效果，这些效果会在鼠标悬停在文本上时触发，分别是从上、下、左、右以及中间展开。 首先，让我们了解CSS3的关键帧动画（@keyframes）规则...
圆形边框加渐变色和旋转效果
12-10
纯CSS实现圆形边框加渐变色和自动旋转效果，可控制渐变颜色和旋转速度；圆形里面的字体也是渐变色。
CSS3蓝色渐变几何背景特效特效代码
03-20
【CSS3蓝色渐变几何背景特效】是一种利用CSS3技术实现的网页背景设计方法，它通过结合几何形状和色彩渐变来创造出独特且引人注目的视觉效果。在这个特效中，主要运用了CSS3的属性如`linear-gradient`、`border-...
CSS3图标导航渐变背景切换特效特效代码
03-20
CSS3是其最新版本，引入了许多新特性，如选择器、边框和背景、文本特效、多列布局、过渡、动画以及2D/3D转换等。 在这个特效中，关键知识点有以下几点： 1. **CSS3选择器**：通过精准地选择需要应用样式的元素，如...
CSS 渐变背景动画的实现
军火库
03-15 2909
如果你用过SASS/LESS，你应该写过一些全局的变量。这东西不是新概念，在其他语言中早就有的！而对于CSS来说，自定义变量不亚于一场革命！声明一个自定义属性，属性名需要以（--）开始，属性值则可以是任何有效的 CSS 值。通过var(--*)来使用但是这这种方式也有缺点，就是我们只能定义变量的初始值，没有办法指定变量的类型。于是CSS又增加了@property规则之后，我们还可以像下述代码这样去定义个 CSS 自定义属性,同样通过var()使用syntax：=表示属性的类型。
css背景渐变和动画
爱意迷了眼丶的博客
10-17 595
【代码】css背景渐变和动画。
HTML5基础加强css样式篇（css属性border详解：图片边框border-image-slice，border-image-repeat,border-image-width（二））（三十四）
余正源的博客
04-06 1825
1.图片边框：可以使用图片制作边框 先通过四根线把图片分成九份，中间一份为内容区域；其他分别对应边框的对应部分； 分割线属性： border-image-slice 代码如下： .box { /* .box 默认样式 */ margin: 200px 0 0 200px;
CSS属性实现动态背景效果的技巧
2301_76716660的博客
12-23 1511
通过合理运用CSS的属性和技巧，我们可以实现各种动态背景效果，给网页增添视觉上的吸引力。在使用这些技巧时，考虑到兼容性问题，可以添加浏览器前缀或者使用相关的CSS库来提供更好的兼容性。同时，也要注意背景效果不要过于繁杂，避免影响网页的加载速度和用户体验。
计算机控制技术题库(附答案).doc
最新发布
07-18
计算机

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值