微信小程序 css圆角,微信小程序界面设计小程序中CSS3样式精通课程-边框-border-radius 圆角边框...
border-radius 圆角边框
通用语法
浏览器支持
微信小程序交流群：111733917 | 微信小程序从0基础到就业的课程：https://edu.csdn.net/topic/huangjuhua
定义和用法
border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性。
提示：该属性允许您为元素添加圆角边框！
默认值： 0
继承性： no
版本： CSS3
JavaScript 语法： object.style.borderRadius=“5px”
语法
border-radius: 1-4 length|% / 1-4 length|%;
注释：按此顺序设置每个 radii 的四个值。如果省略 bottom-left，则与 top-right 相同。如果省略 bottom-right，则与 top-left 相同。如果省略 top-right，则与 top-left 相同。
Length ：定义圆角的形状。
% ：以百分比定义圆角的形状。
例子 1
border-radius:2em;
等价于：
border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;
例子 2
border-radius: 2em 1em 4em / 0.5em 3em;
等价于：
border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;
小程序应用
Wxml代码
圆角边框
左上圆角
右上圆角
左下圆角
右下圆角
Wxss代码
.c01{
margin: 10px;
padding: 10px;
background-color: gainsboro;
border-radius: 10px;
}
.c02{
margin: 10px;
padding: 10px;
background-color: gainsboro;
border-top-left-radius: 10px
}
.c03{
margin: 10px;
padding: 10px;
background-color: gainsboro;
border-top-right-radius: 10px;
}
.c04{
margin: 10px;
padding: 10px;
background-color: gainsboro;
border-bottom-left-radius: 10px;
}
.c05{
margin: 10px;
padding: 10px;
background-color: gainsboro;
border-bottom-right-radius: 10px;
}
效果图
微信小程序 css圆角,微信小程序界面设计小程序中CSS3样式精通课程-边框-border-radius 圆角边框...相关推荐
- 微信小程序界面设计小程序中CSS3样式精通课程-边框-box-shadow 盒阴影
边框-box-shadow 盒阴影 微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程:https://edu.csdn.net/topic/huangjuhua 通用语法 浏览 ...
- 微信小程序界面设计小程序中CSS3样式精通课程-渐变Gradients-线性渐变Linear Gradients
线性渐变Linear Gradients 微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程:https://edu.csdn.net/topic/huangjuhua 通用语法 ...
- 微信小程序界面设计小程序中CSS3样式精通课程-渐变Gradients-使用透明度（transparent）
渐变Gradients-使用透明度(transparent) 微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程:https://edu.csdn.net/topic/huang ...
- 微信小程序界面设计小程序中的WXSS(css)选择器课程-伪类-:focus 伪类
小程序中的WXSS(css)选择器课程-伪类-:focus 伪类 微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程:https://edu.csdn.net/topic/hua ...
- 微信小程序界面设计小程序中的WXSS(css)选择器课程-伪类-:checked 伪类(不支持)
小程序中的WXSS(css)选择器课程-伪类-:checked 伪类(不支持) 微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程:https://edu.csdn.net/to ...
- 微信小程序界面设计小程序中的WXSS(css)选择器课程-::before伪元素
小程序中的WXSS(css)选择器课程-::before伪元素 微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程:https://edu.csdn.net/topic/huan ...
- 微信小程序界面设计小程序中的WXSS(css)选择器课程-伪类-:nth-child() 伪类
小程序中的WXSS(css)选择器课程-伪类-:nth-child() 伪类 微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程:https://edu.csdn.net/top ...
- 微信小程序界面设计小程序中的WXSS(css)选择器课程-伪类-:nth-last-child伪类
小程序中的WXSS(css)选择器课程-伪类-:nth-last-child伪类 微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程:https://edu.csdn.net/t ...
- 微信小程序界面设计小程序中的WXSS(css)选择器课程-子元素选择器
小程序中的WXSS(css)选择器课程-子元素选择器 微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程:https://edu.csdn.net/topic/huangjuhu ...
最新文章
- 戴尔 成铭3980台式计算机,能文能武！戴尔成铭3980商用台式机评测
- sdut 1028 Catch That Cow( BFS)
- 【深度强化学习】DQN训练超级玛丽闯关
- QTcpSever和QTcpSocket实现多线程客户端和服务端；
- Reading papers_6(Pattern Recognition And Machine Learning一书,ing...)
- pip安装python依赖成功，pycharm中import出错
- 解读Depth Map Prediction from a Single Image using a Multi-Scale Deep Network （3）
- 【STM32H7的DSP教程】第48章 STM32H7的中值滤波器实现，适合噪声和脉冲过滤（支持逐个数据的实时滤波）
- HTTP并发测试工具
- Bicubic介绍及Python实现
- 【XA.DAY.4】网络安全体系与模型
- 放开自己你才能走的更远
- Eclipse显示单词拼写错误The word ‘url‘ is not correctly spelled
- 你总要一个人 走过一段艰难的日子
- 在excel中，将指定文字（如：设计）批量加粗显示并变成红色字体？
- 物理层设备（中继器和集线器）
- Python量化交易06——Fama-French三因子模型(Rmt,SMB,HML)
- 狂神redis学习笔记
- 【人物志1】鲁道夫·埃米尔·卡尔曼（Rudolf E. Kalman）
- 国内第一本全面讲解微软ERP主流产品Dynamics AX 2009的中文技术图书