提交 e55e089f 编写于 作者: taohebin@dcloud.io's avatar taohebin@dcloud.io

feat: 增加css border示例

上级 775fc764
...@@ -658,6 +658,14 @@ ...@@ -658,6 +658,14 @@
"style": { "style": {
"navigationBarTitleText": "电量" "navigationBarTitleText": "电量"
} }
},
{
"path" : "pages/CSS/border/complex-border/complex-border",
"style" :
{
"navigationBarTitleText": "border属性组合示例",
"enablePullDownRefresh": false
}
} }
], ],
"globalStyle": { "globalStyle": {
......
<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
...@@ -87,6 +87,56 @@ ...@@ -87,6 +87,56 @@
<view class="common" style="box-shadow: 0px 1px 3px rgba(0,0,0,0.4);"></view> <view class="common" style="box-shadow: 0px 1px 3px rgba(0,0,0,0.4);"></view>
</view> </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> </view>
</template> </template>
......
...@@ -77,6 +77,10 @@ ...@@ -77,6 +77,10 @@
{ {
name: 'border-radius', name: 'border-radius',
url: '/pages/CSS/border/border-radius' url: '/pages/CSS/border/border-radius'
},
{
name: 'border属性复合示例',
url: '/pages/CSS/border/complex-border/complex-border'
} }
] as Page[] ] as Page[]
}, { }, {
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册