本文主要包含CSS3,阴影,曲线阴影,翘边阴影等相关知识,佚名 希望在学习及工作中可以帮助到您
本文实例为大家分享了CSS3实现曲线阴影和翘边阴影的效果，原来不用ps技术也可以实现阴影效果，很棒的效果，供大家参考，具体内容如下
效果图如下：
index.html
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>CSS3实现曲线阴影和翘边阴影</title>
- <style>
- /*源于imooc的学习*/
- body {
- font-family: "微软雅黑", "Microsoft YaHei";
- font-size: 20px;
- }
- body, ul, li, h1 {
- padding: 0;
- margin: 0;
- }
- ul {
- list-style: none outside none;
- }
- .wrap {
- width: 70%;
- height: 200px;
- margin: 50px auto;
- background-color: #fff;
- }
- .wrap h1 {
- font-size: 40px;
- text-align: center;
- line-height: 200px;
- }
- /**
- * box-shadow
- * 功能：添加一个或多个阴影
- * 语法：box-shadow: h-shadow v-shadow blur spread color inset;
- * 参数：
- * h-shadow（必需）：水平阴影的位置。允许负值。
- * v-shadow（必需）：垂直阴影的位置。允许负值。
- * blur（可选）：模糊程度，值越大越模糊。
- * spread（可选）：阴影的尺寸。一般不推荐设置。
- * color（可选）：阴影的颜色。请参阅CSS颜色值。
- * inset（可选）：将外部阴影（outset）改为内部阴影。
- * 浏览器兼容：
- * IE9+、Firefox 4、Chrome、Opera以及Safari 5.1.1支持box-shadow属性。
- */
- .effect {
- position: relative;
- /*box-shadow: h-shadow v-shadow blur color [inset];*/
- <