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

轮廓(outline)属性指定了样式,颜色和外边框的宽度。


轮廓(outline)实例

在元素周围画线
本例演示使用outline属性在元素周围画一条线。.

设置轮廓的样式
本例演示如何设置轮廓的样式。

设置轮廓的颜色
本例演示如何设置轮廓的颜色。

设置轮廓的宽度
本例演示如何设置轮廓的宽度。


CSS 轮廓(outline)

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

CSS outline 属性规定元素轮廓的样式、颜色和宽度。


所有CSS 轮廓(outline)属性

"CSS" 列中的数字表示哪个CSS版本定义了该属性(CSS1 或者CSS2)。

属性 说明 CSS
outline 在一个声明中设置所有的外边框属性 outline-color
outline-style
outline-width
inherit
2
outline-color 设置外边框的颜色 color-name
hex-number
rgb-number
invert
inherit
2
outline-style 设置外边框的样式 none
dotted
dashed
solid
double
groove
ridge
inset
outset
inherit
2
outline-width 设置外边框的宽度 thin
medium
thick
length
inherit
2

CSS Outlines的更多相关文章

  1. Matplotlib数据可视化(3):文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  2. CSS——关于z-index及层叠上下文(stacking context)

    以下内容根据CSS规范翻译. z-index 'z-index'Value: auto | <integer> | inheritInitial: autoApplies to: posi ...

  3. CSS的未来

    仅供参考 前言 完成<CSS核心技术与实战>这本书,已有一个多月了,而这篇文章原本是打算写在那本书里面的,但本章讲解的内容,毕竟属于CSS未来的范畴,而这一切都还不能够确定下来,所以这一章 ...

  4. 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧

    记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...

  5. 前端css兼容性与易混淆的点

    一.常用的骨灰级清除浮动 .clearfix:after { content: "."; display: block; height:; clear: both; visibil ...

  6. 理解CSS外边距margin

    前面的话   margin是盒模型几个属性中一个非常特殊的属性.简单举几个例子:只有margin不显示当前元素背景,只有margin可以设置为负值,margin和宽高支持auto,以及margin具有 ...

  7. 理解CSS视觉格式化

    前面的话   CSS视觉格式化这个词可能比较陌生,但说起盒模型可能就恍然大悟了.实际上,盒模型只是CSS视觉格式化的一部分.视觉格式化分为块级和行内两种处理方式.理解视觉格式化,可以确定得到的效果是应 ...

  8. 谈谈一些有趣的CSS题目(十二)-- 你该知道的字体 font-family

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  9. ASP.NET MVC with Entity Framework and CSS一书翻译系列文章之第二章:利用模型类创建视图、控制器和数据库

    在这一章中,我们将直接进入项目,并且为产品和分类添加一些基本的模型类.我们将在Entity Framework的代码优先模式下,利用这些模型类创建一个数据库.我们还将学习如何在代码中创建数据库上下文类 ...

随机推荐

  1. ORA-65096: invalid common user or role name

    CREATE USER xx IDENTIFIED BY yy DEFAULT TABLESPACE USERS TEMPORARY TABLESPACE TEMP PROFILE "DEF ...

  2. Page Object 模式编写UiAutomator脚本

    在我们学习Page Object Model之前,我们先了解一下Page Object Model(以下简称POM). 为什么要POM 用UiAutomator启动UI自动化测试不是一件困难的任务.你 ...

  3. JavaScript高级程序设计58.pdf

    15章 使用Canvas绘图 略 16章 HTML5脚本编程 HTML5规范了新的HTML标记和JavaScript API,以便简化创建动态Web界面的工作 跨文档消息传递 简称XDM,指来自不同域 ...

  4. 有两个数组a,b,大小都为n,;通过交换a,b中的元素,使sum(a)-sum(b)最小。

    有两个数组a,b,大小都为n,数组元素的值任意整形数,无序: 要求:通过交换a,b中的元素,使数组a元素的和与数组b元素的和之间的差最小. 当前数组a和数组b的和之差为    A = sum(a) - ...

  5. DS1302-演示代码

    参考DS1302数据手册,尽管数据手册是英文,但是很有帮助,再结合网上众多的代码写出了下面这个例子,除了涓流充电(trickle charger)功能没使用外,内部的RAM和寄存器功能都使用到了,包括 ...

  6. 大众点评的大数据实践-CSDN.NET

    大众点评的大数据实践-CSDN.NET 大众点评的大数据实践 爬虫工程师成大数据时代的"宠儿" - 杭州新闻中心 - 杭州网 爬虫工程师成大数据时代的"宠儿"

  7. Servlet实现数据库查询(MyEclipse10,Tomcat7.0,JDK1.7,)——Java Web练习(三)

    1.MyEclipse | New Web Project :TestServlet01,修改index.jsp的代码: <%@ page language="java" i ...

  8. mysql left( right ) join 使用on 与where的差异

    之前一直很困扰为什么left join要么一查没有数据,要么出现很多条重复数据. 百思不得其解,后来在网上到处找资料,总算明白了. 一定要理解下面几点:  (1)主表条件在on后面时附表只取满足主表筛 ...

  9. Yii2中request的使用方法

    1.普通的get和pst请求 $request = Yii::$app->request; $get = $request->get(); // 等同于: $get = $_GET; $i ...

  10. SVG(可扩展矢量图)系列教程

    本系列教程同步至博客www.waylau.com 从新往久排序,持续更新 SVG与JS交互实例之画板 SVG <marker>创建箭头 SVG实例之中国地图 SVG实例之电力开关 SVG ...