outline属性是用来设置一个或多个单独的轮廓属性的简写属性 , 例如 。

轮廓有下面几个属性:

{
outline-style: solid;
outline-width: 10px;
outline-color: red;
}

他们有一种简写形式:

{
outline: 10px solid red;
}

轮廓的特点:

轮廓不占据空间,它们被描绘于内容之上。

可以做到下图的效果:

当然我们可以做更好玩的东西,比如一个“+”号:

具体css如下:

div {
margin: 100px;
width: 100px;
height: 100px;
outline: 15px solid #000;
outline-offset: -66px;
border: 2px solid #000;
background: yellow;
}

outline-offset: -66px; 是关键,它表示轮廓距div边的距离,如果为负值则会往里面收缩,最后形成一个加号。

需要注意的是:

  • 容器得是个正方形
  • outline 边框本身的宽度不能太小

简单了解css3轮廓outline的更多相关文章

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

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

  2. 简单了解css3样式表写法和优先级

    css3和css有什么区别?首先css3是css(层叠样式表)技术的升级版本,而css是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言. ...

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

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

  4. CSS3——盒子模型 border(边框) 轮廓(outline)属性 margin外边距 padding填充

    盒子模型 包括——边距,边框,填充,和实际内容 Margin(外边距) - 清除边框外的区域,外边距是透明的. Border(边框) - 围绕在内边距和内容外的边框. Padding(内边距) - 清 ...

  5. 一个简单的CSS3+js 实现3D BOX

    <!doctype html><html><head> <meta charset="UTF-8"> <title>Do ...

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

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

  7. 简单的CSS3 Loading动画

    最终效果如图一,gif图片稍微有点卡顿,事实上代码在浏览器里执行得很流畅.这里面用到的css3技术非常简单,分别是border-radius.伪元素.css3关键帧以及animation动画. 首先整 ...

  8. 简单使用CSS3实现炫酷读者墙效果

    读者墙,在很多网站上都有,没有遇到过的,可以参考度娘:读者墙http://www.baidu.com/s?wd=%B6%C1%D5%DF%C7%BD 使用基础的Html和CSS写出雏形 需要一提的是头 ...

  9. css3中outline切换动画效果

    今天刚看了篇文章<纯CSS实现的outline切换transition动画效果> 里面的效果研究了一下,下图为实现时的效果 代码如下: <!DOCTYPE html> < ...

随机推荐

  1. Android 自定义饼状图

    github 地址:https://github.com/dkest/PieView 简单分析 其实根据我们上面的知识已经能自己制作一个饼状图了.不过制作东西最重要的不是制作结果,而是制作思路. 相信 ...

  2. org.springframework.beans.factory.NoSuchBeanDefinitionException: No bean named 'ExtractAbstractServiceHandler' is defined

    在利用 Spring 集成 thrift 时,报错如下: javax.servlet.ServletException: Servlet.init() for servlet search-nlp-s ...

  3. HotStuff共识协议详解

    1. 前言 HotStuff提出了一个三阶段投票的BFT类共识协议,该协议实现了safety.liveness.responsiveness特性.通过在投票过程中引入门限签名实现了O(n)的消息验证复 ...

  4. iOS-使用Xcode自带单元测试UnitTest

    ![Uploading QQ20160129-3_262826.png . . .]####什么是单元测试?一听到单元测试这个词感觉很高端,其实单元测试就是为你的方法多专门写一个测试函数.以保证你的方 ...

  5. 数据库Oracle的子查询练习

    1.写一个查询显示与 Zlotkey 的 在同一部门的雇员的 last name和 hire date,结果中不包括 Zlotkey --1.写一个查询显示与 Zlotkey 的 在同一部门的雇员的 ...

  6. BZOJ11208 宠物收养所

    最近,阿Q开了一间宠物收养所.收养所提供两种服务:收养被主人遗弃的宠物和让新的主人领养这些宠物.每个领养者都希望领养到自己满意的宠物,阿Q根据领养者的要求通过他自己发明的一个特殊的公式,得出该领养者希 ...

  7. 牛客练习赛32 B题 Xor Path

    链接:https://ac.nowcoder.com/acm/contest/272/B来源:牛客网 题目描述 给定一棵n个点的树,每个点有权值.定义表示  到  的最短路径上,所有点的点权异或和. ...

  8. linux运维中经常使用的目录和文件讲解

    第9章 linux中目录结构 9.1 linux中的常见目录和解释说明 ID 目录 说明 1 bin 命令文件保存的地方 2 sbin 只有root用户才可以使用的命令 3 Boot(了解即可) Li ...

  9. zabbix自动发现与自动注册、自定义监控

    一.自动发现与自动注册在上面的介绍中,我们演示了手动添加一台主机的方法,虽然简单,但是当要添加的主机非常多时,也将变得非常繁琐,那么有没有一种方法,可以实现主机的批量添加呢,这样就会极大的提高运维效率 ...

  10. DWVA-关于SQL注入的漏洞详解

    low等级 代码如下: <?php if( isset( $_REQUEST[ 'Submit' ] ) ) { // Get input $id = $_REQUEST[ 'id' ]; // ...