【CSS3】 box-shadow 属性 → 设置边框阴影

最新推荐文章于 2022-09-18 08:16:27 发布
最新推荐文章于 2022-09-18 08:16:27 发布
阅读量2k 收藏
点赞数
分类专栏： WeChat小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44838589/article/details/111079671
版权

先贴一下文档 → CSS3 box-shadow 属性

突然间想让按钮的周围添加一层阴影来让按钮效果看起来更加立体，于是就有了这篇文章

代码：
.view03_02_01{
  box-shadow: 0 0 6rpx 5rpx #9BC1BC;
}
示例：

在这里插入图片描述
在这里插入图片描述

这个效果看的不太显眼，大家可以自己调一下box-shadow的参数来让他更逼真

box-shadow 参数解释：

在这里插入图片描述
太懒了哈哈哈哈只能贴图了

一段对白
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
详解CSS3的box-shadow属性制作边框阴影效果的方法
09-24
主要介绍了CSS3的box-shadow属性制作边框阴影效果的方法,box-shadow属性还是十分强大的,能设定阴影的水平或垂直位置,以及阴影的颜色和尺寸等,需要的朋友可以参考下
css边框阴影、JS基础语法
L19541216的博客
02-26 805
使用var关键字声明的变量，会在所有的代码执行之前被声明（但不会被赋值），但是如果声明变量是不使用var关键字，则变量不会被声明提前。属性名和属性值是一组一组的名值对结构，名和值之间使用 :连接，多个名值对之间使用，隔开如果一个属性之后没有其他的属性了，就不要写，你的全局变量，或者函数，可以覆盖 window 对象的变量或者函数。对象是保存堆内存中的，每创建一个新的对象，就会在对内存中开辟一个新的空间。前端验证：检查用户输入的内容是否复合一定的规则（用户名的长度，密码的长度，邮箱的格式）
纯js边框阴影
daidaide_pdd的博客
09-11 3920
cssdiv边框阴影 body{padding:200px;} div{border-width:1px;border-style:solid;padding:1px;} .a{background-color:#f3f3f3;border-color:#fbfbfb;} .b{background-color:#d8d8d8;border-color:#e8e8e8;} .c{backgrou
用JS添加聚焦事件，以给父元素添加边框阴影为例
lightpass的博客
08-17 1860
function setBoxShadow (){ $('.class').each(function () { $(this).focus(function(){ $(this).parent().css("outline","none");/*禁用浏览器自带边框阴影*/ $(this).parent().css("box-shadow","0px 0px 15px 1.5p...
js边框阴影自定义编辑器代码
ICode联盟
09-18 185
js边框阴影自定义编辑器代码，可以根据不同的参数自定义样式。
div 边框阴影
master3003的博客
08-18 632
box-shadow:阴影水平偏移值（可取正负值）； 阴影垂直偏移值（可取正负值）；阴影模糊值；阴影颜色； Firefox支持Box Shadow(阴影)：-moz-box-shadow:2px 2px 5px #333333； webkit内核的Safari和Chrome支持Box Shadow(阴影)：-webkit-box-shadow:2px 2px 5px #333333...
CSS3属性box-shadow使用指南
01-19
今天比较忙，没能好好看新东西，就记录一个常用的CSS3属性吧：box-shadow，表示阴影，如果设置了border-radius圆角，则阴影也是圆角 box-shadow目前是IE9及以上和其他现代浏览器都支持的属性了。 语法： Formal ...
CSS3属性box-shadow使用详细教程
12-13
box-shadow：length length length length colorlength：阴影水平偏移值length：阴影垂直偏移值length：阴影模糊值length：阴影边框color：阴影颜色 说明：设置块阴影 box-shadow:3px 3px 6px 0px #666效果如下图:...
CSS3中box-shadow的用法介绍
12-13
在CSS3中，`box-shadow`属性是一个强大的工具，用于为元素添加阴影效果，无论是外阴影（外侧的模糊效果）还是内阴影（内侧的填充效果），都可以通过它实现。下面我们将深入探讨这个属性的各个组成部分以及如何利用...
CSS3里box-shadow属性的使用方法-web前端教程
web前端入门基础进阶教程-htmlcssjs
07-03 1129
CSS里面的属性很多，有些属性长时间不用，就容易忘，尤其是那种需要设置多个值的属性。比如：box-shadow，每次使用CSS3里的box-shadow,都记不清box-shadow怎么使用，都要查阅资料才能实现对应的效果,现在总结一下,box-shadow的使用方法以及box-shadow内阴影的使用，方便以后查看。 一、box-shadow语法 box-shadow: none | inset（可选值，不设置，为外投影，设置，为内投影） x-offset（阴影水平偏移量，正方向为right） y-off
使文字在div中水平和垂直居中的的css样式为，四个边分别设置阴影样式
acxl0372的博客
03-22 1389
text-align:center; /*水平居中*/ line-height: 20px; /*行距设为与div高度一致*/ HTML元素 <div>水平垂直居中</div> css样式 div{ width:200px;height:200px; /*设置div的大小*/ border:1px so...
如何给边框添加阴影效果：box-shadow
wsyn的博客
07-13 4万+
css的box-shadow是用来添加边框阴影效果的。 属性值详解： 1、inset 可选值，默认阴影在盒子外 使用inset后，阴影在盒子内，即使指定边框或者透明边框，阴影依然存在。 2、 这是头两个 值，用来设置阴影偏移量。offset-x为设置阴影的水平位移，假如是负值，那么阴影在边框的左侧；offset-y设置阴影的垂直位移，假如是负值，那么阴影位于边
DOM：js实现放大框实时输入（盒子阴影），按钮增删，表格增删改查（遮罩效果，表格设置边框）
qq_45926448的博客
07-07 351
js实现放大框实时输入（盒子阴影），按钮增删，表格增删改查（遮罩效果，表格设置边框）
前端笔记：边框和阴影
Naisu的各种笔记
03-02 2153
文章目录目的总结 目的 总结
css-box-shadowing
weixin_30549657的博客
01-24 140
box-shadow: h-shadow v-shadow blur spread color inset; 注释：box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。 值描述测试 h-shadow 必需。水平阴影的位置。允许负值。 测试 v-...
nw.js边框阴影类似qq音乐边框阴影
qq_31165269的博客
05-18 869
1.首先在package.json 设置窗口透明2. 首页的内容一定不要充满整个窗口，留点margin的距离，然后再最外层的div上面设置box-show属性就可以了
css边框设置阴影样式
仗剑天涯
05-12 1万+
css边框设置阴影样式 box-shadow上下左右四个边框设置阴影样式 语法 值/说明 四个不同样式 实现效果 语法 box-shadow: h-shadow v-shadow blur spread color inset; 注意：boxShadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表，每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。 值 / 说明 h-shadow 必需的。水平阴影的位置。允许负值 v-s
CSS3阴影 box-shadow的使用和技巧总结
热门推荐
freshlover的专栏
05-28 71万+
text-shadow是给文本添加阴影效果，box-shadow是给元素块添加周边阴影效果。随着html5和CSS3的普及，这一特殊效果使用越来越普遍。 基本语法是{box-shadow:[inset] x-offset y-offset blur-radius spread-radiuscolor} 对象选择器 {box-shadow:[投影方式] X轴偏移量 Y轴偏移量阴影模糊半径 阴影扩
css中box-shadow
最新发布
07-27
CSS中的box-shadow属性用于为元素添加阴影效果。它可以为元素创建一个或多个阴影。 基本语法如下： ```css box-shadow: h-shadow v-shadow blur spread color inset; ``` - h-shadow：水平阴影的位置，可以是正值...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值