CSS 第004篇边框-实战1

最新推荐文章于 2024-08-31 17:29:32 发布

ml_YSY

最新推荐文章于 2024-08-31 17:29:32 发布

阅读量138

点赞数

分类专栏： CSS3-Study 文章标签： css3

本文链接：https://blog.csdn.net/ml_ysy/article/details/109521946

版权

CSS3-Study 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

前言：原始代码，未进行任何边框操作。

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset = "utf-8" />
		<style>
		div{ 
			background-color: blue;
			height: 400px;
			width: 400px;
			border: 20px solid black;
		}
		
		</style>
	</head>
	<body>
		<div>
			
		</div>
	</body>
<html>

运行结果：

>1 圆角边框属性：border-radius: 1-4 length|% / 1-4 length|%;

a单独分开定义每个角：

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset = "utf-8" />
		<style>
		div{ 
			background-color: blue;
			height: 400px;
			width: 400px;
			border: 20px solid black;
			
			/*圆角边框样式设置*/
			/*左上角*/
			border-top-left-radius: 800px;
			/*右上角*/
			border-top-right-radius: 20px;
			/*左下角*/
			border-bottom-left-radius: 20px;
			/*右下角*/
			border-bottom-right-radius: 800px;
			
	        }
		
		</style>
	</head>
	<body>
		<div>
			
		</div>
	</body>
<html>

运行结果：

综合一起书写的语法：

四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
一个值： 四个圆角值相同

下面的代码一个一个的用，别直接拿去用，不会显示圆角。

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset = "utf-8" />
		<style>
		div{ 
			background-color: blue;
			height: 400px;
			width: 400px;
			border: 20px solid black;
			
			/*圆角边框样式设置*/
			/*1. 四个值*/
			border-radius: 150px 50px 30px 5px;

			/*2. 三个值*/ 

			border-radius: 150px 50px 30px;

			/*3. 两个值*/ 
			border-radius: 25px 50px;
			
			/*3. 一个值*/ 

			border-radius: 50px;
		}
		
		</style>
	</head>
	<body>
		<div>
			
		</div>
	</body>
<html>

百分号%，用来修饰每个角的圆滑程度：

a、没有进行修饰

b、进行修饰

两者很好区别，都要好好掌握，你能造出意想不到的效果。

>2 边框盒阴影属性：box-shadow: h-shadow v-shadow blur spread color inset;

【补充说明spread: 取正值时，阴影扩大；取负值时，阴影收缩。默认为0，此时阴影与元素同样大。主要进行阴影大小比例缩放等比例缩放】

设置代码，添加阴影效果后：

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset = "utf-8" />
		<style>
		div{ 
			background-color: blue;
			height: 400px;
			width: 400px;
			border: 20px solid black;
			
			/*box-shadow: h-shadow v-shadow blur spread color inset;*/

			box-shadow: 100px 100px 5px red;/*只设置了水平、垂直偏移，模糊程度blur以及颜色*/
		}
		
		</style>
	</head>
	<body>
		<div>
			
		</div>
	</body>
<html>

原始效果

在原有的设置中加入缩放 spread，如果设置值超过某个范围，将不再有偏移量。

box-shadow: 100px 100px 5px 100px red;/*只设置了水平、垂直偏移，模糊程度blur、缩放spread以及颜色*/

box-shadow: 100px 100px  5px -20px red;/*只设置了水平、垂直偏移，模糊程度blur以及颜色*/

加上inset值,他决定内阴影设置。

box-shadow: 100px 100px  5px red inset;/*只设置了水平、垂直偏移，颜色以及阴影位置inset*/

一直在路上，自律，坚持

ml_YSY

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS 第004篇边框-实战1

前言：原始代码，未进行任何边框操作。<!DOCTYPE HTML><html> <head> <meta charset = "utf-8" /> <style> div{ background-color: blue; height: 400px; width: 400px; border: 20px solid black; } </style> </head&g
复制链接

扫一扫