css - 边框半径底部 Bug React Native
问题描述
我在底部和左侧添加边框时遇到问题,我正在放置属性,但边框越过了圆圈而不是周围。
<View style={{
borderBottomColor:'red',
borderBottomWidth:20,
borderRadius:500,
position: 'absolute',
left: 0,
top: 0,
transform:[{rotate:('180deg')}],
height: 150,
width: 150,
backgroundColor: 'orange',
boxSizing: 'border-box',
zIndex: 2000,
overflow: 'hidden'
}}></View>
这个想法是为了达到我在 Codepen 中所做的结果(https://codepen.io/anon/pen/bmdmWq)
解决方案
那个怎么样:
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<View style={{
borderRadius: 150,
left: 0,
top: 30,
height: 150,
width: 150,
backgroundColor: 'orange',
}}>
<View style={{
borderTopColor: 'red',
borderTopWidth: 75,
borderRadius: 150,
left: 0,
top: 0,
height: 150,
width: 150,
zIndex: 1,
position: 'absolute'
}} />
<View style={{
borderTopColor: 'orange',
backgroundColor: 'orange',
borderTopWidth: 60,
borderRadius: 140,
left: 10,
top: 10,
height: 130,
width: 130,
zIndex: 1,
position: 'absolute'
}} />
<View style={{
borderTopColor:'green',
borderTopWidth:5,
left: 0,
top:75,
width: 150,
zIndex: 1,
position:'absolute'
}} />
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1'
}
});
我想您仍然需要稍微调整一下大小才能使结果与您的图片完全匹配
推荐阅读
- java - IntelliJ IDEA 方法名称缩进
- amazon-web-services - AWS 文件上传
- citrus-framework - 所有测试用例的全局随机数
- react-native - React Native 调试器 - 在启动后不久执行的代码中没有命中断点
- r - R 和 SQL Server AzureVM 之间的数据传输速度降低
- javascript - 带有 Promises 的 Node JS cron 脚本
- c++ - 如何在运行时找出我的 c++ 应用程序中可用的视频编解码器?
- python - Python每天创建新文件以写入
- bash - Azure CLI 跳过覆盖标志
- html - 使用 padding-bottom 设置图像高度