CSS样式技巧：圆角边框、阴影与文本效果-优快云博客

1 盒子圆角边框

使用border-radius：length；对边框的四个角进行设置

注意：参数值可以是数值或者百分比的形式；如果是正方形，想设计成一个圆，把数值修改成为高度或者宽度的一半，或者直接50%；如果是矩形，设置为高度的一半就可以；

该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角，分开写：border-top-left-radius. border-top-right-radius、border-bottom-right-radius.

<style type="text/css">
			div {
				height: 100px;
				width: 200px;
				background-color: pink;
				border-radius:20px;
			}
		</style>

<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>圆角边框</title>
		<style type="text/css">
			div {
				height: 100px;
				width: 200px;
				background-color: pink;
				border-bottom-left-radius: 20px;
			}
		</style>
	</head>
	<body>
		<div id="">
			
		</div>
	</body>

2 盒子阴影

盒子阴影可以使用box-shadow进行设置

box-shadow：h-shadow v-shadow blur spread color inset；

值	描述
h-shadow	必需，水平阴影的位置，可以为负值
v-shadow	必需，垂直阴影的位置，允许为负值
blur	可选，模糊距离
spread	可选，阴影的尺寸
color	可选，阴影的颜色
inset	可选，将外部阴影（outset）改成内部阴影

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>圆角边框</title>
		<style type="text/css">
			.one,.two {
				height: 100px;
				width: 200px;
				background-color: pink;
				border-radius: 20px;
				text-align: center;
				line-height: 100px;
				/* 两个盒子左右放 */
				float: left;
				/* 盒子外边距20 */
				margin: 20px;
			}
			div:hover {
				box-shadow: 5px 5px 4px 5px darkgray;
			}
		</style>
	</head>
	<body>
		<div id="" class="one">
			迪迦奥特曼
		</div>
		<div id="" class="two">
			泰罗奥特曼
		</div>
	</body>
</html>

鼠标放上去之后出现阴影

3 文字阴影

使用text-shadow属性将阴影应用于文本

语法：text-shadow：h-shadow v-shadow blur color;

值	描述
h-shadow	必须，水平阴影的位置，允许负值
v-shadow	必须，垂直阴影的位置，允许负值
blur	可选，模糊的距离
color	可选，阴影的颜色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>圆角边框</title>
		<style type="text/css">
			p {
				font-size: 50px;
				font-weight: 700;
			}
					p:hover {
				text-shadow: 5px 5px 2px #FD3F31;
			}
		</style>
	</head>
	<body>
		<p>你好，黄月英</p>
	</body>
</html>