原创前端学习笔记二：CSS3（1）盒阴影、圆角边框和图片边框

最新推荐文章于 2024-05-11 02:56:56 发布

大一哟

最新推荐文章于 2024-05-11 02:56:56 发布

阅读量214

点赞数

分类专栏：学习笔记文章标签： html css3

本文链接：https://blog.csdn.net/Reiuji_Utsuho/article/details/107977067

版权

学习笔记专栏收录该内容

33 篇文章 1 订阅

订阅专栏

这篇博客详细介绍了CSS3中的盒阴影效果、圆角边框的使用以及如何设置图片边框，通过实例代码展示了这些新特性的应用，帮助读者深入理解并掌握前端样式设计。

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

继续。
代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
	</head>
	<style type="text/css">
		#frame .item{
			margin: auto;
			background-color: #adfffd;
			height: 200px;
			width: 200px;
			border: 30px solid;
			box-shadow: 15px 15px 20px 15px #c5c5c5 ;	/* box-shadow可以用来给盒模型添加阴影 */
			/* 阴影属性的参数由1个颜色、inset参数和四个length长度组成，具体格式如下：
			box-shadow: color inset <offset-x> <offset-y> <blur-radius>
				color不必多说；
					inset: 若没有inset参数，默认阴影在边框外。
				而使用 inset 后，阴影在边框内（即使是透明边框），背景之上内容之下。可以更换这个值的位置，浏览器同样支持。
					<offset-x> <offset-y>: 这是头两个 <length>值，用来设置阴影偏移量。
				<offset-x> 设置水平偏移量，如果是负值则阴影位于元素左边。 
				<offset-y> 设置垂直偏移量，如果是负值则阴影位于元素上面。可用单位请查看 <length>。
				如果两者都是0，那么阴影位于元素后面。这时如果设置了 <blur-radius> 或 <spread-radius> 则有模糊效果。
					<blur-radius>: 这是第三个 <length> 值。
				值越大，模糊面积越大，阴影就越大越淡。 不能为负值。默认为0，此时阴影边缘锐利。
					<spread-radius> : 这是第四个 <length> 值。
				取正值时，阴影扩大；取负值时，阴影收缩。默认为0，此时阴影与元素同样大。
			 */
			border-image: url(border.png) 30 30 30 round; 
			/* 利用border-image属性可以让一个内容块的边框由图片的形式显示出来 
				参数有五个，分别为:source slice width outset repeat|initial|inherit
				Source	要用于绘制边框的图像的路径
				Slice	图像边框的向内偏移
				Width	图像边框的宽度
				Outset	边框图像区域超出边界框的量
				Repeat	一种关键字，用于设置图片在水平方向和竖直方向的重复方式。其取值有以下四种：
				stretch：默认值，将图片进行拉伸以填充边框的长
				    repeat：沿边框长平铺图片
				    round：沿着边框的长整数次的平铺图片（元素可能被自动调整大小以适应该要求）
				    space：沿着边框的长整数次的平铺图片（如果图片不能填满元素，则使用空白填充）
			*/
			margin-bottom: 50px;
			border-radius: 50px 75px 125px 150px;
			/* border-radius：用于添加圆角边框，其取值分两大类：值跟百分比。
				其中取值分1-4个值。每个半径的四个值的顺序是：左上角，右上角，右下角，左下角。
				如果省略左下角，右上角是相同的。如果省略右下角，左上角是相同的。如果省略右上角，左上角是相同的。
				百分比则越接近100%，则该圆角越接近一个该块大小能够容纳的一个椭圆。
			*/
		}
		#frame .item2{
			margin: auto;
			background-color: #adfffd;
			height: 200px;
			width: 300px;
			border: 15px solid transparent;
			box-shadow: 5px 5px 20px 5px #c5c5c5;
			border-image: url(border.png) 30 30 stretch;
			border-radius: 50%;
		}
		#frame .item3{
			margin: auto;
			margin-top: 50px;
			background-color: #adfffd;
			height: 100px;
			width: 100px;
			border: 15px solid transparent;
			box-shadow: 50px 50px 20px 0px #c5c5c5;
			border-image: url(border.png) 30 30 stretch;
			border-radius: 50px;
		}
	</style>
	<body>
		<div id="frame">
			<div class="item"></div>
			<div class="item2"></div>
			<div class="item3"></div>
		</div>
	</body>
</html>

运行结果：
在这里插入图片描述

大一哟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原创前端学习笔记二：CSS3（1）盒阴影、圆角边框和图片边框

继续。代码：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> </head> <style type="text/css"> #frame .ite
复制链接

扫一扫