css中的阴影效果

来源：互联网发布：网络商标到期编辑：程序博客网时间：2024/05/16 09:46

模型阴影

语法:

第一个值：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>

文字阴影

语法 : text-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>

0 0