<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>box-shadow</title>

    <style>

        .box{

            position: relative;

            width: 700px;

            height: 200px;

            margin: 0 auto;

            background: #fff;

            text-align: center;

            line-height: 200px;

            font-size: 25px;

            box-shadow: 0 1px 4px rgba(0,0,0,0.3),

                        0 0 1px rgba(0,0,0,0.3) inset;

        }

        .box:after,.box:before{

            display: block;

            position: absolute;

            content:'';

            background: rgba(0,0,0,1);

            bottom: 0;

            left: 15px;

            right: 15px;

            top: 50%;

            z-index: -1;

            box-shadow: 0 0px 20px rgba(0,0,0,0.4);

            border-radius: 30%;

        }

        .box1{

            width: 400px;

            height: 300px;

            background: #f1f1f1;

            margin: 0 auto;

            margin-top: 15px;

            line-height: 300px;

            font-size: 25px;

            text-align: center;

            box-shadow:0 1px 4px rgba(0,0,0,0.4),

                        0 0 60px rgba(0,0,0,0.4) inset;

            border-radius: 12px;

            position: relative;

        }

        .box1:before,.box1:after{

            position: absolute;

            content: '';

            display: block;

            width: 80%;

            height: 80%;

            left: 43px;

            bottom: 11px;

            background: #f1f1f1;

            box-shadow: 0 8px 20px rgba(0,0,0,0.7);

            z-index: -1;

        }

        .box1:before{

            transform: skew(-12deg) rotate(-4deg);

        }

        .box1:after{

            transform: skew(12deg) rotate(4deg);

        }

    </style>

</head>

<body>

    <div class="box">

        box-shadow曲线阴影

    </div>

    <div class="box1">

        <div class="img">box-shadow翘边阴影</div>

    </div>

</body>

</html>

css3 曲线阴影，翘边阴影的更多相关文章

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

    效果图 代码 index <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title& ...

  2. CSS3实现图形曲线阴形和翘边阴影

    首先,来看看完成之后的效果图: 实现原理 ①曲线阴影实现: 多个阴影重叠,就是正常阴影+曲线阴影 正常情况下,有个矩形有正常的阴影,作为主投影,这时候再定义一个有一定弧度圆角的圆角矩形,然后放在正常矩 ...

  3. 转载---CSS3实现曲线阴影和翘边阴影

    预备知识 DIV+CSS基础 圆角:border-radius 2D变换:transform:skew && rotate 伪类::before 和 :after 代码 HTML结构代 ...

  4. 关于C3翘边阴影的demo

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  5. CSS3+HTML5实现块阴影与文字阴影

    CSS 3 + HTML 5 是未来的 Web,它们都还没有正式到来,虽然不少浏览器已经开始对它们提供部分支持.本教程分5节介绍了 5 个 CSS3 技巧,可以帮你实现未来的 Web,不过,这些技术不 ...

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

    最近经常玩腾讯微博,出来职业习惯,看看它的CSS,里面运用了大量的css3的东东,有一处用到了Data URI,还有css e­xpression有争议的地方,对png24图片的处理也是用滤镜,类似( ...

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

    原文:纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果 大家好,我是小强老师. 今天我们看下CSS3最为简单的两个属性. css3给我们带来了很多视觉的感受和变化,以前的图片做的事 ...

  8. css3圆角矩形、盒子阴影

    css3圆角矩形 div{ width: 200px; height: 200px; border: #f00 solid 1px; margin-bottom: 10px; } 1.设置 borde ...

  9. CSS3 --添加阴影（盒子阴影、文本阴影的使用）

     CSS3 - 给div或者文字添加阴影(盒子阴影.文本阴影的使用)CSS3定义了两种阴影:盒子阴影和文本阴影.其中盒子阴影需要IE9及其更新版本,而文本阴影需要IE10及其更新版本.下面分别介绍两种 ...

随机推荐

  1. 20155324 2016-2017-2 《Java程序设计》第5周学习总结

    20155324 2016-2017-2 <Java程序设计>第5周学习总结 教材学习内容总结 try.catch 1.求平均数程序示例 import java.util.Scanner; ...

  2. Darknet windows移植(YOLO v2)

    Darknet windows移植 代码地址: https://github.com/makefile/darknet 编译要求: VS2013 update5 及其之后的版本(低版本对C++标准支持 ...

  3. Understanding a project which include NodeJS, Webpack, Vue

    公司有一个web 项目是用 Vue 写的, 前段时间负责这个tool的人离职了没有人维护,其他人又很忙,我就去看了一下以便以后能加一些新功能在上面 没有接触过Vue, 这些理解了一下关系做一些学习记录 ...

  4. luogu P3297 [SDOI2013]逃考

    传送门 gugugu 首先每个人管理的区域是一个多边形,并且整个矩形是被这样的多边形填满的.现在的问题是求一条经过多边形最少的路径到达边界,这个可以最短路. 现在的问题是建图,显然我们应该给相邻的多边 ...

  5. luogu P3250 [HNOI2016]网络

    传送门 考虑只有一个询问,怎么使用暴力枚举最快的得到答案.因为要求最大的,所以可以把链按权值从大往小排序,然后往后扫,找到一个没有交的就是答案,直接退出 一堆询问,可以考虑整体二分,先二分一个值\(m ...

  6. luogu P3722 [AH2017/HNOI2017]影魔

    传送门 我太弱了,只会乱搞,正解是不可能正解的,这辈子不可能写正解的,太蠢了又想不出什么东西,就是乱搞这种东西,才能维持得了做题这样子 考虑将询问离线,按右端点排序,并且预处理出每个位置往前面第一个大 ...

  7. 第27月第10天 cmake

    1.error: tool 'xcodebuild' requires Xcode的解决办法 sudo xcode-select --switch /Applications/Xcode.app/Co ...

  8. js 中编码（encode）和解码（decode）的三种方法

    js对文字进行编码涉及3个函数:escape,encodeURI,encodeURIComponent,相应3个解码函数:unescape,decodeURI,decodeURIComponent 下 ...

  9. 配置虚拟机 Linux 静态IP

    一.查看IP.子网掩码.网关 虚拟网络编辑器 NAT中获取 取消勾选DHCP 二.查看DNS 虚拟机DNS与Windows设置相同 三.配置linux [root@lhs800 ~]# vi /etc ...

  10. LOJ #2541「PKUWC2018」猎人杀

    这样$ PKUWC$就只差一道斗地主了 假装补题补完了吧..... 这题还是挺巧妙的啊...... LOJ # 2541 题意 每个人有一个嘲讽值$a_i$,每次杀死一个人,杀死某人的概率为$ \fr ...