CSS中Outlines轮廓的具体分析

黄舟

发布时间：2017-07-27 09:15:01

2107人浏览过

来源于php中文网

原创

描述:

绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用.不占据空间.

在IE下不可用.

属性	描述	备注
outline	复合属性设置或者检索对象外的线条轮廓,外轮廓(outline)画在边框(border)的外面,不一定是矩形	outline:outline-color\|\|outline-style\|\|outline-width
outline-color	设置或检索对象外的线条轮廓的颜色	color:颜色 invert:默认值,使用背景色的反色
outline-style	设置或检索对象外的线条轮廓的样式	none:默认值 dotted:点线外轮廓 dashed:虚线外轮廓 solid:实线外轮廓 double:双线外轮廓 groove:根据outline-color的值画3D凹槽外轮廓 ridge:根据outline-color的值画3D凸槽外轮廓 inset:根据outline-color的值画3D凹边外轮廓 outset:根据outline-color的值画3D凸边外轮廓
outline-width	设置或检索对象外的线条轮廓的宽度	medium:默认.默认宽度 thin:小于默认宽度 thick:大于默认宽度 length:长度

实例:

在Firefox下效果

学习导航

学习者优质的学习网址导航网站

下载

立即学习“前端免费学习笔记（深入）”；

css grid布局中区域命名有什么用_利用gridtemplateareas提高可读性

css 想让表单控件在一行排列怎么办_使用 css flex layout 设置水平排列

css 内联样式适合什么场景_通过快速覆盖局部样式实现

css样式加载在服务端渲染中的处理方式_实践经验

css 想让元素在拖动结束后回弹动画怎么办_使用 transform translate keyframes 设置回弹效果

相关标签:

css

本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：CSS中behavior属性的介绍及实例使用下一篇：css3中关于outline如何为div元素添加轮廓线的实例

作者最新文章

HTML5 Placeholder属性的详情介绍

2018-05-30 09:51

html中关于标签的全部属性的使用总结

2018-05-30 14:32

php如何快速实现数组去重的实例

2018-05-30 15:03

php中关于IMAP如何收取邮件的方法介绍

2018-05-31 09:38

PHPMailer如何利用QQ邮箱完成邮件发送功能的实例分析

2018-05-31 10:28

从零开始打造自己的PHP框架的视频资料

2018-05-31 10:45

php基础知识总结（新手入门必备）

2018-05-30 14:26

ReactJS中表单的单选多选与反选的实现方法

2018-05-30 09:45

JavaScript中typeof的使用方法介绍

2018-05-30 11:42

JavaScript中confirm()方法的使用介绍

2018-05-30 10:29

热门AI工具

DeepSeek

幻方量化公司旗下的开源大模型平台

AI 编程开发 AI 聊天问答

豆包大模型

字节跳动自主研发的一系列大型语言模型

AI 编程开发 AI大模型

通义千问

阿里巴巴推出的全能AI助手

AI 编程开发 Agent智能体

腾讯元宝

腾讯混元平台推出的AI助手

文档处理 AI 聊天问答

文心一言

文心一言是百度开发的AI聊天机器人，通过对话可以生成各种形式的内容。

AI 编程开发 AI 文本写作

讯飞写作

基于讯飞星火大模型的AI写作工具，可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

AI 文本写作中文写作

即梦AI

一站式AI创作平台，免费AI图片和视频生成。

图片拼接

ChatGPT

最最强大的AI聊天机器人程序，ChatGPT不单是聊天机器人，还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

AI 编程开发 AI 文本写作

智谱清言 - 免费全能的AI助手

AI 编程开发 Agent智能体

相关专题

java入门学习合集

本专题整合了java入门学习指南、初学者项目实战、入门到精通等等内容，阅读专题下面的文章了解更多详细学习方法。

2026.01.29

java配置环境变量教程合集

本专题整合了java配置环境变量设置、步骤、安装jdk、避免冲突等等相关内容，阅读专题下面的文章了解更多详细操作。

2026.01.29

java成品学习网站推荐大全

本专题整合了java成品网站、在线成品网站源码、源码入口等等相关内容，阅读专题下面的文章了解更多详细推荐内容。

2026.01.29

Java字符串处理使用教程合集

本专题整合了Java字符串截取、处理、使用、实战等等教程内容，阅读专题下面的文章了解详细操作教程。

2026.01.29

Java空对象相关教程合集

本专题整合了Java空对象相关教程，阅读专题下面的文章了解更多详细内容。

2026.01.29

clawdbot ai使用教程保姆级clawdbot部署安装手册

Clawdbot是一个“有灵魂”的AI助手，可以帮用户清空收件箱、发送电子邮件、管理日历、办理航班值机等等，并且可以接入用户常用的任何聊天APP，所有的操作均可通过WhatsApp、Telegram等平台完成，用户只需通过对话，就能操控设备自动执行各类任务。

2026.01.29

clawdbot龙虾机器人官网入口 clawdbot ai官方网站地址

clawdbot龙虾机器人官网入口:https://clawd.bot/,clawdbot ai是一个“有灵魂”的AI助手，可以帮用户清空收件箱、发送电子邮件、管理日历、办理航班值机等等，并且可以接入用户常用的任何聊天APP，所有的操作均可通过WhatsApp、Telegram等平台完成，用户只需通过对话，就能操控设备自动执行各类任务。

2026.01.29

Golang 网络安全与加密实战

本专题系统讲解 Golang 在网络安全与加密技术中的应用，包括对称加密与非对称加密（AES、RSA）、哈希与数字签名、JWT身份认证、SSL/TLS 安全通信、常见网络攻击防范（如SQL注入、XSS、CSRF）及其防护措施。通过实战案例，帮助学习者掌握如何使用 Go 语言保障网络通信的安全性，保护用户数据与隐私。

2026.01.29