outline-offset属性怎么用

PHP中文网 JavaScript

本文摘自PHP中文网，作者青灯夜游，侵删。

CSS3的outline-offset属性用于对轮廓进行偏移，并在边框边缘进行绘制；可以通过length值设置轮廓与边框边缘的距离。

CSS3 outline-offset属性

作用：对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。

说明：轮廓与边框有两点不同：轮廓不占用空间，轮廓可能是非矩形的。

语法：

1

outline-offset: length|inherit;

length：轮廓与边框边缘的距离。

inherit：规定应从父元素继承 outline-offset 属性的值。

CSS3 outline-offset属性的使用示例

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

<!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>

效果图：

1.jpg

以上就是本篇文章的全部内容，希望能对大家的学习有所帮助。更多精彩内容大家可以关注php中文网相关教程栏目！！！

以上就是outline-offset属性怎么用的详细内容，更多文章请关注木庄网络博客！

相关阅读 >>

浅谈css3 grid网格布局（display: grid）的用法

css3中结构性伪类选择器―:first-of-type实现名言标签（代码实例 ）

resize属性怎么用

不支持css3的浏览器有哪些

css3做出多样边框特效

css3哪个是设置动画播放次数

perspective-origin属性怎么用

css3 :first-child选择器怎么用

text-overflow属性怎么用

盒模型与bfc的深入讲解

更多相关阅读请进入《outline-offset属性》频道 >>




标签：

打赏

取消

感谢您的支持，我会继续努力的!

扫码支持
扫码打赏，您说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦

分享从这里开始，精彩与您同在

相关推荐

评论

管理员已关闭评论功能...