<!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. gai_strerror函数

    一.函数原型 #include <netdb.h> const char *gai_strerror(int error); 返回:指向错误描述消息字符串的指针 二.由getaddrinf ...

  2. 搭建阿里云lnmp环境 (centos7+nginx+MySQL5.7.9+PHP7)

    阿里云一台服务器出现问题! 我估计是一键安装包环境的原因,所以打算重新搭建下环境! 首先,当然是先做好快照!安全第一! 对系统盘做更换系统操作,装上纯净版的centos. 装好后,进入系统 一.挂载数 ...

  3. Spark SQL自定义外部数据源

    1 涉及到的API BaseRelation: In a simple way, we can say it represents the collection of tuples with know ...

  4. 均方根误差（RMSE）与平均绝对误差（MAE）

    RMSE Root Mean Square Error,均方根误差 是观测值与真值偏差的平方和与观测次数m比值的平方根. 是用来衡量观测值同真值之间的偏差 MAE Mean Absolute Erro ...

  5. Setup Collision and Overlap Event

    添加头文件 #include "Components/StaticMeshComponent.h" 禁用网格体组件的碰撞效果 MeshComp->SetCollisionEn ...

  6. android4.4之后的HttpUrlConnection的实现是基于okhttp

    首先看HttpUrlConnection使用 URL url = new URL("http://www.baidu.com"); HttpURLConnection urlCon ...

  7. Spring Boot：如何配置静态资源的地址与访问路径

    spring.resources.static-locations=classpath:/static,classpath:/public,classpath:/resources,classpath ...

  8. 【运维】浪潮服务器一块硬盘显示红色Offline（或者Failed）解决办法

    [写在前面]           最近服务器不知道为什么总是出现故障,以前戴尔服务器硬盘出现故障,也就是说硬盘旁边的灯显示为红色的时候,一般情况下都是表示硬盘坏掉了,直接买一块新的硬盘,将坏掉的硬盘拿 ...

  9. camera理论基础和工作原理【转】

    转自:http://www.cnblogs.com/fjutacm/p/220631977df995512d136e4dbd411951.html 写在前面的话,本文是因为工作中需要编写摄像头程序,因 ...

  10. motor helper

    # -*- coding: utf-8 -*- # @Time : 2019-02-13 10:44 # @Author : cxa # @File : mongohelper.py # @Softw ...