位置:电子教程 > 微信小程序设计教程 (如果看不到内容请使用360浏览器) 推荐学习资源
小程序样式基础
框模型
定位
选择器
当前阅读教程:微信小程序设计教程 > 轮廓(outline)
阅读(22555525)      收藏       赞(5685)      分享
上一篇: 字体加粗(font-weight) 下一篇: 框模型

轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。

1.基础语法

CSS outline 属性规定元素轮廓的样式、颜色和宽度。可以设置的属性分别是(按顺序):outline-coloroutline-styleoutline-width。如果不设置其中的某个值,也不会出问题,比如 outline:solid #ff0000; 也是允许的。

CSS 轮廓属性如下:

属性

描述

outline

在一个声明中设置所有的轮廓属性

outline-color

设置轮廓的颜色

outline-style

设置轮廓的样式

outline-width

设置轮廓的宽度

outline-color 属性如下:

属性

描述

color_name

规定颜色值为颜色名称的轮廓颜色(比如 red)。

hex_number

规定颜色值为十六进制值的轮廓颜色(比如 #ff0000)。

rgb_number

规定颜色值为 rgb 代码的轮廓颜色(比如   rgb(255,0,0))。

invert

默认。执行颜色反转(逆向的颜色)。可使轮廓在不同的背景颜色中都是可见。

inherit

规定应该从父元素继承轮廓颜色的设置。

outline-style 属性如下:

属性

描述

none

默认。定义无轮廓。

dotted

定义点状的轮廓。

dashed

定义虚线轮廓。

solid

定义实线轮廓。

double

定义双线轮廓。双线的宽度等同于 outline-width 的值。

groove

定义 3D 凹槽轮廓。此效果取决于   outline-color 值。

ridge

定义 3D 凸槽轮廓。此效果取决于   outline-color 值。

inset

定义 3D 凹边轮廓。此效果取决于   outline-color 值。

outset

定义 3D 凸边轮廓。此效果取决于   outline-color 值。

inherit

规定应该从父元素继承轮廓样式的设置。

outline-width 属性如下:

属性

描述

thin

规定细轮廓。

medium

默认。规定中等的轮廓。

thick

规定粗的轮廓。

length

允许你规定轮廓粗细的值。

inherit

规定应该从父元素继承轮廓宽度的设置。

2.小程序应用

根据基础的语法,下面在微信小程序中实现textview的轮廓样式。

说明:这里文字外围的点线就是我们所实现的轮廓样式。

.wxml文件代码示例

小白教程网www.2d5.net

如下:

<view>
  这里是文本内容
</view>
<view>
  <text  class='cls1'>这里是文本内容</text>
</view>

.wxss文件代码示例

小白教程网www.2d5.net

如下:

.cls1{
  margin: 30px;
  border: 3px solid  gainsboro;
  outline: thick dotted orangered;
}

效果如图3-21所示

image.png


上一篇: 字体加粗(font-weight) 下一篇: 框模型
毕业设计网             广告联系QQ:45157718(微信同号)