图片阴影-曲线阴影+翘边阴影

最新推荐文章于 2022-02-11 22:59:12 发布
最新推荐文章于 2022-02-11 22:59:12 发布
阅读量454 收藏 1
点赞数
分类专栏： 图片动画 文章标签： 图片


教学视频：https://www.imooc.com/learn/240


CSS:


body {
    font-family: Arial;
    font-size: 20px;
}


body, ul {
    margin: 0;
    padding: 0;
    list-style: none; /*UI列表没前面那一点*/
}


/*曲线阴影：*/


.wrap {
    width: 70%;
    height: 200px;
    margin: 50px auto; /*上下50PX，左右居中*/
    background: #fff;
}


    .wrap h1 {
        font-size: 20px;
        text-align: center; /*h1里面的文本居中*/
        line-height: 200px; /*行高，一般用与文字*/
    }


.effect {
    box-shadow: 0px 1px 4px rgba(0,0,0,0.3),0 0 50px rgba(0,0,0,0.1) inset;
    -webkit-box-shadow: 0px 1px 4px rgba(0,0,0,0.3),0 0 50px rgba(0,0,0,0.1) inset;
    -moz-box-shadow: 0px 1px 4px rgba(0,0,0,0.3),0 0 50px rgba(0,0,0,0.1) inset;
    position: relative;
}


    .effect::after, .effect::before {
        content: '';
        background: #f00;
        position: absolute;
        z-index: -1;
        top: 50%;
        bottom: 0;
        left: 20px;
        right: 20px;
        box-shadow: 0 0 20px rgba(0,0,0,0.8);
        -webkit-box-shadow: 0 0 20px rgba(0,0,0,0.8);
        -moz-box-shadow: 0 0 20px rgba(0,0,0,0.8);
        -o-box-shadow: 0 0 20px rgba(0,0,0,0.8);
        border-radius: 100px/10px;
    }


    /*翘边阴影：*/


.box {
    width: 80%;
    height: auto; /*随内容的高度而撑开*/
    clear: both; /*清楚全部浮动*/
    overflow: hidden;
    margin: 20px auto;
}


    .box li {
        background: #FFF;
        width: 30%;
        height: 310px;
        float: left;
        margin: 20px 10px;
        border: 2px solid #efefef;
        box-shadow: 0px 1px 4px rgba(0,0,0,0.3),0 0 60px rgba(0,0,0,0.1) inset;
        -o-box-shadow: 0px 1px 4px rgba(0,0,0,0.3),0 0 60px rgba(0,0,0,0.1) inset;
        -webkit-box-shadow: 0px 1px 4px rgba(0,0,0,0.3),0 0 60px rgba(0,0,0,0.1) inset;
        -moz-box-shadow: 0px 1px 4px rgba(0,0,0,0.3),0 0 60px rgba(0,0,0,0.1) inset;
        position: relative;
    }


        .box li img {
            display: block;
            width: 99%;
            height: 300px;
            margin: 5px;
        }


        .box li:before {
            content: '';
            position: absolute;
            z-index: -2;
            width: 87%;
            height: 75%;
            left: 8%;
            bottom: 8%;
            background: none;
            box-shadow: 0 15px 20px rgba(0,0,0,0.6);
            -moz-box-shadow: 0 15px 20px rgba(0,0,0,0.6);
            -o-box-shadow: 0 15px 20px rgba(0,0,0,0.6);
            -webkit-box-shadow: 0 15px 20px rgba(0,0,0,0.6);
            transform: skew(-12deg) rotate(-4deg);
            -webkit-transform: skew(-12deg) rotate(-4deg);
            -moz-transform: skew(-12deg) rotate(-4deg);
            -o-transform: skew(-12deg) rotate(-4deg);
            -ms-transform: skew(-12deg) rotate(-4deg);
        }


        .box li:after {
            content: '';
            position: absolute;
            z-index: -2;
            width: 88%;
            height: 75%;
            left: 6%;
            bottom: 8%;
            background: none;
            box-shadow: 0 15px 20px rgba(0,0,0,0.6);
            -moz-box-shadow: 0 15px 20px rgba(0,0,0,0.6);
            -o-box-shadow: 0 15px 20px rgba(0,0,0,0.6);
            -webkit-box-shadow: 0 15px 20px rgba(0,0,0,0.6);
            transform: skew(12deg) rotate(4deg);
            -webkit-transform: skew(12deg) rotate(4deg);
            -moz-transform: skew(12deg) rotate(4deg);
            -o-transform: skew(12deg) rotate(4deg);
            -ms-transform: skew(12deg) rotate(4deg);
        }


