【CSS】box-shadow属性

赤焰梦

已于 2022-11-07 17:09:16 修改

阅读量1.1k

点赞数 2

分类专栏： HTML/CSS/Javascript 文章标签： css 前端 html

于 2022-11-07 16:14:14 首次发布

本文链接：https://blog.csdn.net/m0_49442965/article/details/127733173

版权

HTML/CSS/Javascript 专栏收录该内容

58 篇文章 3 订阅

订阅专栏

box-shadow：像素值1 像素值2 像素值3 像素值4 颜色值阴影类型

像素值1 ：水平阴影位置，可以负值
像素值2 ：垂直阴影位置，可以负值
像素值3 ：阴影模糊半径（可选属性）

像素值4 ：阴影扩展半径，不可为负值
颜色值：阴影颜色
阴影类型：内阴影（insert）/外阴影为默认值
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>box-shadow属性</title>
</head>
<style>
img{
    padding:20px;
    border-radius: 50%;
    border: 1px solid red;
    box-shadow: 5px 5px 10px 2px red inset;
}</style>
<body>
    <img  src="1.jpg" alt="尴尬啊！"/>
</body>
</html>

效果真的挺漂亮的

优惠劵

赤焰梦

关注关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【CSS】box-shadow属性

阴影类型：内阴影（insert）/外阴影为默认值。像素值3 ：阴影模糊半径（可选属性）像素值4 ：阴影扩展半径，不可为负值。像素值1 ：水平阴影位置，可以负值。像素值2 ：垂直阴影位置，可以负值。
复制链接

扫一扫