CSS Outline(轮廓)
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(轮廓)的更多相关文章
- css -- outline轮廓
outline:#00ff00 solid thick; 边框参数: 样式: none:默认,无轮廓 dotted:点状轮廓 dashed:虚线轮廓 solid:实现轮廓 double:双线轮廓,宽度 ...
- CSS3 border-radius 属性和CSS outline 属性
CSS3 border-radius 属性 border-radius 属性是一个简写属性,用于设置四个 border-*-radius 属性. 提示:该属性允许为元素添加圆角边框! 注释:按此顺序设 ...
- (转)【Unity3d】Glow + Outline 轮廓描边
转:http://www.cnblogs.com/dosomething/archive/2012/08/04/2622488.html [Unity3d]Glow + Outline 轮廓描边 轮廓 ...
- css:outline
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...
- 如何去除表单元素获得焦点时的外边框:outline (轮廓)
我们在做制作表单页面时,经常会需要消除表单元素带来的边框,这时候我们需要用到两个属性: 1.表单元素未激活状态下的边框,不实现边框: border:none; 2.表单元素获得焦点时的轮廓,隐藏轮廓: ...
- css outline实践研究
outline具有和border很相似的属性,但多少又有些区别,就是因为这些区别才让它闪闪发光,先目睹一下. <style> div{ width:100px; height:100px; ...
- css outline属性
outline属性在一个html element的周围画出一条线来,位于边框的外围,起到突出元素的作用.轮廓线不占据任何布局空间,也不一定非要是矩形. p { outline:#00FF00 dott ...
- CSS:CSS 轮廓(outline)
ylbtech-CSS:CSS 轮廓(outline) 1.返回顶部 1. CSS 轮廓(outline) 轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用. ...
- HTML 学习笔记 CSS(轮廓)
轮廓(outline)是绘制于元素周围的一条线 位于边框边缘的外围 可起到突出元素的作用 CSS outline属性规定元素轮廓的样式 颜色和宽度 话不多说 来几个例子 看一看 1:在元素周围画线 & ...
随机推荐
- iOS json解析中包含“\n”等解析出错
文题算是解决了,把特殊字符替换一下:-(NSString *)JSONString:(NSString *)aString { NSMutableString *s = [NSMutableSt ...
- 20165330 学习基础和C语言基础调查
学习基础和C语言基础调查 读做中学有感 读了老师的推送,通过邹欣老师的博客中对老师和学生的关系比作教练和学员的阐述,这里重点为我们阐述了「做中学(Learning By Doing)」的重要性. 套路 ...
- Every write operation executed on a document, deletes included
Delete API | Elasticsearch Reference [6.5] | Elastic https://www.elastic.co/guide/en/elasticsearch/r ...
- TCP粘包/拆包 ByteBuf和channel 如果没有Netty? 传统的多线程服务器,这个也是Apache处理请求的模式
通俗地讲,Netty 能做什么? - 知乎 https://www.zhihu.com/question/24322387 谢邀.netty是一套在java NIO的基础上封装的便于用户开发网络应用程 ...
- nodejs(一)
nodejs第一章节 使用node来实现第一个http服务器 var http = require(‘http’); http.createServer(function (request, resp ...
- Google发布机器学习术语表 (包括简体中文)
Google 工程教育团队已经发布了多语种的 Google 机器学习术语表,该术语表中列出了一般的机器学习术语和 TensorFlow 专用术语的定义.语言版本包括西班牙语,法语,韩语和简体中文. 查 ...
- windows中根据进程PID查找进程对象过程深入分析
这里windows和Linxu系列的PID 管理方式有所不同,windows中进程的PID和句柄没有本质区别,根据句柄索引对象和根据PID或者TID查找进程或者线程的步骤也是一样的. 句柄是针对进 ...
- django-网页视屏播放
基本都基于第三方: -cc视频 -播放免费视频 -收费视频 -需要做认证,cc视频会给你发消息,你返回,携带数据 -在前端页面中添加响应的视屏框的代码 -功能实现,有相关接口文档,配置即可
- yarn的使用
yarn 的安装 npm install -g yarn yarn -version 查看yarn是否安装成功 一.首先需要了解的命令 npm install === yarn —— install ...
- 汇智课堂 Node.js相关课程
Node.js入门 Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台, 用来方便地搭建快速的 易于扩展的网络应用· Node.js 借助事件驱动, 非阻塞I/O 模型 ...