body:

<body>
    <form id="form1" runat="server">
        <div class="wrap effect">
            <h1>曲线阴影</h1>
        </div>
        <ul class="box">
            <li>
                <img src="phto/051552412060.jpg" /></li>
            <li>
                <img src="phto/u=159389783,3102223341&fm=214&gp=0.jpg" /></li>
            <li>
                <img src="phto/73C58PIC8uq_1024.jpg" /></li>
        </ul>
    </form>
</body>

zhao55759013
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS3实现曲线阴影和翘边阴影
09-24
主要为大家详细介绍了CSS3实现曲线阴影和翘边阴影的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
CSS 曲线阴影实现的示例代码
09-27
我们在浏览网页的时候，有些时候会看到某些区块或者某些图片边框家里炫酷的阴影，本篇文章主要介绍了CSS 曲线阴影实现的示例代码，感兴趣的小伙伴们可以参考一下
css3图片阴影--曲线阴影/翘边阴影
TSeven37的博客
08-08 1223
  把box-shadow的x和y都设置为0，阴影从四边同时出现 设置box-shadow时注意浏览器兼容性 如果是正的 分别距离左边上面像素高度 一般不设置阴影的距离     1.border-radius: 100px /10px; 水平方向半径 / 垂直方向半径 2.设置盒子的宽高有两种方法第一种是直接设置width和height;第二种是设置position:absolut...
