【uniapp 开发】如何给边框添加阴影效果

本文详细介绍了CSS中的box-shadow属性,包括其如何添加边框阴影效果,各参数的意义及使用方法,如阴影偏移、模糊半径、阴影拓展等,并通过多个实例展示了不同效果的实现方式。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

css的box-shadow是用来添加边框阴影效果的。

属性值详解:

1、inset
可选值,默认阴影在盒子外
使用inset后,阴影在盒子内,即使指定边框或者透明边框,阴影依然存在。

2、
这是头两个 值,用来设置阴影偏移量。offset-x为设置阴影的水平位移,假如是负值,那么阴影在边框的左侧;offset-y设置阴影的垂直位移,假如是负值,那么阴影位于边框顶部。这个用数学中的数轴来理解应该是可以的,如下图:
css数轴

我们的水平原点是以边框的左上角为起始点,x为水平位移,Y为垂直位移。

3、
指定模糊半径,不允许负值,假如设置为0,则阴影不模糊,否则设置越大的值,边框阴影就越模糊。

4、
指定阴影拓展,假如设置为0,不拓展,正值阴影扩大,负值缩小。

demo:

(1)输入框内阴影
1162622-20190605182752691-2143022527.png

.shadow (
     -moz-box-shadow: inset 0 0 10px #CCC;
     -webkit-box-shadow: inset 0 0 10px #CCC;
     box-shadow: inset 0 0 10px #CCC;
)

(2)简单效果
1162622-20190605182801814-40501132.png

.one (
     -moz-box-shadow:5px 5px;
     -webkit-box-shadow:5px 5px;
     box-shadow:5px 5px;
)

(3)虚阴影效果
1162622-20190605182808873-1347915148.png

.two (
     -moz-box-shadow:2px 2px 10px #06c;
     -webkit-box-shadow:2px 2px 10px #06c;
     box-shadow:2px 2px 10px #06c;
)

(4)渐变阴影效果
1162622-20190605182818354-205336351.png

.three (
     -moz-box-shadow:0 0 10px #06c;
     -webkit-box-shadow:0 0 10px #06c;
     box-shadow:0 0 10px #06c;
)

(5)带光晕效果
1162622-20190605182825801-1655035531.png

.four (
    -moz-box-shadow:0 0 10px 10px #06c;
    -webkit-box-shadow:0 0 10px 10px #06c;
    box-shadow:0 0 10px 10px #06c;
)

(6)内阴影效果
1162622-20190605182832830-2647123.png

.five (
    -moz-box-shadow:inset 5px 5px 10px #06c;
    -webkit-box-shadow: inset 5px 5px 10px #06c;
    box-shadow: inset 5px 5px 10px #06c;
)

(7)彩色阴影
1162622-20190605182839866-516380415.png

.six (
    -moz-box-shadow:0 0 10px red,
                                   2px 2px 10px 10px yellow,
                                   4px 4px 12px 12px green;
    -webkit-box-shadow:0 0 10px red,
                                   2px 2px 10px 10px yellow,
                                   4px 4px 12px 12px green;
    box-shadow:0 0 10px red,
                                   2px 2px 10px 10px yellow,
                                   4px 4px 12px 12px green;
)

转载于:https://www.cnblogs.com/neo-java/p/10981252.html

uniApp开发小程序中,如果你想自定义 tabBar 的样式并使其中间按钮凸起,并且点击该按钮时弹出一个弹框,你可以按照以下步骤操作: 1. 首先,在项目中引入需要的样式文件,通常在 `pages/index/index.wxss` 或者全局 CSS 文件中定义样式。 ```css .tab-bar-custom { display: flex; justify-content: space-between; align-items: center; } .tab-bar-item-center { position: relative; background-color: #fff; /* 设置中间按钮的基础颜色 */ border-radius: 50%; /* 给按钮圆角 */ overflow: hidden; } .tab-bar-item-center::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; height: 40%; background-color: rgba(0, 0, 0, 0.1); /* 边框阴影颜色 */ border-radius: 50%; box-shadow: inset 0px 5px 10px rgba(0, 0, 0, 0.2); /* 内阴影效果 */ transition: all 0.2s ease-in-out; /* 动画过渡 */ } .tab-bar-item-center:hover::before, .tab-bar-item-center.active::before { width: 100%; height: 100%; } ``` 2. 然后,在对应的页面组件 `.wxml` 文件中,设置 tabBar 的结构,并给中间按钮添加 click 事件监听: ```html <view class="tab-bar custom-tab-bar"> <view class="tab-bar-item tab-bar-item-left">左按钮</view> <view class="tab-bar-item tab-bar-item-center active" @click="showPopup">中间按钮</view> <view class="tab-bar-item tab-bar-item-right">右按钮</view> </view> <!-- 弹窗组件 --> <view id="popup" class="popup" v-if="isPopupVisible" @close="hidePopup"> <text>弹框内容</text> </view> ``` 3. 在 JavaScript 部分编写点击事件处理函数以及状态控制: ```javascript Page({ data: { isPopupVisible: false, // 初始化弹框可见状态 }, showPopup: function() { this.setData({ isPopupVisible: true }); // 显示弹框 }, hidePopup: function() { this.setData({ isPopupVisible: false }); // 隐藏弹框 }, }) ``` 当用户点击中间的按钮时,会触发 `showPopup` 函数,弹窗组件将会显示,而当用户关闭弹框时,会调用 `hidePopup` 函数。记得在你需要的地方导入 CSS 和 JS 文件,并在项目的 `app.json` 中配置 tabBar
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值