ylbtech-CSS:CSS 轮廓(outline)
1.返回顶部
1、

CSS 轮廓(outline)


轮廓(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
2、
2.返回顶部
 
3.返回顶部
 
4.返回顶部
 
5.返回顶部
1、
2、
 
6.返回顶部
 
作者:ylbtech
出处:http://ylbtech.cnblogs.com/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

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

  1. css盒子模型、边框border、外边距margin、填充padding、轮廓outline

    盒子模型:盒子默认的宽度为容器的宽度,也可以自省设定宽度,高度根据内容适应,也可以自行设定高度.min-height设定最小高度 一个盒子包括外边距.边框.内边距和实际内容 Margin(外边距):清 ...

  2. Bulma CSS - CSS类

    Bulma CSS框架教程 Bulma CSS – 简介 Bulma CSS – 开始 Bulma CSS – CSS类 Bulma CSS – 模块化 Bulma CSS – 响应式 Bulma是一 ...

  3. CSS 不规则的轮廓-outline

    大家好,我是半夏,一个刚刚开始写文的沙雕程序员.如果喜欢我的文章,可以关注 点赞 加我微信:frontendpicker,一起学习交流前端,成为更优秀的工程师-关注公众号:搞前端的半夏,了解更多前端知 ...

  4. CSS轮廓outline

    http://www.cnblogs.com/xiaohuochai/p/5277416.html

  5. 边框(Border) 和 轮廓(Outline) 属性

    border 复合属性.设置对象边框的特性. 标签定义及使用说明 如果上述值缺少一个没有关系,例如border:#FF0000;是允许的. 默认值: not specified 继承: no Java ...

  6. 简单了解css3轮廓outline

    outline属性是用来设置一个或多个单独的轮廓属性的简写属性 , 例如 . 轮廓有下面几个属性: { outline-style: solid; outline-width: 10px; outli ...

  7. reset.css css重置公共样式

    @charset "utf-8";/*Css Document*/ /*! * @名称:reset.css * @功能:1.重设浏览器默认样式 * 2.设置通用原子类 *//* 防 ...

  8. 【CSS3】透明度opacity与rgba()区别、光标cursor、display、轮廓outline与margin及border区别、em和rem区别

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  9. 前端之CSS——CSS选择器

    一.CSS介绍 为什么需要CSS(CSS的作用)? 在没有CSS之前,我们想要修改HTML元素的样式需要为每个HTML元素单独定义样式属性,当HTML内容非常多时,就会定义很多重复的样式属性,并且修改 ...

  10. 前端CSS css引入方式 css选择器 css选择器优先级

    一.       CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表 ...

随机推荐

  1. NetHogs——Linux下按进程实时统计网络带宽利用率

    Debian/Ubuntu下安装很简单,执行:apt-get install nethogs 就可以安装. CentOS/RHEL下建议先安装上EPEL,再执行:yum install libpcap ...

  2. 如何在android studio中cordova的混合开发

    基于Android Studio 中Cordova的开发 cordova简介 Cordova的前身是PhoneGap 官网: (http://cordova.io) Cordova应是运行在客户端本地 ...

  3. MyEclipse增强代码补全

    MyElipse的默认代码提示功能隐藏了许多细节,需要开发者手动设置,一起来设置吧,让你的myeclpse更强大. 方法 1 打开MyEclipse 6.0.1,然后“window”→“Prefere ...

  4. elemeng-ui中el-select的默认选择项问题

    直接绑定将option中的value值绑定给v-model <template> <div> <el-select v-model="query"&g ...

  5. vue-cli3.0打包完自动压缩zip

    打包是我们常见的操作 一般打包完还需要压缩丢到服务器解压 首先 我们需要一个 filemanager-webpack-plugin npm i filemanager-webpack-plugin - ...

  6. git 关于commit命令的修改

    1 修改最后一次提交的信息 git commit --amend 2 对于历史提交 git rebase -i HEAD~5 没毛病,

  7. Python-02 生成器表达式,列表推导式

    列表推导式和生成器表达式 列表推导式,生成器表达式1,列表推导式比较直观,占内存2,生成器表达式不容易看出内容,省内存. [ 变量(加工后的数据) for  变量i  in 可迭代的数据类型 ] 列表 ...

  8. 看过这些我明白了依赖注入及IoC

    背景 最近一段时间在学习laravel框架,了解到这个框架一个比较核心的概念就是服务容器,而服务容器似乎又和依赖注入有关系.但是碍于官方关于这方面的讲解篇幅过少,所以自学了一下. 自学的途径也跟大家一 ...

  9. Android消息处理:EventBus、BroadCast和Handler-优缺点比较

    上一篇研究了EventBus的使用方法,但随之而来的一系列问题也是值得思考,EventBus到底给项目带来了什么?它与Android原有的消息处理机制有什么区别和优缺点?项目在什么场景下采用Event ...

  10. opensns功能详解

    <!DOCTYPE html> opensns功能详解 wmd-preview h1 { color: #0077bb; /* 将标题改为蓝色 */ } opensns功能详解 软件工程 ...