Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DCloud
hello uni-app x
提交
e55e089f
H
hello uni-app x
项目概览
DCloud
/
hello uni-app x
通知
5992
Star
90
Fork
162
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
18
列表
看板
标记
里程碑
合并请求
1
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
H
hello uni-app x
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
18
Issue
18
列表
看板
标记
里程碑
合并请求
1
合并请求
1
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
提交
e55e089f
编写于
7月 20, 2023
作者:
taohebin@dcloud.io
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat: 增加css border示例
上级
775fc764
变更
4
显示空白变更内容
内联
并排
Showing
4 changed file
with
120 addition
and
2 deletion
+120
-2
pages.json
pages.json
+10
-2
pages/CSS/border/complex-border/complex-border.uvue
pages/CSS/border/complex-border/complex-border.uvue
+56
-0
pages/CSS/box-shadow/box-shadow.uvue
pages/CSS/box-shadow/box-shadow.uvue
+50
-0
pages/tabBar/CSS.uvue
pages/tabBar/CSS.uvue
+4
-0
未找到文件。
pages.json
浏览文件 @
e55e089f
...
...
@@ -658,6 +658,14 @@
"style"
:
{
"navigationBarTitleText"
:
"电量"
}
},
{
"path"
:
"pages/CSS/border/complex-border/complex-border"
,
"style"
:
{
"navigationBarTitleText"
:
"border属性组合示例"
,
"enablePullDownRefresh"
:
false
}
}
],
"globalStyle"
:
{
...
...
pages/CSS/border/complex-border/complex-border.uvue
0 → 100644
浏览文件 @
e55e089f
<template>
<view style="flex-grow: 1;">
<view>
<text>圆角 : 各边之间 不同width && 不同颜色 && 不同圆角</text>
<view
style="width: 500rpx;height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
<view class="border-circle"></view>
</view>
</view>
<view>
<text>直角 : 各边之间 不同width && 不同颜色 </text>
<view
style="width: 500rpx;height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
<view class="border-rect"></view>
</view>
</view>
</view>
</template>
<script>
</script>
<style>
.common {
width: 500rpx;
height: 500rpx;
background-color: gray;
}
.border-circle {
width: 250rpx;
height: 250rpx;
background-color: #00dd00;
border-width: 20rpx;
border-color: #000000;
border-bottom-width: 40rpx;
border-bottom-color: #ff0000;
border-bottom-right-radius: 50rpx;
border-bottom-left-radius: 30rpx;
border-radius: 10rpx;
border-right-color: #FFDC02;
}
.border-rect {
width: 250rpx;
height: 250rpx;
background-color: #00dd00;
border-width: 20rpx;
border-color: #000000;
border-bottom-width: 40rpx;
border-bottom-color: #ff0000;
border-right-color: #FFDC02;
}
</style>
\ No newline at end of file
pages/CSS/box-shadow/box-shadow.uvue
浏览文件 @
e55e089f
...
...
@@ -87,6 +87,56 @@
<view class="common" style="box-shadow: 0px 1px 3px rgba(0,0,0,0.4);"></view>
</view>
</view>
<view>
<text>circle: box-shadow: 5px 5px black</text>
<view
style="width: 500rpx;height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
<view class="common" style="border-radius: 125rpx;box-shadow: 5px 5px black"></view>
</view>
</view>
<view>
<text>circle: box-shadow: 5px 5px 5px black</text>
<view
style="width: 500rpx;height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
<view class="common" style="border-radius: 125rpx;box-shadow: 5px 5px 5px black;"></view>
</view>
</view>
<view>
<text>circle: box-shadow: 5px 10px 5px black</text>
<view
style="width: 500rpx;height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
<view class="common" style="border-radius: 125rpx;box-shadow: 5px 10px 5px black;"></view>
</view>
</view>
<view>
<text>circle: box-shadow: 5px 5px 5px 5px black</text>
<view
style="width: 500rpx;height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
<view class="common" style="border-radius: 125rpx;box-shadow: 5px 5px 5px 5px black;"></view>
</view>
</view>
<view>
<text>circle: box-shadow: -5px -5px 5px black</text>
<view
style="width: 500rpx;height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
<view class="common" style="border-radius: 125rpx;box-shadow: -5px -5px 5px black;"></view>
</view>
</view>
<view>
<text>circle: box-shadow: 0px 1px 3px rgba(0,0,0,0.4)</text>
<view
style="width: 500rpx;height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
<view class="common" style="border-radius: 125rpx;box-shadow: 0px 1px 3px rgba(0,0,0,0.4);"></view>
</view>
</view>
</view>
</template>
...
...
pages/tabBar/CSS.uvue
浏览文件 @
e55e089f
...
...
@@ -77,6 +77,10 @@
{
name: 'border-radius',
url: '/pages/CSS/border/border-radius'
},
{
name: 'border属性复合示例',
url: '/pages/CSS/border/complex-border/complex-border'
}
] as Page[]
}, {
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录