css翘边阴影图片,CSS 翘边阴影的实现代码
weixin_34564735的博客
08-03 142
本文介绍了CSS 翘边阴影的实现代码，分享给大家。具体如下：仔细观察可以看到每张图片下面的两个角都有不同程度的翘边。实现原理和【CSS】曲线阴影差不多，也是通过伪元素来实现。HTML代码CSS代码ul,li {list-style:none;}.box {width: 980px;height: auto;clear: both;overflow: hidden;margin: 20px auto...
css实现图片翘边阴影
zag666的博客
08-27 992
css阴影： box-shadow 属性用于向框添加一个或多个阴影。 语法： box-shadow: h-shadow v-shadow blur spread color inset; h-shadow 必需。水平阴影的位置。允许负值。 v-shadow 必需。垂直阴影的位置。允许负值。 blur 可选。模糊距离。 spread 可选。阴影的尺寸。 color 可选。阴影的颜色。请参阅 CSS ...
transition过渡+text-shadow文字阴影+新增颜色+实例
wq1228的博客
11-20 1433
Transition:过渡 Transition：none | property duration [delay] [timing-function ] transition-property： 属性的名称： （当指定CSS 属性改变时，过渡效果将开始） -all 所有属性都将获得过渡效果( 默认) -attr 过渡效果的 CSS 属性名称列表，列表以逗号分隔。 -none 没有
css实现图片曲线阴影
zag666的博客
08-27 1145
css阴影： box-shadow 属性用于向框添加一个或多个阴影。 语法： box-shadow: h-shadow v-shadow blur spread color inset; h-shadow 必需。水平阴影的位置。允许负值。 v-shadow 必需。垂直阴影的位置。允许负值。 blur 可选。模糊距离。 spread 可选。阴影的尺寸。 color 可选。阴影的颜色。请参阅 CSS ...
css 一条线加阴影,CSS3实现曲线阴影和翘边阴影
weixin_30134145的博客
08-03 478
html>CSS3实现曲线阴影和翘边阴影/*源于imooc的学习*/body{font-family:"微软雅黑","MicrosoftYaHei";font-size:20px;}body,ul,li,h1{padding:0;margin:0;}ul{list-style:noneoutsidenone;}.wrap{width:70%;height:...
css3 图片阴影、翘边效果
onlylele的博客
10-07 513
CSS3实现曲线阴影和翘边阴影 往往我们在做一些特殊的阴影效果的时候，使用图片做背景的方式实际上是很差劲的，在不考虑适配老版本浏览器的前提下，我们可以使用css3的自定义出自己想要的阴影风格。 下面将以曲线阴影和翘边阴影为例，讲解自定义阴影的过程。 先来看下效果图 曲线阴影 曲线阴影其实可以使用双层阴影重叠的方式实现 我们将取消阴影的图片做下分解应该会更容易理解，示意图如下： 如上图，图1基础的阴影下，在加一个有弧度的阴影即可。 1、图1基础阴影很容易实现，内阴影+外阴影 .box-shad
【Matlab】使用Matlab画出两个曲线的阴影
热门推荐
David Xiao
05-12 1万+
1、代码下载链接：https://github.com/raacampbell/shadedErrorBar 使用别人写的matlab函数可以画出曲线之间的阴影： 示例代码如下： x是横坐标，y是纵坐标（数值）；errbar第一行是上线（y+errbar(1,:)）, errbar第二行是下线（y+errbar(2,:)）。 注意：errbar只填写阈值（std），而不是y+阈值（y+std） y=randn(256,80)*5; y=mean(y)+16; errbar = [45*ones(1,leng
光伏电池组 局部阴影时输出模型 P-U曲线 I-U曲线 simulink实现 MPPT-Model
FPGA/MATLAB学习教程/源码/项目合作开发
02-11 4582
光伏电池组 局部阴影时输出模型 P-U曲线 I-U曲线 simulink实现 MPPT-Model P-U曲线 I-U曲线的仿真结果如下所示： D162
matlab_局部阴影光伏曲线，多峰模型
05-30
本文将详细探讨使用MATLAB处理局部阴影光伏曲线以及建立多峰模型的相关知识点。 首先，MATLAB（矩阵实验室）是一种强大的编程环境，广泛应用于科学计算、数据分析、算法开发和图形可视化。在光伏领域，MATLAB可以...
行业分类-设备装置-一种Landsat+TMETM+图像中山体阴影区的光谱信息恢复方法.zip
09-11
1. **山体阴影问题**：解释阴影如何影响遥感图像的光谱特性，包括减弱信号强度、改变光谱曲线形状等。 2. **恢复方法**：介绍该方法的具体步骤，可能包括利用相邻无阴影区域的信息、反演算法、图像增强技术等来重建...
chromedriver-mac-arm64_126.0.6474.0.zip
07-31
chromedriver-mac-arm64_126.0.6474.0.zip
chromedriver-mac-arm64_128.0.6548.0.zip
07-31
chromedriver-mac-arm64_128.0.6548.0.zip
MySQL查询加速器：利用Query Cache提升效率
07-31
MySQL是一个流行的开源关系型数据库管理系统（RDBMS），广泛用于Web应用程序的后端数据存储。它基于结构化查询语言（SQL）来管理数据，并且是LAMP（Linux, Apache, MySQL, PHP/Python/Perl）技术栈的一部分，这个技术栈常用于构建动态网站和Web应用程序。 MySQL的特点包括： - **开放源代码**：MySQL的源代码是公开的，任何人都可以自由使用和修改。 - **跨平台**：MySQL可以在多种操作系统上运行，包括Linux、Windows、macOS等。 - **高性能**：MySQL以其快速的查询处理和良好的性能而闻名。 - **可靠性**：MySQL提供了多种机制来确保数据的完整性和可靠性，包括事务支持、备份和恢复功能。 - **易于使用**：MySQL提供了简单直观的界面和丰富的文档，便于用户学习和使用。 - **可扩展性**：MySQL支持从小型应用到大型企业级应用的扩展。 - **社区支持**：由于其广泛的使用，MySQL拥有一个活跃的开发者社区，提供大量的资源和支持。 MySQL被广泛应用于各种场景，包括在线事务处理（OL
Objective-C语言的基础教程.md
最新发布
07-31
Objective-C是一种面向对象的编程语言，是C语言的扩展。它主要用于苹果的iOS和macOS应用程序开发。
暂存暂存暂存暂存暂存暂存暂存暂存
07-31
暂存暂存暂存暂存暂存暂存暂存暂存
origin中用阴影区域画一组曲线的errorbar
06-07
可以使用`fill_between()`函数来实现在曲线周围填充阴影区域，从而画出errorbar。以下是一个示例代码： ```python import numpy as np import matplotlib.pyplot as plt # 生成数据 x = np.linspace(0, 2*np.pi, 100) y = np.sin(x) error = 0.1 + 0.2*np.random.random(size=len(x)) # 画出曲线和errorbar plt.plot(x, y, color='blue', label='sin(x)') plt.fill_between(x, y-error, y+error, color='lightblue') plt.legend(loc='best') plt.show() ``` 这段代码会生成一个sin(x)函数的图像，并在曲线周围填充一个阴影区域，这个区域的大小由error决定。 如果想要画多组曲线的errorbar，可以在`fill_between()`函数中传入两条曲线的y值（即y1和y2参数），这样就可以画出多组errorbar了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值