CSS 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

三、轮廓(outline)实例

(1)示例1:在元素周围画一条线

p
{
border:1px solid red;
outline:green dotted thick;
}

效果:

(2)示例2:设置轮廓的样式

p {border:1px solid red;}
p.dotted {outline-style:dotted;} /*点线轮廓*/
p.dashed {outline-style:dashed;} /*虚线轮廓*/
p.solid {outline-style:solid;} /*实线轮廓*/
p.double {outline-style:double;} /*双线轮廓*/
p.groove {outline-style:groove;} /*凹槽轮廓*/
p.ridge {outline-style:ridge;} /*垄状轮廓*/
p.inset {outline-style:inset;} /*嵌入轮廓*/
p.outset {outline-style:outset;} /*外凸轮廓*/

效果:

(3)示例3:设置轮廓的颜色

p
{
border:1px solid red;
outline-style:dotted;
outline-color:#00ff00;
}

效果:

(4)示例4:设置轮廓的宽度

p.one
{
border:1px solid red;
outline-style:solid;
outline-width:thin;
}
p.two
{
border:1px solid red;
outline-style:dotted;
outline-width:3px;
}

效果:

CSS Outline(轮廓)的更多相关文章

  1. css -- outline轮廓

    outline:#00ff00 solid thick; 边框参数: 样式: none:默认,无轮廓 dotted:点状轮廓 dashed:虚线轮廓 solid:实现轮廓 double:双线轮廓,宽度 ...

  2. CSS3 border-radius 属性和CSS outline 属性

    CSS3 border-radius 属性 border-radius 属性是一个简写属性,用于设置四个 border-*-radius 属性. 提示:该属性允许为元素添加圆角边框! 注释:按此顺序设 ...

  3. (转)【Unity3d】Glow + Outline 轮廓描边

    转:http://www.cnblogs.com/dosomething/archive/2012/08/04/2622488.html [Unity3d]Glow + Outline 轮廓描边 轮廓 ...

  4. css:outline

    <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...

  5. 如何去除表单元素获得焦点时的外边框:outline (轮廓)

    我们在做制作表单页面时,经常会需要消除表单元素带来的边框,这时候我们需要用到两个属性: 1.表单元素未激活状态下的边框,不实现边框: border:none; 2.表单元素获得焦点时的轮廓,隐藏轮廓: ...

  6. css outline实践研究

    outline具有和border很相似的属性,但多少又有些区别,就是因为这些区别才让它闪闪发光,先目睹一下. <style> div{ width:100px; height:100px; ...

  7. css outline属性

    outline属性在一个html element的周围画出一条线来,位于边框的外围,起到突出元素的作用.轮廓线不占据任何布局空间,也不一定非要是矩形. p { outline:#00FF00 dott ...

  8. CSS:CSS 轮廓(outline)

    ylbtech-CSS:CSS 轮廓(outline) 1.返回顶部 1. CSS 轮廓(outline) 轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用. ...

  9. HTML 学习笔记 CSS(轮廓)

    轮廓(outline)是绘制于元素周围的一条线 位于边框边缘的外围 可起到突出元素的作用 CSS outline属性规定元素轮廓的样式 颜色和宽度 话不多说 来几个例子 看一看 1:在元素周围画线 & ...

随机推荐

  1. 在input文本框中存入对象格式的数据

    <input id="teaching" type="hidden" name="teachingProgram" /> JQ: ...

  2. PL/SQL Developer使用技巧、快捷键(转载)

    1.类SQL PLUS窗口:File->New->Command Window,这个类似于oracle的客户端工具sql plus,但比它好用多了. 2.设置关键字自动大写:Tools-& ...

  3. 区分兼容IE6/IE7/IE8/IE9/FF的CSS HACK写法

    HACK原理:不同浏览器对各中字符的识别不同 在 CSS中常用特殊字符识别表: (1)*:  IE6+IE7都能识别*,而标准浏览器FF+IE8是不能识别*的; (2)!important: 除IE6 ...

  4. 160310、oracle数据库的读写分离

    PS:使用AbstractRoutingDataSource路由数据源实现动态数据库的调用   1. 连接哪个数据源的环境变量 package com.hysoft.common;   public  ...

  5. SharePoint PerformancePoint开发实例

    前言 由于工作的原因,有一段时间没有发新的随笔了,最近使用了SharePoint PerformancePoint做了一些报表,与大家分享经验. 本文完全原创,转载请说明出处,希望对大家有用. 阅读目 ...

  6. vscode编辑器配置C语言编译运行环境

    1.安装C/C++插件 2.安装编译环境,这里选择MinGW(http://mingw.org/ ) 选择一个安装目录,如:E:\workspace\MinGW mingw32-gcc开头的(包括了m ...

  7. Restful and 前后端分离---AutoTest newman--postman

    http://www.cnblogs.com/zuoshaowei/p/6192863.html https://www.getpostman.com/docs/newman_intro swagge ...

  8. nodejs(三)上之express

    express 简介 Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用,和丰富的 HTTP 工具. 使用 Express 可以快速 ...

  9. python基础-第四篇-4.2文件操作

    基本打开模式 文件操作的流程:打开文件,操作文件,关闭文件 打开文件方法:open(文件名,模式,编码) file = open(‘文件名’) 模式在不给值的情况下,默认为只读,而且如果是非当前的目录 ...

  10. java获取src下文件

    方式一: InputStream in = Test.class .getResourceAsStream("/env.properties"); URL url = Test.c ...