CSS 阴影

作者: roy_pub | 来源:发表于2018-12-08 20:09 被阅读11次

box-shadow

说明
h-shadow 必需,水平阴影位置,允许为负值
v-shadow 必需,垂直阴影位置,允许为负值
blur 可选,模糊距离
spread 可选,阴影尺寸
color 可选,阴影颜色
inset 可选,外部阴影改为内部阴影
<!DOCTYPE html>
<html lang="en">
<head>
    <style type="text/css">
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            box-shadow: 5px 10px 15px 2px rgba(0,0,0,0.1); //1.水平阴影  2.垂直阴影 3.模糊距离,改虚实 4.阴影尺寸
        }
    </style>
</head>
<body>
    <div>
    </div>
</body>
</html>

相关文章

  • CSS 实现文字阴影 + 文字渐变色

    1. CSS 实现文字阴影 通过text-shadow属性可以为文字设置阴影 效果如下: 2. CSS实现文字阴影...

  • CSS 阴影

    box-shadow

  • CSS阴影

    CSS阴影 标签(空格分隔): CSS Text-Shadow text-shadow属性赶走了用Photosho...

  • css阴影

    box-shadow:h-shadow v-shadow blur spread color inset;| h-...

  • border 内边框设置圆角

    CSS3 设置盒子三边内阴影、双边内阴影、单边内阴影

  • 08_dayCSS动画

    CSS3新增的功能有:过渡和动画,阴影和圆角 css3过渡动画: css3都有哪些新增的东西 : 过度,动画,阴影...

  • 超赞的 CSS 阴影技巧与细节

    本文的题目是 CSS 阴影技巧与细节。CSS 阴影,却不一定是 box-shadow 与 filter:drop-...

  • web学习:02-CSS3边框与圆角

    1.CSS3 圆角 2.CSS3 盒阴影 3.CSS3 边界图片

  • box-shadow 效果大全

    box-shadow 效果大全(内阴影,外阴影,三边阴影,双边阴影,单边阴影,细线描边…)CSS3 box-sha...

  • css3文字效果

    今天和大家分享css3的阴影文字 css3里的文字阴影属性,text-shadow 语法:text-shadow:...

网友评论

    本文标题:CSS 阴影

    本文链接:https://www.haomeiwen.com/subject/szqecqtx.html