文章/答案/技术大牛

发布

社区首页 >问答首页 >滤光片和阴影的使用

问滤光片和阴影的使用
EN

Code Review用户

提问于 2014-02-19 17:08:52

回答 1查看 102关注 0票数 5

以下代码将用于教育目的。它只是简单地演示了如何使用CSS3过滤器应用下拉阴影。对于我没有使用最佳实践的领域，任何反馈都将是很棒的。

JSBin

HTML:

<!DOCTYPE HTML>
<html>
<head>
    <title>Drop Shadow</title>
    <link rel="stylesheet" type="text/css" href="drop-shadow.css">
</head>
<body>
    <!-- Introduction to the text shadow property -->
    <div class="container one">
       <img width="250" height="250" src="http://iancottam.co.uk/img/footy.png">
    </div>
    <div class="container two">
       <img width="250" height="250" src="http://iancottam.co.uk/img/footy.png">
    </div>
    <!-- Support Info: http://caniuse.com/css-filters -->
</body>
</html>

CSS:

    body{
            background: #ccc;
            margin: 0;
    }
    h1{
        font-size: 5em;
        font-family: Georgia;
    }
    .container{
        padding: 20px 50px;
    }
    .one img{
        -webkit-filter: drop-shadow(0 0 30px black);
    }
    .two{
        background: black;
    }
    .two img{
        -webkit-filter: drop-shadow(-15px 0px 20px white);
    }

html

css

回答 1

Code Review用户

发布于 2014-02-19 18:52:28

你的代码--很好

我只想改变一下，强调图像是一样的：

.container img {
    width: 250px;
    height: 250px;
    content: url("http://iancottam.co.uk/img/footy.png");
}

然后

<div class="container one">
   <img>
</div>
<div class="container two">
   <img>
</div>

吉斯宾

票数 4

页面原文内容由Code Review提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://codereview.stackexchange.com/questions/42173

复制

相似问题

问滤光片和阴影的使用
EN

HTML:

CSS:

回答 1

Code Review用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问滤光片和阴影的使用EN

HTML:

CSS:

回答 1

Code Review用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问滤光片和阴影的使用
EN