DIV+CSS布局图片加阴影效果方法-白红宇

DIV+CSS布局图片加阴影效果方法

阅读量：6489 次

发布时间：2019-06-24

本文共 1532 字，大约阅读时间需要 5 分钟。

DIV+CSS布局图片加阴影效果方法

转自：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>CSS3编写一个带阴影的Logo效果www.iiwnet.com</title>

<style>

*{margin:0;padding:0;line-height:1.5;font-size:1px;}

.wrap{ width: 240px; height: 240px;

border-bottom-left-radius: 120px;

border-bottom-right-radius: 120px;

border-top-right-radius: 120px;

background:#b1e4ff;

border:2px solid #789cb6;

box-shadow: 5px 5px 7px #999;

-moz-border-bottom-left-radius: 120px;

-moz-border-bottom-right-radius: 120px;

-moz-border-top-right-radius: 120px;

position:relative;margin:10px;

}

.font_e{font-size:300px;color:#fff; position:absolute;left:0;top:0;width: 240px; height: 240px;text-align:center;

line-height:210px; font-family:"Arial", Gadget, sans-serif;}

.tip{border-color:#fff transparent transparent transparent;border-style:solid;border-width:50px;font-size:0; position:absolute;top:-40px;left:-40px;

-webkit-transform: rotateZ(135deg);

-moz-transform: rotate(135deg);

transform: rotateZ(135deg);

}

.tip_2{width:50px;height:50px; background:#fff; position:absolute;top:25px; left:25px;

-webkit-transform: rotateZ(135deg);

-moz-transform: rotate(135deg);

transform: rotateZ(135deg);

}

</style>

</head>

<body>

</div>

</body>

</html>

转载于:https://my.oschina.net/xixios/blog/81062

你可能感兴趣的文章

javaWeb--(1)初识javaWeb

查看>>

综合技术----同步、异步、阻塞与非阻塞的理解

2015Android移动开发应用主流菜单模式

C++第三方类库（后续添加,欢迎大家提供）

查看>>

中国数据8027seller梁——配置DNS服务器：

查看>>

Objective-c 网络编程3 NSURLSession

查看>>

JDK 动态代理

查看>>

恢复win7 VISTA等NT6以上操作系统文件扩展名未知情况下的打开方式