微信小程序界面设计CSS3在小程序中样式精通课程-第31课-外形修饰（outline-offset）_小程序中CSS3_前端样式教程

联系我们我要留言

小程序中CSS3: 微信小程序界面设计CSS3在小程序中样式精通课程-第31课-外形修饰（outline-offset）
时间：2019/1/13 14:31:33  作者：互联网  来源：网络转载  查看：23777  评论：0
内容摘要：外形修饰（outline-offset）通用语法outline-offset 属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。轮廓与边框有两点不同：轮廓不占用空间轮廓可能是非矩形实例规定边框边缘之外 15 像素处的轮廓：<!DOCTYPE html><htm...
外形修饰（outline-offset）

通用语法

outline-offset 属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。

轮廓与边框有两点不同：

轮廓不占用空间

轮廓可能是非矩形

实例

规定边框边缘之外 15 像素处的轮廓：

<!DOCTYPE html>

<html>

<head>

<style>

div

{

margin:20px;

width:150px;

padding:10px;

height:70px;

border:2px solid black;

outline:2px solid red;

outline-offset:15px;

}

</style>

</head>

<body>

<p><b>注释：</b>Internet Explorer 和 Opera 不支持 support outline-offset 属性。</p>

<div>这个 div 在边框边缘之外 15 像素处有一个轮廓。</div>

</body>

</html>

效果图

小程序应用

Wxml代码

<view class='c01'>

文本

</view>

Wxss代码

.c01{

     margin:20px;

     width:150px;

     padding:10px;

     height:70px;

     border:2px solid black;

     outline:2px solid red;

     outline-offset:15px;

}

效果图

欢迎大家收看我的视频课程：微信小程序界面设计-小程序中CSS3样式精通课程


标签：外形修饰（outline-offset 微信小程序界面设计入门课程 wxss中css3入门在线视频课程
上一篇：微信小程序界面设计CSS3在小程序中样式精通课程-第32课-框大小box-sizing
下一篇：微信小程序界面设计CSS3在小程序中样式精通课程-第30课-调整尺寸(Resizing)