微信小程序中 <view class="text" style="width=100px;height=70px"></view> 帮我用clip-path把这个view的右上角裁剪出一个半径为10px的圆形
时间: 2024-05-02 17:18:39 浏览: 35
可以使用以下代码实现:
```html
<view class="text" style="width: 100px; height: 70px; clip-path: circle(10px at 90% 0%);"></view>
```
其中,clip-path属性设置为circle(10px at 90% 0%),表示裁剪出一个半径为10px的圆形,圆心位于右上角的位置(90% 0%)。
相关问题
微信小程序中 <view class="text" style="width=100px;height=70px"></view> 帮我用clip-path把这个view的右上角裁剪掉一个半径为10px的圆形
可以在 style 中加入 clip-path 属性,并设置为圆形裁剪路径。具体代码如下:
```html
<view class="text" style="width: 100px; height: 70px; clip-path: circle(10px at 90% 0%)"></view>
```
其中,clip-path 属性中的 circle() 函数用于定义圆形裁剪路径,参数包括圆心半径和圆心位置。这里的圆心半径为 10px,圆心位置为右上角,即 90% 0%。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .max{ width: 800px; float: left; margin: 0 auto; } .mink1{ float: left; margin-top: 20px; width: 100px; height: 24px; border-right: 1px solid #888888; text-align: center; } .mink1:hover{ cursor: pointer; border-bottom: 2px red solid; } </style> </head> <body> <div class="max"> <div class="mink1"> 腾讯视频 </div> <div class="mink1"> 爱奇艺 </div> <div class="mink1"> QQ </div> <div class="mink1"> bibi </div> <div class="mink1"> 微信 </div> <div class="mink1"> 咪咕视频 </div> <div class="mink1"> 回收站 </div> </div> </body> </html>如何居于页面中间
可以通过以下方式将该 div 居中:
1. 设置该 div 的左右 margin 为 auto:
```css
.max {
width: 800px;
margin: 0 auto;
}
```
2. 使用 flex 布局,将该 div 的父元素设置为 flex 容器,并设置 justify-content 和 align-items 属性为 center:
```css
body {
display: flex;
justify-content: center;
align-items: center;
}
.max {
width: 800px;
}
```
3. 使用绝对定位,将该 div 的父元素设置为相对定位,然后将该 div 设置为绝对定位,并设置 left 和 top 属性为 50%,再通过 transform 属性将该 div 向左上方平移自身宽度和高度的一半:
```css
body {
position: relative;
}
.max {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 800px;
}
```
阅读全文
相关推荐













