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. iOS json解析中包含“\n”等解析出错

    文题算是解决了,把特殊字符替换一下:-(NSString *)JSONString:(NSString *)aString {    NSMutableString *s = [NSMutableSt ...

  2. 20165330 学习基础和C语言基础调查

    学习基础和C语言基础调查 读做中学有感 读了老师的推送,通过邹欣老师的博客中对老师和学生的关系比作教练和学员的阐述,这里重点为我们阐述了「做中学(Learning By Doing)」的重要性. 套路 ...

  3. Every write operation executed on a document, deletes included

    Delete API | Elasticsearch Reference [6.5] | Elastic https://www.elastic.co/guide/en/elasticsearch/r ...

  4. TCP粘包/拆包 ByteBuf和channel 如果没有Netty? 传统的多线程服务器,这个也是Apache处理请求的模式

    通俗地讲,Netty 能做什么? - 知乎 https://www.zhihu.com/question/24322387 谢邀.netty是一套在java NIO的基础上封装的便于用户开发网络应用程 ...

  5. nodejs(一)

    nodejs第一章节 使用node来实现第一个http服务器 var http = require(‘http’); http.createServer(function (request, resp ...

  6. Google发布机器学习术语表 (包括简体中文)

    Google 工程教育团队已经发布了多语种的 Google 机器学习术语表,该术语表中列出了一般的机器学习术语和 TensorFlow 专用术语的定义.语言版本包括西班牙语,法语,韩语和简体中文. 查 ...

  7. windows中根据进程PID查找进程对象过程深入分析

    这里windows和Linxu系列的PID 管理方式有所不同,windows中进程的PID和句柄没有本质区别,根据句柄索引对象和根据PID或者TID查找进程或者线程的步骤也是一样的.   句柄是针对进 ...

  8. django-网页视屏播放

    基本都基于第三方: -cc视频 -播放免费视频 -收费视频 -需要做认证,cc视频会给你发消息,你返回,携带数据 -在前端页面中添加响应的视屏框的代码 -功能实现,有相关接口文档,配置即可

  9. yarn的使用

    yarn 的安装 npm install -g yarn yarn -version  查看yarn是否安装成功 一.首先需要了解的命令 npm install === yarn —— install ...

  10. 汇智课堂 Node.js相关课程

    Node.js入门 Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台, 用来方便地搭建快速的 易于扩展的网络应用· Node.js 借助事件驱动, 非阻塞I/O 模型 ...