CSS实现层阴影效果

最新推荐文章于 2024-07-08 11:32:20 发布
最新推荐文章于 2024-07-08 11:32:20 发布
阅读量989 收藏 1
点赞数 1
分类专栏： CSS 特效 文章标签： css textbox server asp border xhtml
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wzh307/article/details/4101144
版权

CSS代码：

 

 

 

前台页面：

 

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Login.aspx.cs" Inherits="Login" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>系统登录</title>   
</head>
<body>
    <form id="form1" runat="server">
        <div style="text-align:center">
            <div class="shadow">
                <div class="content">
                    <h1>系统登录</h1>
                    <table>
                        <tr>
                            <td>用户名：</td>
                            <td>
                                <asp:TextBox ID="txtName" runat="server"></asp:TextBox>
                            </td>
                        </tr>
                        <tr>
                            <td>密 码：</td>
                            <td>
                                <asp:TextBox ID="txtPwd" TextMode="Password" runat="server"></asp:TextBox>
                            </td>
                        </tr>
                        <tr>
                            <td>验证码：</td>
                            <td>
                                <asp:TextBox ID="txtValidCode" runat="server"></asp:TextBox>
                            </td>
                        </tr>
                        <tr>
                            <td></td>
                            <td>
                                <asp:Button ID="btnLogin" runat="server" Text=" 登 录 " />
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </form>
</body>
</html>

