ios上border-radius不生效问题

最新推荐文章于 2024-11-11 08:39:29 发布
原创 最新推荐文章于 2024-11-11 08:39:29 发布 · 704 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css

解决方法：
1、transform: rotate(0deg);

	border-radius: 20px;
  	// 兼容ios的圆角问题
  	transform: rotate(0deg);
 	-webkit-transform: rotate(0deg);
  	overflow: hidden;

2、大神原文：https://www.jianshu.com/p/687779212eef

JandyPam
关注
iOS小技能：设置视图圆角失效的解决方案
专注于计算机研发知识和资讯分享
05-14 1万+
前言 1、尝试设置_numberLab.clipsToBounds = YES; 2、尝试设置 [self.numberLab layoutIfNeeded]; 之后再执行cornerRadius - (void)layoutSubviews{ [super layoutSubviews]; [self.numberLab layoutIfNeeded]; ...
uniapp编译H5解决ios的border-radius失效问题，以及ios满屏显示不全的问题
weixin_44705979的博客
05-13 754
【代码】uniapp编译H5解决ios的border-radius失效问题，以及ios满屏显示不全的问题。
解决border-radius失效问题
12-09
解决border-radius失效问题
兼容iphone(ios)圆角（border-radius）不起作用的问题
Min_nna的博客
11-13 2729
该问题出现主要是因为ios中使用transform导致,可在期望设置overflow: hidden;的元素上(当前例子即.swiper-outbox)设置。当轮播图中,将属性设置在父级,每个图片都有border-radius,这样显得不美观.
ios使用border-radius时失效
pgzero的博客
12-08 2675
出现此问题的原因是因为ios手机会在transform的时候导致border-radius失效 解决方法：在使用动画效果带transform的元素的上一级div元素的css加上下面语句： -webkit-transform:rotate(0deg);
CSS基础知识day8 box-sizing、resize、box-shadow、opacity、背景属性、border-radius、渐变、字体图标、2D、3D变换、过渡、动画、伸缩盒模型、BFC
2301_77358195的博客
11-11 704
CSS3在未来会按照。
精选资源
wxml2canvas微信根据wxml绘制海报
03-18
##根据wx.createSelectorQuery()获取wxml的'color','font-size','font-weight','font-family','backgroundColor','border','border-radius','box-sizing','line-height'属性绘制海报。 ##可以设置 1.data-index设置...
<view style="width: 100%; height: 2rem; background-color: #FAF9FA; font-size: 24rpx; line-height: 2rem; text-align: center; border-radius: 0px 0px 3px 35px;"> <image style="width: 15px; height: 15px; display: inline-block; vertical-align: middle;" src="https://linda-uni.oss-cn-guangzhou.aliyuncs.com/images/%E6%8F%90%E7%A4%BA.svg" mode=""></image> <text style="vertical-align: middle; color: #ccc;">请填写后点击完成，即可进入首页</text> </view>border-radius: 0px 0px 3px 35px;" 帮我弄一下 我要就是看着像气泡那样的 有一角是尖的
07-26
#### 解决 iOS 上 `border-radius` 不生效的问题 如果在 iOS 设备上发现 `border-radius` 未按预期显示，特别是在使用了 `transform` 属性的情况下，可以通过在容器上添加 `transform: rotate(0deg)` 来强制 iOS ...
<script setup lang="ts"> import {ref, nextTick, computed} from 'vue' definePage({ name: 'AI', style: { navigationBarTitleText: 'AI', navigationStyle: 'custom' }, }) // 弹出框 const show = ref(false) const onClickLeft = () => { uni.navigateBack() } // ai 模型选择 const aiForm = ref({ model: 'DeepSeek', iconUrl: '/static/AI/deepseek.png', width: 35, height: 22, }) // ai 模型列表 const aiModel = ref([{ id: 1, name: 'DeepSeek V3.2 Think', iconUrl: '/static/AI/deepseek.png', width: 35, height: 22, }, { id: 2, name: 'DeepSeek V3.1 Think', iconUrl: '/static/AI/deepseek.png', width: 35, height: 22, }, { id: 3, name: 'ERNIE 4.5 Turbo VL', iconUrl: '/static/AI/ernie.png', width: 22, height: 22, }, { id: 4, name: 'ERNIE X1.1', iconUrl: '/static/AI/ernie.png', width: 22, height: 22, }]) // 选择模型 const selectModel = () => { show.value = true } // 变更模型 const changeModel = (value: any) => { aiForm.value.model = value.name aiForm.value.iconUrl = value.iconUrl aiForm.value.width = value.width aiForm.value.height = value.height show.value = false } // 聊天消息列表 const messages = ref<any>([ {role: 'ai', content: '你好！我是你的 AI 助手，请问有什么可以帮您？'} ]) // 输入框内容 const inputMessage = ref('') // 是否正在加载 AI 回复 const loading = ref(false) // 自动滚动到最新消息 const scrollIntoView = computed(() => { return `msg-${messages.value.length - 1}` }) // 发送消息 const handleSend = async () => { if (!inputMessage.value.trim() || loading.value) return // 添加用户消息 messages.value.push({ role: 'user', content: inputMessage.value }) inputMessage.value = '' // 显示加载状态 loading.value = true // 确保视图更新后滚动到底部 await nextTick() scrollToBottom() // 模拟调用 AI 接口 try { const response = await callAiApi(messages.value.slice(-1)[0].content) messages.value.push({ role: 'ai', content: response }) } catch (error) { messages.value.push({ role: 'ai', content: '抱歉，AI 服务暂时不可用，请稍后再试。' }) } finally { loading.value = false await nextTick() scrollToBottom() } } // 模拟 AI 接口请求（实际项目中替换为真实 API） const callAiApi = (prompt: any) => { return new Promise((resolve) => { setTimeout(() => { resolve(`这是对“${prompt}”的回答。AI正在模拟中...`) }, 1200) }) // 实际开发中应使用如下方式： // return new Promise((resolve, reject) => { // uni.request({ // url: 'https://your-ai-api.com/chat', // method: 'POST', // data: {prompt}, // success: (res) => { // if (res.statusCode === 200) { // resolve(res.data.response) // } else { // reject(new Error('AI request failed')) // } // }, // fail: reject // }) // }) } // 滚动到底部 const scrollToBottom = () => { return nextTick() } // 弹出框关闭时清空 const handleClose = () => { show.value = false } </script> <template> <wd-navbar custom-class="ai-navbar" fixed custom-style="background-color: transparent !important; height: 140rpx !important;" safeAreaInsetTop> <template #left> <view class="left-button" @click="onClickLeft"> <wd-icon name="arrow-left1" size="22px"></wd-icon> </view> </template> <template #title> <view class="title-box" @click="selectModel"> <wd-img :width="aiForm.width" :height="aiForm.height" :src="aiForm.iconUrl"/> <span class="title-text">{{ aiForm.model }}</span> <wd-icon name="caret-down-small" size="18px"></wd-icon> </view> </template> </wd-navbar> <view class="container"> <view class="chat-container"> <!-- 消息列表 --> <scroll-view class="message-list" scroll-y :scroll-into-view="scrollIntoView" > <!-- 单条消息 --> <view v-for="(msg, index) in messages" :key="index" :id="'msg-' + index" class="message-item" > <!-- 用户消息：右对齐，带头像 --> <view v-if="msg.role === 'user'" class="user-message-container"> <image src="/static/user-avatar.png" class="avatar"/> <view class="user-message"> <text class="message-text">{{ msg.content }}</text> </view> </view> <!-- AI 消息：左对齐，带头像 --> <view v-else class="ai-message"> <image src="/static/avatar.png" class="avatar"/> <text class="message-text">{{ msg.content }}</text> </view> </view> <!-- AI 正在输入状态 --> <view v-if="loading" class="ai-message"> <image src="/static/avatar.png" class="avatar"/> <text class="message-text">AI思考中...</text> </view> </scroll-view> <!-- 输入区域 --> <view class="input-area"> <input v-model="inputMessage" class="input-field" type="text" placeholder="请输入您的问题..." @confirm="handleSend" /> </view> </view> </view> <wd-popup v-model="show" position="top" transition="fade-down" custom-style="border-radius:32rpx;top:200rpx;left:40rpx;right:40rpx;padding-bottom: 30rpx;" @close="handleClose"> <wd-card title="模型选择" class="model-container"> <view v-for="item in aiModel" :key="item.id" class="model-item" @click="changeModel(item)"> <wd-img :width="item.width" :height="item.height" :src="item.iconUrl"/> <span class="title-text">{{ item.name }}</span> </view> </wd-card> </wd-popup> </template> <style scoped lang="scss"> :deep(.wd-navbar.is-border:after) { background: none !important; } .left-button { border-radius: 50px; height: 80rpx; width: 80rpx; background-color: rgba(172, 172, 172, 0.13); display: flex; align-items: center; justify-content: center; } .title-box { display: flex; height: 100%; align-items: center; justify-content: center; } .title-text { margin-left: 10rpx; font-size: 28rpx; } .model-container { width: 500rpx; height: 460rpx; display: flex; justify-content: center; align-items: center; font-size: 40rpx; border-radius: 32rpx; } .model-item { height: 100rpx; border-radius: 15rpx; margin-bottom: 20rpx; border: #9e56f6 1rpx solid; display: flex; align-items: center; justify-content: center; } .container { margin-top: calc(140rpx + 54px); } :deep(.page-wraper) { min-height: 0 !important; } /* 聊天区域 */ /* 根容器：全屏高度，弹性布局垂直排列 */ .chat-container { display: flex; flex-direction: column; width: 100%; height: calc(100vh - 140rpx - 54px); overflow-x: hidden; box-sizing: border-box; } /* 消息列表区域：自动填充剩余空间 */ .message-list { flex: 1; /* 自动伸缩以填满父容器减去输入框的高度 */ padding: 20rpx; overflow-y: auto; /* 垂直滚动 */ overflow-x: hidden; /* 防止意外横向滚动 */ box-sizing: border-box; } /* 每一条消息容器 */ .message-item { display: flex; margin-bottom: 15rpx; width: 100%; /* 防止溢出 */ box-sizing: border-box; } /* =============== 新增：用户头像容器 =============== */ .user-message-container { display: flex; align-items: flex-start; gap: 16rpx; max-width: 100%; justify-content: flex-end !important; /* 整体右对齐 */ flex-direction: row-reverse !important; /* 视觉上：气泡在左，头像在右 */ } /* 滚动条隐藏（不影响原有样式） */ .message-list { flex: 1; padding: 20rpx; overflow-y: auto; overflow-x: hidden; box-sizing: border-box; -ms-overflow-style: none; scrollbar-width: none; } /* 用户消息气泡 */ .user-message { color: white; padding: 16rpx 24rpx; border-radius: 30rpx 30rpx 0 30rpx; /* 右下角无弧度 */ max-width: 70%; word-wrap: break-word; word-break: break-word; font-size: 28rpx; background-color: #007aff; box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1); /* 移除 margin-left: auto; */ } /* AI 消息整体容器：左对齐，含头像和文本 */ .ai-message { display: flex; align-items: flex-start; gap: 16rpx; /* 头像与文字间距 */ max-width: 100%; } /* AI 头像样式 */ .avatar { width: 60rpx; height: 60rpx; border-radius: 50%; /* 圆形 */ border: #b559ff 1rpx solid; flex-shrink: 0; /* 防止被压缩 */ } /* 所有消息文本统一类名 */ .message-text { padding: 16rpx 24rpx; border-radius: 30rpx 30rpx 30rpx 0; /* 左下角无弧度 */ max-width: 70%; word-wrap: break-word; word-break: break-word; font-size: 28rpx; color: #333; box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05); line-height: 1.5; } /* 输入区域：固定在底部，留出安全区 */ .input-area { display: flex; align-items: center; padding: 20rpx; position: relative; z-index: 999; width: 100%; box-sizing: border-box; /* 安全区适配：iOS 设备底部留白 */ padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx); /* 或使用 constant，在老版本 iOS 中兼容 */ padding-bottom: calc(constant(safe-area-inset-bottom) + 20rpx); padding-bottom: calc(env(safe-area-inset-bottom, 20rpx) + 20rpx); } /* 输入框样式（可自由调整） */ .input-field { flex: 1; height: 150rpx; line-height: 80rpx; border: 1rpx solid #da34ff; border-radius: 25rpx; padding: 0 30rpx; font-size: 28rpx; color: #333; max-width: 100%; margin-right: 20rpx; overflow: hidden; word-break: break-word; } /* 发送按钮 */ .send-btn { width: 120rpx; height: 80rpx; font-size: 28rpx; background-color: #007aff; color: white; border-radius: 40rpx; display: flex; align-items: center; justify-content: center; flex-shrink: 0; /* 防止被挤压 */ } </style> 小程序上，用户消息靠右对齐
最新发布
11-07
你在小程序上遇到 **用户消息无法靠右对齐** 的问题，即使已经添加了 `justify-content: flex-end` 和 `flex-direction: row-reverse`，依然无效。 --- ### ✅ 终极解决方案（专为微信小程序优化） #### 根本原因...
border-radius 圆角 ios 失效
前端小胡兔的博客
01-19 3290
父元素设置: border-radius:50px; overflow:hidden; 子元素(img)设置: width:100%; height:100%; 这时若安卓显示圆角 ios为直角 解决方法: 给父元素设置如下样式: -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -webkit-transform:...
ios使用transform的时候圆角变方框，border-radius失效问题
weixin_43956521的博客
06-22 719
背景：ios使用transform的时候圆角变方框，border-radius失效 原因：在设置border-radius的同时，给元素添加了 css3的transform动画导致设置border-radius失效 解决方法：在使用border-radius的元素上面同时设置属性 -webkit-transform:rotate(0deg); ...
ios上同时使用transform和border-radius时，border-radius会失效的问题
一键写代码的博客
07-22 714
在ios小程序开发时发现。 同时使用transform 和border-radius属性是 border-radius会失效。 解决办法： 方法1、 不同时使用 方法2、在使用动画效果带transform的元素的上一级div元素的css加上下面语句 -webkit-transform:rotate(0deg); ...
ios/safari滚动(transform)的时候圆角变方框(border-radius)失效问题
77的博客
03-05 1965
比如界面有跑马灯（轮播图），为了图片好看，一边都有圆角，所以边框就用border-radius: 12px; 用谷歌浏览器发现没什么问题。但是用safari，iphone的mac都一样，会出现滚动的时候圆角短时间成方块，动画完成后，会变成圆角。 查了资料发现safari会在transform的时候border-radius失效。 解决方案就是外围的div加个 -webkit-transf...
border-radius 失效
FE-阿阳的博客
05-30 4526
其实就是父级设置圆角属性失效，父元素使用border-radius和overflow:hidden做成圆形，子元素如果使用了transform属性，则父元素的overflow:hidden会失效。设置了border-radius，也设置了overflow:hidden，预览也没事，就是真机不行。border-radius 失效问题，部分机型的兼容性，实测：ios 14，低版本安卓机型上复现；在父级，就是设置了radius属性的class上加上这两条css就可以了。
ios 父元素 border-radius元素 overflow:hidden失效问题 iPhone ios 苹果兼容问题
qq_43368682的博客
07-27 534
一个小坑，是一个滑动效果，border-radius和overflow：hidden在ios系统下的小程序的兼容。真机起效果了 .mini-pay-scroll-cotainer{ -webkit-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); }
ios UILabel 切圆角 cornerRadius无效
baidu_40537062的博客
12-03 1163
文章目录我之前忘了写第二句代码，所以无效，加了第二句代码后就可以了但在storyboard中用runtime给label切圆角![在这里插入图片描述](https://img-blog.csdnimg.cn/20201203201244221.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzQwNTM3MDYy,size_16,col
在iphone手机微信浏览器border-radius
u013018357的博客
04-14 1288
在iphone手机微信浏览器border-radius只给出左边的上部分和下部分，右边不给的话 ，对于iphone手机会 默认加上去，解决的办法是右边的上部分和下部分的radius写上0rem<p class="input-p clear"> <input id="checkCode" class="imgCode ws_reg_imgCode" type="
border-radius兼容iPhone的问题(圆角失效)
weixin_42060658的博客
11-15 2946
-webkit-appearance:none; border-radius: .05rem;
编写手机端自适应页面案例，springMVC代码，SpringMVC上传代码，去掉input框中原有的样式，使ios按钮没有圆角,css中的border-radius类似
涂作权的博客
04-10 2727
1、编写的页面  pageEncoding="UTF-8"%> http://java.sun.com/jsp/jstl/core" prefix="c"%> http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> pageEncoding="UTF-8"
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值