css outline-offset属性怎么用


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

css outline-offset属性用于设置轮廓框架在 border 边缘外的偏移,即轮廓与边框边缘之间的距离。基本语法:outline-offset:length,length的单位可以是绝对单位(如px),也可以是相对单位(如:%)。

css outline-offset属性怎么用

outline-offset 属性对轮廓进行偏移,并在边框边缘进行绘制。

说明:轮廓在两方面与边框不同:轮廓不占用空间,轮廓可能是非矩形。

语法:

1

outline-offset: length|inherit;

属性值:

● length:轮廓与边框边缘的距离。

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

注释:所有主流浏览器都支持 outline-offset 属性,除了 Internet Explorer。

css outline-offset属性 示例

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<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

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

相关阅读 >>

css样式表文件的扩展名是什么

css flex-grow属性怎么用

css怎么实现响应式布局

css如何不显示元素

css如何实现元素不随滚动条滚动

css怎么设置input颜色

css怎么限制文本字数

css怎么取消颜色

css如何修改placeholder的颜色

使用html和css实现康奈尔笔记的模板

更多相关阅读请进入《css》频道 >>




打赏

取消

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

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

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

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

评论

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