模型阴影
语法:
第一个值 :Npx 阴影向水平方向偏移N个像素 正数往右 负数往左.
第二个值 :Npx 阴影向垂直方向偏移N个像素 正数往下 负数往上.
第三个值 :羽化大小 (模糊的大小).
第四个值 :阴影尺寸(在原有阴影的基础上增加的值).
第五个值 :颜色 默认值是黑色.
第六个参数: 内外阴影 默认是外阴影 内阴影是inset.
其他:
阴影可以写多个,中间用逗号隔开.
阴影可以简写,但是需要注意有一些值需要补0.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>div阴影效果</title>
<style>
div{
width:200px;
height:200px;
background-color: pink;
margin:100pxauto;
}
div:nth-child(1){
/* 阴影可以写多个,用逗号隔开 */
box-shadow:005px red,10px10px10px green,20px20px20px blue;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
文字阴影
语法 : t ext-shadow :水平偏移 垂直偏移 羽化大小 颜色.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字体阴影效果</title>
<style>
div {
font-size:40px;
font-family:'微软雅黑';
text-shadow:2px2px5px red;
}
body {
background-color:#ccc;
}
div:nth-child(2){
/*阴影可以写多个,中间用逗号隔开*/
text-shadow:1px1px#fff,-1px-1px#000;
font-weight:700;
color:#ccc;
}
div:nth-child(3){
text-shadow:1px1px#000,-1px-1px#fff;
font-weight:700;
color:#ccc;
}
</style>
</head>
<body>
<div>我是一段字体</div>
<div>你若不坚强(凹)</div>
<div>谁替你勇敢(凸)</div>
</body>
</html>