当前阅读教程:微信小程序设计教程 > 轮廓(outline) | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||
阅读(22555525) 收藏 赞(5685) 分享 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||
上一篇: 字体加粗(font-weight) | 下一篇: 框模型 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||
轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。 1.基础语法CSS outline 属性规定元素轮廓的样式、颜色和宽度。可以设置的属性分别是(按顺序):outline-color、outline-style、outline-width。如果不设置其中的某个值,也不会出问题,比如 outline:solid #ff0000; 也是允许的。 CSS 轮廓属性如下:
outline-color 属性如下:
outline-style 属性如下:
outline-width 属性如下:
2.小程序应用根据基础的语法,下面在微信小程序中实现text和view的轮廓样式。 说明:这里文字外围的点线就是我们所实现的轮廓样式。 .wxml文件代码示例 如下: <view> 这里是文本内容 </view> <view> <text class='cls1'>这里是文本内容</text> </view> .wxss文件代码示例 如下: .cls1{ margin: 30px; border: 3px solid gainsboro; outline: thick dotted orangered; } 效果如图3-21所示。 |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||
上一篇: 字体加粗(font-weight) | 下一篇: 框模型 |