简单了解css3轮廓outline
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的更多相关文章
- css盒子模型、边框border、外边距margin、填充padding、轮廓outline
盒子模型:盒子默认的宽度为容器的宽度,也可以自省设定宽度,高度根据内容适应,也可以自行设定高度.min-height设定最小高度 一个盒子包括外边距.边框.内边距和实际内容 Margin(外边距):清 ...
- 简单了解css3样式表写法和优先级
css3和css有什么区别?首先css3是css(层叠样式表)技术的升级版本,而css是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言. ...
- 【CSS3】透明度opacity与rgba()区别、光标cursor、display、轮廓outline与margin及border区别、em和rem区别
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- CSS3——盒子模型 border(边框) 轮廓(outline)属性 margin外边距 padding填充
盒子模型 包括——边距,边框,填充,和实际内容 Margin(外边距) - 清除边框外的区域,外边距是透明的. Border(边框) - 围绕在内边距和内容外的边框. Padding(内边距) - 清 ...
- 一个简单的CSS3+js 实现3D BOX
<!doctype html><html><head> <meta charset="UTF-8"> <title>Do ...
- 边框(Border) 和 轮廓(Outline) 属性
border 复合属性.设置对象边框的特性. 标签定义及使用说明 如果上述值缺少一个没有关系,例如border:#FF0000;是允许的. 默认值: not specified 继承: no Java ...
- 简单的CSS3 Loading动画
最终效果如图一,gif图片稍微有点卡顿,事实上代码在浏览器里执行得很流畅.这里面用到的css3技术非常简单,分别是border-radius.伪元素.css3关键帧以及animation动画. 首先整 ...
- 简单使用CSS3实现炫酷读者墙效果
读者墙,在很多网站上都有,没有遇到过的,可以参考度娘:读者墙http://www.baidu.com/s?wd=%B6%C1%D5%DF%C7%BD 使用基础的Html和CSS写出雏形 需要一提的是头 ...
- css3中outline切换动画效果
今天刚看了篇文章<纯CSS实现的outline切换transition动画效果> 里面的效果研究了一下,下图为实现时的效果 代码如下: <!DOCTYPE html> < ...
随机推荐
- Docker虚拟化之<基础命令>
1.在docker hub中搜索镜像 docker search nginx 2.从docker镜像服务器拉取指定镜像或者库镜像 docker pull docker.io/nginx 3.列出系统当 ...
- cmd for install pygame in python 3.7
Higher version Python better and convinient to use! Down load pygame whl file: C:\Work\software>p ...
- OC中ARC forbids explicit message send of release错误
在ios编程中,如果成员变量为对象,我们需要对成员变量内存管理,否则,会造成内存泄露.即我们要对成员变量进行手动的内存释放. 很显然,是ARC的问题. 错误原因:在创建工程的时候点选了“Use Aut ...
- springboot整合activiti
1.第一步添加bpmn文件得插件,不然没法查看和编辑bpmn文件,添加插件的方法各自百度即可,很简单 2.安装好bpmn插件后开始新建bpmn文件,也就是画流程图 一般是在代码中进行指定流程审批人的, ...
- mysql数据库命令
删除一个表: drop table if exists 表名; 在表中插入行: Insert into 表名 values(, , ,) 创建表: Create table 表名( Id int(10 ...
- 配置React Native的开发环境
本文转载自:http://mp.weixin.qq.com/s?__biz=MzIxNjEzNjUzOQ==&mid=402020148&idx=2&sn=ccad14a919 ...
- UILabel(label控件)的详细使用及特殊效果
转自:http://blog.sina.com.cn/s/blog_af73e7a70101ahlm.html UILabel *label = [[UILabelalloc] initWithFra ...
- go基础之服务退出问题
最近学习公司微服务的代码,看到每一个微服务的main函数都阻塞在那里,然后里面起的goroutine一直在哪里运行. package main import( "fmt" &quo ...
- Appium之选择/操作元素
Appium是如何选择.操作元素的呢? appium自动化 ------ 选择界面 元素 操作元素 ------- ① 点击 ② 输入字符 ③ 拖拽 ④ 获取页面元素的各种属性 根据appium ...
- cs5642 v3摄像头拍照效果
4个摄像头拍照效果 配置的是ov5642_960p_RAW 测试图片分别如下: