css中的阴影效果

最新推荐文章于 2024-04-07 19:38:19 发布

Kk-87

最新推荐文章于 2024-04-07 19:38:19 发布

阅读量422

点赞数

分类专栏： css 文章标签： css 阴影效果

本文链接：https://blog.csdn.net/qq_36712191/article/details/64443667

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

模型阴影

语法:

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

Kk-87

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css中的阴影效果

模型阴影语法: 第一个值：Npx 阴影向水平方向偏移N个像素正数往右负数往左.第二个值：Npx 阴影向垂直方向偏移N个像素正数往下负数往上.第三个值：羽化大小（模糊的大小）.第四个值：阴影尺寸(在原有阴影的基础上增加的值).第五个值：颜色默认值是黑色.第六个参数：内外阴影默认是外阴影内阴影是inset.其他:
复制链接

扫一扫