JiKeBang
JiKeBang
  • 发布:2019-01-07 12:58
  • 更新:2022-10-15 19:01
  • 阅读:4755

nvue image图片为什么无法圆角?

分类:nvue

错误写法:
<image style="width:500px;height:500px;border-radius: 250px;" src="https://img-cdn-qiniu.dcloud.net.cn/new-page/uni.png"></image>

已实现:
<div >
<div class="imgbox">
<image class="img" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1546848052660&di=666aa07edcf3791f957b9a249ba908cb&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01ef4a55448bed0000019ae9d0edff.jpg"></image>
</div>
</div>

<style >
.imgbox{
width:500px;
height:500px;
border-radius:999px;
background-clip:padding-box;
border-top-left-radius: 999px; / 左上角 /
border-top-right-radius: 999px; / 右上角 /
border-bottom-right-radius: 999px; / 右下角 /
border-bottom-left-radius: 999px; / 左下角 /
}
.img{
width:500px;
height:500px;
}
</style>

2019-01-07 12:58 负责人:无 分享
已邀请:
Trust

Trust - 少说废话

weex 的规范,只能是挨个声明。。。

3***@qq.com

3***@qq.com - 1

给图片加个div层级,设置div圆角,图片100%,我这边都是这样设置的

t***@163.com

t***@163.com - 80后

复制代码<div style="border-radius:50;"><image style="width: 60px;height: 60px;" v-if="data.avatar" :src="data.avatar"></image></div>
nicepainkiller

nicepainkiller - 最爱 dcloud

不要用百分百 要用数值

<image src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595840599227&di=13ddd6bfa43a8a7b39ba045ae8f035bc&imgtype=0&src=http%3A%2F%2Fmedia-cdn.tripadvisor.com%2Fmedia%2Fphoto-s%2F07%2F96%2Faf%2F8a%2Ftup-island.jpg"
style="width: 124rpx;height:124rpx; border-top-right-radius:63rpx; border-bottom-left-radius: 63rpx;border-bottom-right-radius: 63rpx;border-top-left-radius: 63rpx;
border-width:8rpx; border-style:solid;border-color:#007AFF"
mode=""></image>

FullStack

FullStack - 【插件开发】【专治疑难杂症】【ios上架、马甲包、白包、过审、已成功上架过几百个】【多款插件已上架:https://ext.dcloud.net.cn/publisher?id=22130】【非诚勿扰】QQ:543610866

玄清真人

玄清真人

一瞎眼就过去了

该问题目前已经被锁定, 无法添加新回复

  • 标题 / 粗斜体
  • 代码片段
  • 超链接 / 图片 / 视频
  • 列表 / 引用

文章内容较多时,可以用标题分段 :

## 大标题 
### 小标题

斜体 / 粗体 :

**粗体** 
*斜体*
***粗斜体***

代码片段 :

``` javascript
代码片段
```

超链接 :

[链接文字](链接地址) 例: [百度](http://www.baidu.com)

图片 :

![图片说明](图片地址) 例: ![百度logo](http://www.baidu.com/img/bdlogo.gif)

视频 :

!![视频说明](视频地址) 例: !![优酷视频](http://youku.com)

有序列表 :

1. 123
2. 123
3. 123

无序列表 :

- 123
- 123
- 123

引用 : ( 双回车后结束引用 )

> 引用内容
引用内容
引用内容