【CSS3】---曲线阴影翘边阴影

效果图

代码

index

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>box-shadow</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
  <div class="wrap effect">
     <h3>Shadow Effect</h3>
  </div>
  <ul class="box">
      <li><img src="images/photo1.jpg"/></li>
      <li><img src="images/photo2.jpg"/></li>
      <li><img src="images/photo3.jpg"/></li>
  </ul>
</body>
</html>

css

body{
    font-family: Arial;
    font-size: 24px;
}
/*位置样式*/
.wrap h3{
    text-align: center;
    position: relative;
    top:100px;
}
.wrap{
    width: 50%;
    height: 300px;
    background: #FFF;
    margin:20px auto;
}
/*阴影样式 box-shadow: h-shadow v-shadow blur spread color inset;*/
/*边框阴影*/
.effect{
    position: relative;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.2) inset;
}
/*下边的曲线阴影*/
.effect:before,.effect:after{
    content:"";
    position: absolute;
    z-index: -1;
    left: 6px;
    right:6px;
    bottom: 0;
    top:95%;
    background: red;
    border-radius: 100px / 10px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
}

/*照片*/
.box{
    width: 980px;
    height: auto;
    margin:20px auto;
    padding: 0;
    clear: both;
    overflow: hidden;
}
.box li img {
    width: 290px;
    height: 210px;
    padding: 5px;
}
ul.box li{
    background: #fff;
    list-style: none;
    width: 300px;
    height: 220px;
    margin:20px 10px;
    line-height: 220px;
    border: 2px solid #efefef;
    position: relative;
    float: left;
    padding: 0;
    text-align: center;
}

/*照片阴影*/
ul.box li:before{
    content:"";
    position: absolute;
    z-index: -1;
    width: 85%;
    height: 80%;
    left: 20px;
    bottom: 5px;
    background: red;
    transform: skew(14deg) rotate(3deg) ;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
}
ul.box li:after{
    content:"";
    position: absolute;
    z-index: -1;
    width: 85%;
    height: 80%;
    right: 20px;
    bottom: 5px;
    background: red;
    transform: skew(-14deg) rotate(-3deg) ;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
}
时间: 2024-10-10 03:01:14

【CSS3】---曲线阴影翘边阴影的相关文章

CSS3实现曲线阴影和翘边阴影

预备知识 DIV+CSS基础 圆角:border-radius 2D变幻:transform:skew && rotate 伪类::before 和 :after 代码 HTML结构代码很简单,CSS内含注释,图片小伙伴们自己替换哈! HTML <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>CSS3

CSS3下不一样的阴影、背景和圆角边框样式

CSS3下不一样的阴影.背景和圆角边框样式 CSS2.1 发布至今已有7年的历史.CSS3的出现就是增强CSS2.1的功能,减少图片的使用次数以及解决HTML页面上的特殊效果 当前,CSS3技术最适合在移动Web开发中使用的特性包括: ●增强的选择器 ●阴影 ●强大的背景设置 ●圆角边框 阴影: 现在的CSS3样式已经支持阴影样式效果.目前可使用的阴影的效果分为两种:文本内容的阴影效果和元素的阴影效果. box-shadow CSS3的box-shadow属性是让元素具有阴影的效果,其语法如下:

CSS3实现带动画、阴影的表单提示特效

CSS3实现带动画.阴影的表单提示特效,Form表单提示效果,请不要使用IE浏览,否则你会错过很多精彩的效果,在火狐下你会看到,漂亮的带阴影的表单文本框,而且是圆角的,当鼠标点击表单框的时候出现动画的提示效果,相信你看了之后会喜欢的. <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>石家庄标准件</tit

《CSS3实战》笔记--文本阴影:text-shadow

通过阅读和学习书籍<CSS3实战>总结 <CSS3实战>/成林著.-北京机械工业出版社2011.5 语法: none|<length>|none|[<shadow>,]*<shadow> 或 none|<color>|[,<color>]* 取值简单说明: 表示颜色: 表示由浮点数字和单位标识符组成的长度值,可为负值,指定阴影的水平延伸距离: 表示由浮点数字和单位标识符组成的长度值,不可为负值,指定模糊效果的作用距离.如果

CSS3学习之圆角box-shadow,阴影border-radius

最近经常玩腾讯微博,出来职业习惯,看看它的CSS,里面运用了大量的css3的东东,有一处用到了Data URI,还有css e­xpression有争议的地方,对png24图片的处理也是用滤镜,类似(padding-top:2px\0)欠考虑! 看了腾讯的,下午就学了一下css3的东东!打算以后的项目中也逐渐引入css3,因为他很酷,虽然ie不支持! 1.阴影box-shadow取值:<length> <length> <length>? <length>?

如何解决CSS3使用:after和:before阴影,由z-index引起的问题

问题的答案非常简单: #parent { position: relative; z-index: 1; } #pseudo-parent { position: absolute; } /* no z-index allowed */ #pseudo-parent:after { position: absolute; z-index: -1; } 具体参考: http://stackoverflow.com/a/9072467 如何解决CSS3使用:after和:before阴影,由z-in

CSS3 --添加阴影(盒子阴影、文本阴影的使用)

CSS3 - 给div或者文字添加阴影(盒子阴影.文本阴影的使用)CSS3定义了两种阴影:盒子阴影和文本阴影.其中盒子阴影需要IE9及其更新版本,而文本阴影需要IE10及其更新版本.下面分别介绍两种阴影的使用: 1,盒子阴影(1)盒子阴影的属性是 box-shadow1box-shadow:5px 5px 10px gray;前两个值分别表示阴影水平方向和垂直方向的偏移量.第三个值表示模糊距离.最后一个值是阴影颜色. (2)盒子阴影是可以随着盒子形状而自动变化的原文:CSS3 - 给div或者文

关于C3翘边阴影的demo

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>翘边阴影</title> /*翘边阴影样式*/ <style> .demo { display: inline-block; *display: inline; width: 200px; height: 248px; margin: 20px; background-color:

纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果

大家好,我是小强老师. 今天我们看下CSS3最为简单的两个属性. css3给我们带来了很多视觉的感受和变化,以前的图片做的事情,很多代码都能实现. 下面给大家简单介绍两种最为常见的圆角边框和盒子阴影,同时附上一个iphone 手机效果,提供大家练习. 1.border-radius 圆角矩形 语法格式: border-radius:  水平半径/垂直半径 只不过我们平时都把后面的这个垂直半径给省略了. 圆角也有连写的方法 border-radius: 左上角  右上角  右下角  左下角;