wzh307
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
css3——阴影（立体感，层次效果），渐变色按钮
ylp的博客
05-10 7360
box-shadow: 0px 0px 12px #97eaf9; 语法 box-shadow: h-shadow v-shadow blur spread color inset; h-shadow 必需。水平阴影的位置。允许负值。 v-shadow 必需。垂直阴影的位置。允许负值。 blur 可选。模糊距离。 spread 可选。阴影的尺寸。 color 可选。阴影的颜色。 inset 可...
纯CSS3实现的阴影效果
09-25
在本文中，我们将深入探讨如何使用CSS3来创建阴影效果，包括字体阴影和内阴影。CSS3是 Cascading Style Sheets 的第三版，引入了许多新特性，其中之一就是阴影效果的增强，使得网页设计更加丰富多彩。 首先，我们来...
CSS高级篇——阴影
老梁的专栏
10-02 748
阴影可以让元素“浮起来”，盒子（box）和文本都可以用。
CSS篇.day03-按钮,圆角,阴影,自适应,层级,三栏布局
qq_54379580的博客
12-21 477
对按钮, 圆角, 阴影, 自适应, 层级z-index, 三栏布局的简单介绍...
[css] box-shadow层级问题-相邻元素背景遮盖了阴影
qq_14993591的博客
07-21 718
当box-background元素没有给背景颜色时，box-shadow的阴影可以正常显示当box-background元素给定一个背景色之后，box-shadow的阴影就没有了。
css：box-shadow层级问题-相邻元素背景遮盖了阴影
彭世瑜的博客
05-24 2146
当box-background元素没有给背景颜色时，box-shadow的阴影可以正常显示 <style> .box { height: 100px; line-height: 100px; text-align: center; } .box-shadow { box-shadow: 0 5px 10px -5px #00ff00; } .box-background { } </style> <div
css阴影效果实现方法分享
09-25
本文将深入探讨如何使用CSS实现阴影效果，包括对不同浏览器的支持情况以及如何自定义阴影属性。 首先，我们可以看到代码示例中提到了几种不同的阴影样式声明，这些声明分别针对不同的浏览器： 1. `filter: progid:...
css div 边框阴影利用背景图或内外层div实现层次感觉阴影效果
09-25
在网页布局中偶尔会用到div 边框阴影做一些特殊效果本文介绍两种实现方法:一种是利用内外层的div边框来实例层次感觉的css边框阴影效果，另一种是利用了背景图片再加内外div来实现的这种效果更漂亮，需要了解的朋友...
CSS3在线实现图片阴影效果.zip
09-25
【CSS3在线实现图片阴影效果.zip】这个压缩包文件包含了一种使用CSS3技术来创建图片阴影效果的方法。CSS3是CSS（层叠样式表）的最新版本，它引入了许多新特性和功能，使得网页设计更为丰富和动态。在这个项目中，...
css3带阴影效果的tab选项卡特效代码
03-20
在这个“css3带阴影效果的tab选项卡特效代码”中，我们将探讨如何利用CSS3的阴影属性来实现具有视觉吸引力的选项卡效果。 首先，我们来看CSS3中的阴影属性。主要有三个：`box-shadow`、`text-shadow` 和 `inset-...
css3阴影被遮罩后面的div给遮住了！
热门推荐
szy1000的专栏
09-01 1万+
今天在写页面的时候，页面里面有个阴影的效果。如图：（为了显示更明显，我改了一下颜色，加宽了距离） 但是在页面书写的时候，怎么也看见阴影的效果，查看代码也生效了。 后来我把下面的div 用margin-top属性撑开，看到了原因，原来是下面的div给遮住了。 后来，我想用z-index的方法提高层级，但是很遗憾，还是失败了！原因是阴影
CSS阴影的几种形式
weixin_45170083的博客
04-02 1547
写静态，少不了对阴影的了解。图片阴影啦，文字阴影啦，盒子阴影啦， 其中用的相对较多的是，用的多了也就记住了。 text-shadow 是给文本添加阴影效果， text-shadow:20px 20px 20px burlywood; text-shadow第一个值 在text-shadow属性里第一个值代表的是水平方向的距离，这个值是必须有的而且支持负值 text-shadow第二个值 在tex...
CSS: box-shadow+z-index实现层叠式阴影
weixin_39015132的博客
09-07 4442
前言 还原设计稿，尊重UI设计师的劳动成果。先来看看： 开始 今天要研究的就是红框中的3个层叠的阴影。动手编码之前，我们先来分析一下实现的思路。 设计师设计的时候应该是对最大的一个进行了缩放，生成两个小一些的放在下边，实现层叠的效果。开发时也可以根据这个思路去实现。 这边他明确给出了相差的宽度，我就把下面两个单独出来，设计圆角时，只设计左下和右下的。 实践 wxml: /* 最...
CSS层级小技巧：在滚动时自动添加头部阴影
彭世瑜的博客
08-01 1212
固定头部的布局推荐用sticky实现，好处是可以保留头部占位，无需额外预留整体实现思路是CSS障眼法和CSS层级，相互遮挡fixed定位在不设置top或者left值时，仍然位于原先位置，但是会在这个位置固定下来absolute定位在不设置top或者left值时，仍然位于原先位置，也会跟随内容滚动纯色遮挡在滚动时有些生硬，半透明渐变遮挡在滚动时会更加柔和https。...
DIV CSS3 box-shadow对象盒子阴影和图片阴影
cxxbzy的博客
10-22 717
box-shadow 属性用于向盒子添加一个或多个阴影效果。 offset-x：阴影的水平偏移量。正数向右偏移，负数向左偏移。 offset-y：阴影的垂直偏移量。正数向下偏移，负数向上偏移。 blur：阴影模糊度，不能取负数。 spread：阴影大小。正数阴影扩大（阴影大小大于盒子大小），负数阴影缩小（阴影大小小于盒子大小），0阴影与盒子同等大小。 inset：表示添加内阴影，默认为外阴影。 ...
CSS里的几个小知识
最新发布
07-08 224
在 中，rel=“stylesheet” 表示被链接的文档（即 mystyle.css）是一个样式表（style sheet），用于为当前页面提供样式定义。在 HTML 中，用于指定链接指向的资源地址。标签的属性，可以帮助搜索引擎更好地理解和索引网页，优化页面在不同设备上的显示，以及实现一些特定的功能，如自动刷新、设置字符集等。1、“rel” 是 “relation” 或 “relationship” 的缩写，意思是“关系；在 HTML 中， 标签的 rel 属性用于定义当前文档与被链接文档之间的关系。
html+JavaScript+css 24点计算器
w11111xxxl的博客
07-03 1064
body {margin: 0;padding: 0;h1 {button {.results {
CSS - 深入理解选择器的使用方式
Kevin ’ s blog
07-05 778
复合选择器建立在基本选择器之上，由多个基础选择器，通过不同的方式组合而成。复合选择器可以在复杂结构中，快速而准确的选中元素。
html+js+css在线倒计时
w11111xxxl的博客
07-05 784
距离下班还1分钟倒计时
box-shadow实现层次感阴影
01-11
box-shadow属性可以用来为元素添加阴影效果，从而实现层次感阴影。它可以接受多个参数，包括水平偏移量、垂直偏移量、模糊半径、扩展半径和颜色。 下面是一个示例代码，演示如何使用box-shadow属性实现层次感阴影： ```css .box { width: 200px; height: 200px; background-color: #f1f1f1; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 0, 0, 0.3), 0 0 30px rgba(0, 0, 0, 0.1); } ``` 在上面的代码中，我们为一个名为.box的元素添加了三个层次感阴影。第一个阴影具有较小的模糊半径和较高的不透明度，第二个阴影具有较大的模糊半径和较低的不透明度，第三个阴影具有最大的模糊半径和最低的不透明度。这样可以创建出一种层次感的阴影效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值