ToB企服应用市场:ToB评测及商务社交产业平台

标题: CSS|15 CSS3文本阴影&盒子阴影 [打印本页]

作者: 刘俊凯 时间: 前天 15:18
标题: CSS|15 CSS3文本阴影&盒子阴影
15.5 文本阴影

text-shadow:水平阴影垂直阴影模糊距离阴影颜色
解释：text-shadow属性向文本添加一个或多个阴影。该属性是逗号分隔的阴影列表，每个阴影有两个或三个长度值和一个可选的颜色值进行规定。省略的长度是0。
值描述h-shadow必需，水平阴影的位置，允许负值。v-shadow必需，垂直阴影的位置，允许负值。blur可选，模糊的距离。color可选，阴影的颜色描述：
- 文字阴影可以有多组值，多组之间用逗号隔开就可以
- 水平阴影正值阴影在右边，负值在左边
- 垂直阴影正值阴影在下边，负值在上边
- 模糊强度，值越大越模糊
案例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本阴影</title>
<style type="text/css">
.box{
font-size: 40px;
font-family: "楷体";
color: #7B68EE;
/*给文本设置阴影*/
/*text-shadow:水平阴影垂直阴影模糊距离阴影颜色*/
text-shadow: 3px 3px 3px #90EE90;
}
.box_two{
font-size: 50px;
font-family: "隶书";
color: #008B00;
text-shadow: 4px 2px 2px #FF69B4,-4px -4px 3px #C1CDC1;
}
</style>
</head>
<body>
<div class="box">黑马程序员</div>
<div class="box_two">江苏科技大学JUST</div>
</body>
</html>

复制代码

15.6 盒子阴影

box-shadow:水平阴影垂直阴影阴影的清楚度阴影的巨细阴影的颜色阴影的位置 inset outset(默认值)
水平阴影和处置惩罚阴影必须得写，其余的是可以省略不写的。
语法：
box-shadow: h-shadow v-shadow blur spread color inset
解释：box-shadow向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由2-4个长度值、可选的颜色值以及可选的inset关键词来规定。省略长度的值为0.
值描述h-shadow必需，水平阴影的位置，允许负值。v-shadow必需，垂直阴影的位置，允许负值。blur可选，模糊的距离。spread可选，阴影的尺寸。color可选，阴影的颜色inset可选，将外部阴影(outset)改为内部阴影描述：
- 盒子阴影可以有多组值，多组之间用逗号隔开就可以
- 水平阴影正值阴影在右边，负值在左边
案例一:盒子阴影

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒子阴影</title>
<style type="text/css">
.box{
width: 100px;
height: 100px;
border:1px solid #000;
/*给这个盒子设置阴影
语法格式：
box-shadow:水平阴影垂直阴影阴影的清晰度阴影的大小阴影的颜色阴影的位置 inset outset(默认值)
*/
box-shadow: 3px 3px 3px 3px #f00,-4px -4px 2px 2px #DA70D6 inset;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

复制代码

案例二：给图片设置阴影

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>给图片设置阴影</title>
<style type="text/css">
img{
box-shadow: 6px 6px 6px 6px #FFA07A;
}
</style>
</head>
<body>
<img src="../img/jyff1.jpg" alt="">
</body>
</html>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)