【CSS 24】阴影 text-shadow box-shadow 卡片

CSS

      • 阴影
      • Box Shadow

阴影

通过使用 CSS,您可以在文本和元素上添加阴影

  • text-shadow
  • box-shadow

CSS文字阴影
CSS text-shadow 属性为文本添加阴影
最简单的用法是只指定水平阴影(2px)和垂直阴影(2px),然后是颜色以及模糊效果

DOCTYPE html>
<html>
<head>
<style>
h1 {
	text-shadow: 2px 2px 5px green;
}
style>
head>
<body>

<h1>文本阴影效果h1>

body>
html>

下面的例子展示了带有黑色阴影的白色文本

h1 {
	color: white;
	text-shadow: 2px 2px 4px #000000;
}

下面的例子展示了红色的霓虹发光阴影

h1 {
	text-shadow: 0 0 3px #FF0000;
}

多个阴影
如需在文本中添加多个阴影,您可以添加以逗号分隔的阴影列表
下面的例子展示了红色和蓝色的霓虹灯发光阴影

h1 {
	text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}

下面的例子展示了带有黑色、蓝色和深蓝色阴影的白色文本

h1 {
	color: white;
	text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}

还可以使用 text-shadow 属性在文本周围创建纯边框(无阴影)

h1 {
	color: yellow;
	text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

Box Shadow

CSS box-shadow 属性应用阴影于元素
最简单的用法是只指定水平阴影和垂直阴影10px 10px
为阴影添加颜色 grey
向阴影添加模糊效果 5px

DOCTYPE html>
<html>
<head>
<style>
div {
	width: 300px;
	height: 100px;
	padding: 15px;
	background-color: yellow;
	box-shadow: 10px 10px 5px grey;
}
style>
head>
<body>

<h1>box-shadow属性h1>

<div>已设置 box-shadow 的 div 元素div>

body>
html>

卡片
您还可以使用 box-shadow 属性创建纸质卡片效果

div.card {
	width: 250px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	text-align: center;
}

div.header {
	background-color: #4CAF50;
	color: white;
	padding: 10px;
	font-size: 40px;
}

div.container {
	padding: 10px;
}

你可能感兴趣的:(CSS,css,前端)