CSS3初级

最新推荐文章于 2024-07-19 06:13:09 发布

命灵

最新推荐文章于 2024-07-19 06:13:09 发布

阅读量117

点赞数

文章标签： css3 photoshop 前端

本文链接：https://blog.csdn.net/weixin_72268472/article/details/125915268

版权

边框

用CSS3可以创建圆角边框，添加阴影框，并作为边界的形象而不使用设计程序，如Photoshop。

圆角

。我们不得不在每个角落使用不同的图像在CSS2中添加圆角棘手

在CSS3中，很容易创建圆角

border-radius 创建圆角

四个值：左上右上右下左下

border-radius:10px 20px 10px 40px;

三个值：左上右上和左下右下

两个值：左上和右下右上和左下

以椭圆为基础画出的圆角，方式为border-radius:x半径/y半径

盒阴影

在CSS2中的box-shadow属性被用来添加阴影

box-shadow：水平位置垂直位置模糊距离阴影尺寸(阴影大小) 阴影颜色内外阴影

注意：前两个值必须写，模糊值不能为负值

同时给元素内外设置阴影

边界图片

有了CSS3的border-image属性，可以使用图像创建一个边框

取值：

border-image-source: 边框背景图片路径
border-image-slice:图片边框向内偏移（切片）
border-image-width:图片边框的宽度
border-image-outset:边框图像区域超出边框的量
border-image-repeat:图片边框是否应该平铺(repeat)/铺满(round)/拉伸(stretch)（针对切片图像）用于创建边框的原始图像：

<style>
			/* .qq{
				width: 150px;
				height: 150px;
				border: 1px solid red;
				background: deepskyblue;
				/* 四个值：左上 右上 右下 左下 */
				/* border-radius: 10px 20px 10px 40px ; */
				/* 三个值：左上 右上和左下 右下 */
				/* border-radius: 10px 20px 40px ; */
				/* 两个值 */
				/* border-radius: 10px 20px; */8
				/* 以椭圆为基础画出的圆角，方式为： */
				/* border-radius: x半径/y半径; */
			/*} */
			.ww{
				width: 100px;
				height: 100px;
				/* border: 1px solid red; */
				background-color: aqua;
				/* box-shadow: 10px 10px 5px greenyellow; */
				border-radius: 50%;
				box-shadow: 10px 10px 5px rgba(0,0,0,0.332) inset,10px 10px 5px rgba(0,0,0,0.5);
				
				
			}
			.aa{
				width: 100px;
				height: 100px;
				/* 给元素设置透明色的边框 */
				/* transparent:透明 */
				border:15px solid transparent;
				/* 设置边框图片 */
				border-image:url(img/border.png) 27 27 round;
			}
			.ss{
				    width: 120px;
					height: 100px;
					/* 给元素设置透明色的边框 */
					/* transparent:透明 */
					border:15px solid transparent;
					/* 设置边框图片 */
					border-image:url(img/border.png) 27 27 repeat;
				}
				.dd{
					width: 120px;
					height: 100px;
					/* 给元素设置透明色的边框 */
					/* transparent:透明 */
					border:15px solid transparent;
					/* 设置边框图片 */
					border-image:url(img/border.png) 27 27 stretch;
				}
				.ff{
					width: 400px;
					height: 500px;
					border: 1px solid red;
					background-image: url(img/flower.gif),url(img/paper.gif);
					background-position: right bottom,left top;
					background-repeat: no-repeat,repeat;
				}
		</style>
	</head>
	<body>
		<div class="qq"></div>
		<div class="ww"></div>
		<div class="aa"></div>
		<div class="ss"></div>
		<div class="dd"></div>
		<div class="ff">
			<p>
				一个盒子一个盒子一个盒子一个盒子一个盒子一个盒子一个盒子
				一个盒子一个盒子一个盒子一个盒子一个盒子一个盒子一个盒子
				一个盒子一个盒子一个盒子一个盒子一个盒子一个盒子一个盒子
				
				一个盒子一个盒子一个盒子一个盒子一个盒子一个盒子一个盒子
				一个盒子一个盒子一个盒子一个盒子一个盒子一个盒子一个盒子
				一个盒子一个盒子一个盒子一个盒子一个盒子一个盒子一个盒子
				一个盒子一个盒子一个盒子一个盒子一个盒子一个盒子一个盒子
				
			</p>
			<p>
				一个盒子一个盒子一个盒子一个盒子一个盒子一个盒子一个盒子
				一个盒子一个盒子一个盒子一个盒子一个盒子一个盒子一个盒子
				一个盒子一个盒子一个盒子一个盒子一个盒子一个盒子一个盒子
				一个盒子一个盒子一个盒子一个盒子一个盒子一个盒子一个盒子
				一个盒子一个盒子一个盒子一个盒子一个盒子一个盒子一个盒子
				一个盒子一个盒子一个盒子一个盒子一个盒子一个盒子一个盒子
			</p>
		</div>
		<div class="gg"></div>
	</body>
</html>

transparent:透明

border:15px solid transparent; 设置边框