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

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

1.基础语法

CSS outline 属性规定元素轮廓的样式、颜色和宽度。可以设置的属性分别是（按顺序）：outline-color、outline-style、outline-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.小程序应用

根据基础的语法，下面在微信小程序中实现text和view的轮廓样式。

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

.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(微信同号)（备注：毕设）