box-shadow边框阴影

已于 2023-03-24 00:28:55 修改
阅读量762 收藏 1
点赞数
分类专栏： js 文章标签： html 前端
于 2022-07-25 15:07:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_58414196/article/details/125975475
版权 
<style>

      .div {

        width: 300px;

        height: 40px;

        background-color: red;

        box-shadow: 10px 10px 10px green;

        margin: 30px;

      }

      .div1 {

        width: 300px;

        height: 40px;

        background-color: blue;

        box-shadow: 10px 0 0 green inset;

        margin: 30px;

      }

      .div2 {

        width: 300px;

        height: 40px;

        background-color: green;

        box-shadow: 0px 2px 0px red;

        margin: 30px;

      }

    </style>

  </head>

  <body>

    <div class="div"></div>

    <div class="div1"></div>

    <div class="div2"></div>

  </body>

</html>

keepRuning9
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
​box-shadow阴影效果，高级用法
02-26
​box-shadow阴影效果，高级用法，通过css设置，为图片增加旋转的角度和阴影效果，为用户呈现出在桌子上拜访照片的感觉，快下载试试吧
vue封装一个移动阴影的盒子
hahahahahahahaha__1的博客
08-06 694
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;自定义指令&lt;/title&gt; &lt;script src='./node_modules/vue/dist/vue.min.js'&gt;&
box-shadow 四边样式设置-发现了大秘密，再也不用担心box-shadow不会用了~
josiecici的博客
11-30 1485
先看一个盒子如下图： 官方用语：box-shadow:1px 2px 3px 4px #ccc inset； 六个值的含义：（这里是把盒子当成一个原点，所以右边和下边都是x和y轴的正方向，而上边和左边即需要加个负号） 1px 从原点开始，沿x轴正方向的长度（倘若为负值，为沿x轴负方向的长度）； 2px 从原点开始，沿y轴正方向的长度；（倘若为负值，为沿y轴负方向的长度）； 3px 阴影的模糊度，只允许为正值； 4px 阴影扩展半径； #ccc 阴影颜色； inset 设置为内阴影（如果不写这个
Vue中设置输入框内有阴影
qq_30072161的博客
04-19 1293
需求：在点击输入框时，出现阴影 解决： <style> .el-form .el-input__inner { /*输入框椭圆*/ border-radius: 0px; /* box-shadow是设置阴影的 inset：可选值，默认阴影在盒子外，使用inset后，阴影在盒子内*/ box-shadow: inset 0 0 3px #CCC; /* -moz-, -webkit-, -o-这些都是浏览器前缀 Firefox: -moz- Chrome,
边框阴影设置
weixin_43837268的博客
12-03 1758
1.box-shadow：h-shadow  v-shadow blur spread color  inset； h-shadow ：水平偏移量 ----必选           v-shadow：垂直偏移量-----必选 blur：模糊距离 -------------可选 spread：阴影尺寸---------- 可选 color：阴影颜色 ------------ 可选 inset：内阴影...
VUE实现box-shadow生成器
CNSamRol的博客
06-23 477
我们知道input的color只有rgb而没有rgba，所以我们需要写一个函数来生成rgba。为input标签绑定v-modle，来实现双向绑定。为box绑定内联样式。
vue 给边框加阴影
热门推荐
Carina的编程技术博客
09-16 1万+
vue 给边框加阴影 box-shadow: 0px -1px 0px 0px #e5e5e5, /*上边阴影 */ -0.2px 0px 0px 0px #e5e5e5, /*左边阴影 */ 0.2px 0px 0px 0px #e5e5e5, /*右边阴影 */ ...
vue通过css实现页面的挖空效果(某一块高亮)
qq_40591925的博客
10-08 2025
【代码】vue通过css实现页面的挖空效果(某一块高亮)
边框，圆角和阴影以及浮动布局的应用！
id2359955624的博客
07-20 939
边框，圆角和阴影以及浮动布局的应用！
uni-app：Vue：shadow阴影
wuwuFQ的博客
01-12 2894
盒子阴影 box-shadow:5px 5px 10px 10px gray; 前两个值分别表示阴影水平方向和垂直方向的偏移量(必需的)。 第三个值表示模糊距离，第四个是阴影的大小，最后一个值是阴影颜色，都是可选的。 创建内部阴影： box-shadow:5px 5px 10px gray inset; ...
详解CSS3的box-shadow属性制作边框阴影效果的方法
09-24
主要介绍了CSS3的box-shadow属性制作边框阴影效果的方法,box-shadow属性还是十分强大的,能设定阴影的水平或垂直位置,以及阴影的颜色和尺寸等,需要的朋友可以参考下
CSS阴影效果的比较之drop-Shadow与box-Shadow
12-14
drop-shadow与box-shadow都是阴影效果（光晕效果）的css属性，二者最大的不同点在于：box-shadow只能制作矩形的阴影，而drop-shadow则可以制作和物件不透明区域完全相同形状的阴影。底下是二个css属性的用法： ....
IE下模拟css3中的box-shadow(阴影)效果代码
09-25
在ie下模拟css3中的box-shadow（阴影）可以使用ie的Shadow（阴影）滤镜来实现，需要注意的是该滤镜必须配合background属性一起使用，否则该滤镜失效
vue3 动态添加行、阴影
ZDM_9999的博客
12-30 648
【代码】vue3 动态添加行。
vue+css实现给弹框后的背景区域添加阴影效果
darabiuz的博客
02-03 2206
效果如下： 只有弹框部分是白色，其他的加上一层阴影效果 首先创建一个div，v-show控制显示和隐藏，默认隐藏 <div class="bg" v-show="isShowbg"></div> .bg{ //设置布局方式为固定定位，充斥整个屏幕 position: fixed; top: 0; left: 0; bottom: 0; right: 0; //设置背景颜色为0.4透明度的黑色 background-co
vue echarts 地图外边框阴影
周家大小姐
08-02 3413
这里部分写的假数据,根据需求修改 data() { return { myEcharts: null, scatterData: [ { name: '广州市', value: [ 113.280637, 23.125178]
vue底部阴影
m0_56209375的博客
08-24 3793
style="width: 100%;border-radius: 20px; background-color: #ffffff;box-shadow:10px 10px 10px 10px #ebf6f3;" :cell-style="cellStyle" :header-cell-style="{textAlign: 'center'}"
vue动态绑定样式
xi1213的博客
02-28 609
每次点击方块时通过三元表达式，改变对应的class，每一个不同的class对应不同的样式，从而通过改变class实现样式的切换。 <template> <div class="container"> <!--通过三元表达式选择class使用对应的样式--> <div v-for="item in list" :key="item" :class="current == item ? 'current' : '.
Web前端开发技术、详细文章、（例子）html 列表、有序列表、无序列表、列表嵌套
最新发布
jingyu飞鸟
05-20 927
为首标记，以...
box-shadow实现边框效果
07-25
box-shadow属性可以用来实现边框效果。它可以在元素的边框周围创建一个阴影效果，从而达到类似边框的效果。 下面是一个示例代码，演示如何使用box-shadow属性实现边框效果： ```css .box { width: 200px; height: 200px; background-color: #f0f0f0; box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.3); } ``` 在上面的示例中，我们创建了一个类名为"box"的元素，并设置了宽度和高度。然后，我们使用box-shadow属性为该元素添加一个阴影。该属性的值由四个参数组成： - 水平偏移量：0 - 垂直偏移量：0 - 模糊半径：5px - 扩展半径：2px 最后一个参数是可选的，用于控制阴影的扩展大小。我们还使用rgba()函数为阴影指定了颜色和透明度。 通过调整这些参数的值，你可以自定义边框的样式和效果。希望这可以帮到你！如果还有其他问题，请继续提问。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值