让边框带阴影

最新推荐文章于 2021-04-09 21:22:17 发布
最新推荐文章于 2021-04-09 21:22:17 发布
阅读量380 收藏
点赞数
分类专栏： CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shitouPlus/article/details/48606903
版权

要实现的效果如图：

这种边框效果通过单一的border设置是不能显示此效果的，

需要配合使用border-left和border-right来显示需要的效果。

border-right: 1px solid #0065B0;
border-left: 1px solid #0080DD;

通过左右边框设置不同的颜色，通过叠加显示出阴影效果。

shitouPlus
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
如何给边框添加阴影效果：box-shadow
wsyn的博客
07-13 4万+
css的box-shadow是用来添加边框阴影效果的。 属性值详解： 1、inset 可选值，默认阴影在盒子外 使用inset后，阴影在盒子内，即使指定边框或者透明边框，阴影依然存在。 2、 这是头两个 值，用来设置阴影偏移量。offset-x为设置阴影的水平位移，假如是负值，那么阴影在边框的左侧；offset-y设置阴影的垂直位移，假如是负值，那么阴影位于边
C# 边框阴影窗体效果
Microblue（严 武）
12-23 6478
using System;using System.Collections.Generic;using System.ComponentModel;using System.Data;using System.Drawing;using System.Linq;using System.Text;using System.Windows.Forms;using System.Runtime.InteropServices;namespace test{    public partial class For
winform panel 绘制边框阴影
05-08
winform panel 绘制边框阴影 ，可以设置具体显示哪个边框的阴影。 static Image shadowDownRight = new Bitmap(typeof(ShadowPanel), "Images.tshadowdownright.png");//下右 static Image shadowDown = new Bitmap(typeof(ShadowPanel), "Images.tshadowdown.png");// 下 static Image shadowRight = new Bitmap(typeof(ShadowPanel), "Images.tshadowright.png");//右 static Image shadowTop = new Bitmap(typeof(ShadowPanel), "Images.tshadowtop.png");//上 static Image shadowLeft = new Bitmap(typeof(ShadowP
怎样给边框添加阴影？CSS3属性box-shadow帮你搞定！
WangMin@汪末末
04-09 4315
作者:WangMin 格言:努力做好自己喜欢的每一件事 CSDN原创文章 博客地址 ???? WangMin 关于box-shadow属性，有的小伙伴可能用的时候直接复制已有的，并没有仔细了解过box-shadow属性的参数分别是什么含义，最后导致阴影的样式不能按照自己的需求自由控制，让自己感到很苦恼。接下就一起来好好学习这个属性吧！！ 以上仅是个人见解，若有不足之处欢迎在下方评论指出，那就先分享到这里!! ???? 后续继续更新!! ...
box-shadow讲解
nieyanlong的专栏
04-25 3785
一节我们一起探讨了一下CSS3的文字阴影text-shadow的使用方法，今天我们接着一起来探讨一下CSS3中的另一个属性box-shadow的使用方法。CSS3的box-shadow有点类似于text-shadow，只不过不同的是text-shadow是对象的文本设置阴影，而box-shadow是给对象实现图层阴影效果。 本文我们搁下IE不谈，只谈谈box-shadow的具体使用方法 语法：
边框加上阴影，内外阴影都有
肖肖肖丽珠的博客
11-09 1427
.box{border:5px solid #000;box-shadow: 0px 0px 20px red,0px 0px 20px red inset;width:300px;height:200px} box-shadow默认的是外阴影。加上inset就是内阴影； box-shadow:0px 0px 20px red;  参数是水平偏移（0阴影在右边），垂直偏移（<0 阴影
使文字在div中水平和垂直居中的的css样式为，四个边分别设置阴影样式
acxl0372的博客
03-22 1378
text-align:center; /*水平居中*/ line-height: 20px; /*行距设为与div高度一致*/ HTML元素 <div>水平垂直居中</div> css样式 div{ width:200px;height:200px; /*设置div的大小*/ border:1px so...
css使边框附带阴影效果
liukai6的博客
07-09 2215
边框阴影效果可以使边框更加好看 使用box-shadow属性 使用的语法 box-shadow: h-shadow v-shadow blur spread color inset; 下面了解一下参数 h-shadow 水平阴影的位置,允许负值 v-shadow 垂直阴影的位置,允许负值 blur 模糊距离 spread 阴影尺寸 color 阴影颜色 inset 外部阴...
Html/CSS前端实现文字边框阴影效果
09-27
在开发中现在对于阴影效果的使用已经越来越广泛了,那么今天我们就来说一说用同样的手法实现边框阴影。下面脚本之家小编给大家带来了Html/CSS前端实现文字边框阴影效果，需要的朋友参考下吧
css3圆角边框和边框阴影示例
09-25
主要介绍了css3圆角边框和边框阴影示例,需要的朋友可以参考下
Qt去掉标题栏添加边框阴影
12-10
基于Qt5的去掉标题栏之后添加边框阴影的解决方案。 四种解决方法： 1. 如果是Windows平台，那么可以调用Windows相关API。 2. 使用Qt的QGraphicsDropShadowEffect类来实现。 3. 使用Qt的qDrawBorderPixmap函数来实现...
Android 给控件添加边框阴影效果
08-28
主要介绍了Android 给控件添加边框阴影效果,文中代码部分top代表下边的阴影高度，left代表右边的阴影宽度。具体实例代码大家参考下本
小三角带边框带阴影的div——css实现效果
swallowliyan的专栏
12-14 1万+
第一种情况：带边框的小三角 乍一看，很简单，做小三角，首先想到的是利用border的transparent特性，可以制作出小三角的效果。但是注意，这个小三角本身就是边框制作出来的。怎么能在小三角的外边再加一层小边框呢。那就必须再叠加一层一样的东西，让两者有1px的错位。问题就解决了。不想在页面添加多余的无意义的标签，还想实现这个效果。首先想到的就是用元素的伪类来实现。原理就是这样，废话不多说，上
CSS3 box-shadow 属性
WhoWrongsWhere的专栏
05-23 632
实例 向 div 元素添加 box-shadow： div { box-shadow: 10px 10px 5px #888888; } 定义和用法 box-shadow 属性向框添加一个或多个阴影。 提示：请使用 border-image-* 属性来构造漂亮的可伸缩按钮！ 默认值：none 继承性：no 版本：CSS3 JavaScr
使用炫彩界面库完美实现窗口阴影效果
03-22 6457
炫彩界面库阴影窗口使用方法 下载完整项目 下载完整项目, 包括炫彩界面库的库文件和UI设计器免费版 CSDN下载地址: http://download.csdn.net/detail/mengfeigo/9790255 效果截图 先看软件运行效果截图,然后接下来讲解使用: 目标: 本示例讲解炫彩阴影窗口的使用, 让读者可以利用炫彩界面库轻松
C# WinForm窗体四周阴影效果
热门推荐
于大大大洋
09-08 3万+
一、起因关于winform窗体无边框的问题很简单，只需要设置winform的窗体属性即可：FormBorderStyle = FormBorderStyle.None;但是这中无边框窗口实现的效果和背景完全没有层次的感觉，所以能加上阴影，突出窗口显示的感觉。二、网上搜索的解决方案方法 1首先，发现了使用 user32.dll 中方法实现的方案： C# WinForm无边框窗体设置阴影效果缺点：这种
Phaser3实现边框高亮动画，并且边框带阴影
最新发布
06-06
Phaser3中可以通过使用Graphics对象来实现边框高亮动画，并且为边框添加阴影效果。 首先，创建一个Graphics对象： ```javascript let graphics = this.add.graphics(); ``` 然后，通过设置线条样式来绘制矩形边框： ```javascript let rect = new Phaser.Geom.Rectangle(x, y, width, height); graphics.lineStyle(borderWidth, borderColor, 1); graphics.strokeRectShape(rect); ``` 其中，`borderWidth`和`borderColor`分别是边框的线条宽度和颜色。 接下来，为边框添加阴影效果，可以使用`setShadow`方法： ```javascript graphics.setShadow(shadowOffsetX, shadowOffsetY, shadowColor, shadowAlpha, blur, isStroke, isFill); ``` 其中，`shadowOffsetX`和`shadowOffsetY`分别是阴影的X轴和Y轴偏移量，`shadowColor`和`shadowAlpha`分别是阴影的颜色和透明度，`blur`是阴影的模糊程度，`isStroke`和`isFill`分别表示是否对线条和填充进行阴影处理。 最后，为边框添加闪烁的动画效果，可以使用Tween动画： ```javascript let tween = this.tweens.add({ targets: graphics, alpha: 0, duration: duration, ease: 'Linear', yoyo: true, repeat: -1 }); ``` 其中，`alpha`表示Graphics对象的透明度，`duration`表示动画的持续时间，`ease`表示缓动函数，`yoyo`表示是否反复播放动画，`repeat`表示动画的重复次数。 完整代码示例： ```javascript let graphics = this.add.graphics(); let rect = new Phaser.Geom.Rectangle(x, y, width, height); graphics.lineStyle(borderWidth, borderColor, 1); graphics.strokeRectShape(rect); graphics.setShadow(4, 4, 'rgba(0, 0, 0, 0.5)', 2, true, false); let tween = this.tweens.add({ targets: graphics, alpha: 0, duration: duration, ease: 'Linear', yoyo: true, repeat: -1 }); ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值