CSS 不规则的轮廓-outline
大家好,我是半夏,一个刚刚开始写文的沙雕程序员.如果喜欢我的文章,可以关注 点赞 加我微信:frontendpicker,一起学习交流前端,成为更优秀的工程师~关注公众号:搞前端的半夏,了解更多前端知识! 点我探索新世界!
原文链接 ==>http://sylblog.xin/archives/39
前言
日常开发中,我们经常使用border来给元素增加一些美感,但是由于盒子模型的存在,border有时候会影响我们的判断,所以今天我们来介绍另一个属性来为元素增加一些美感。
outline
outlineCSS 中的属性在元素的外部绘制一条线。它类似于边界,除了:
- 它总是围绕所有边,你不能指定特定的边
- 它不是盒模型的一部分,因此不会影响元素或相邻元素的位置,也就是说outline outline不占据空间
- 它并不总是矩形
兼容性
除了IE浏览器,其他浏览器兼容性还是不错的。
语法
outline: [ <outline-width> || <outline-style> || <outline-color> ] | inherit
由此可见outline也是一个缩写的属性。
outline: 1px dashed red;
不占空间
首先定义一个p标签和一个div标签,然后div标签定义一个5px的border和一个20px的outline
p {
outline: 1px dashed red;
}
div {
border:5px solid #000;
outline: 20px dashed red;
}
<p>outline: 1px dashed red;</p>
<div>outline: 20px dashed red;</div>
最终的效果,可以清楚的看到div上定义的outlin已经跑到了p标签上。
不一是矩形
使用span进行测试,使用br进行换行,使得每一行的字数都不一样。
<span>我是outline<br />
我可以创建非矩形<br />
的边框</span>
span {
outline: 1px dashed red;
}
最终效果,可以看见outline只在字上面有。
换成border我们再试试
border:1px solid #000;
乍一看,好像border创建的也是不规则的呀,但是再仔细看,边框其实并不是不规则的,只是换行了而已。
outline-style 轮廓样式
属性值
dotted
dashed
solid
double
groove
ridge
inset
outset
outline-color 轮廓颜色
颜色值
outline-color: invert;
invert (IE兼容)
经测试:最新版的chrome和火狐浏览器不支持此值
仅在IE中测试使用
对比
页面的背景颜色是白色,outline就是黑色。
outline-color: invert;
页面的背景颜色是黑色,outline就是白色。
outline-width 轮廓宽度
属性值
thin
1px
medium
3px
thick
5px
<length>
outline-width: 10px;
outline-offset 轮廓偏移
数值
当参数值为正数时,表示轮廓向外偏移
outline-offset: 10px;
当参数值为负值时,表示轮廓向内偏移
outline-offset: -10px;
CSS 不规则的轮廓-outline的更多相关文章
- css盒子模型、边框border、外边距margin、填充padding、轮廓outline
盒子模型:盒子默认的宽度为容器的宽度,也可以自省设定宽度,高度根据内容适应,也可以自行设定高度.min-height设定最小高度 一个盒子包括外边距.边框.内边距和实际内容 Margin(外边距):清 ...
- CSS轮廓outline
http://www.cnblogs.com/xiaohuochai/p/5277416.html
- 边框(Border) 和 轮廓(Outline) 属性
border 复合属性.设置对象边框的特性. 标签定义及使用说明 如果上述值缺少一个没有关系,例如border:#FF0000;是允许的. 默认值: not specified 继承: no Java ...
- 简单了解css3轮廓outline
outline属性是用来设置一个或多个单独的轮廓属性的简写属性 , 例如 . 轮廓有下面几个属性: { outline-style: solid; outline-width: 10px; outli ...
- HTML学习笔记 CSS表格及轮廓案例 第八节 (原创)参考使用表
#tb, tb1, tr, th, td { border: 5px solid blue; /*加边框*/ padding: 5px; /*内边距*/ } #tb1 { border-collaps ...
- 【CSS3】透明度opacity与rgba()区别、光标cursor、display、轮廓outline与margin及border区别、em和rem区别
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- CSS 不规则图形绘制
基础技能1 - 神奇的border 我们先来画一个长方形: .Rectangle { height: 100px; width: 200px; background: darkgray; border ...
- CSS中border和outline的区别
border: border-width:1px; border-style:solid; border-color:#ccc; 可以简写为:border:1ox solid #ccc; outlin ...
- CSS属性: 阴影 轮廓 渐变
注: 本文摘自 宁静致远 - CSDN / 但愿人长久 千里共婵娟 - CSDN 阴影 使用box-shadow属性可以为元素添加阴影效果, 比如 box-shadow: h-shadow v-sha ...
随机推荐
- chubby 是什么,和 zookeeper 比你怎么看?
chubby 是 google 的,完全实现 paxos 算法,不开源.zookeeper 是 chubby的开源实现,使用 zab 协议,paxos 算法的变种.
- 攻防世界杂项MISCall
MISCall 下载下来是一个附件但是不清楚他是个什么东西我先拉入kali看看 发现是一个tar包不过这个包我们需要使用以下的指令来解压 tar -xjvf d02f31b893164d56b7a8e ...
- 自动驾驶运动规划-Dubins曲线
1.Simple Car模型 如下图所示,Simple Car模型是一个表达车辆运动的简易模型.Simple Car模型将车辆看做平面上的刚体运动,刚体的原点位于车辆后轮的中心:x轴沿着车辆主轴方向, ...
- (stm32学习总结)—对寄存器的理解
芯片里面有什么 我们看到的 STM32 芯片是已经封装好的成品,主要由内核和片上外设组成.若与电脑类比,内核与外设就如同电脑上的 CPU 与主板.内存.显卡.硬盘的关系.STM32F103 采用的是 ...
- USB3.0接口EMC设计标准电路
- 一行代码让微信小程序支持 cookie
weapp-cookie 一行代码让微信小程序支持 cookie,传送门:github Intro 微信原生的 wx.request 网络请求接口并不支持传统的 Cookie,但有时候我们现有的后端接 ...
- C#枚举-通过值获取名字,通过名称获取值
public enum ProtoType { Move = 1, Enter = 2, Leave = 3, Attack, Die, } print("ProtoType.Move:&q ...
- 大数据学习之路又之从小白到用sqoop导出数据
写这篇文章的目的是总结自己学习大数据的经验,以为自己走了很多弯路,从迷茫到清晰,真的花费了很多时间,希望这篇文章能帮助到后面学习的人. 一.配置思路 安装linux虚拟机--->创建三台虚拟机- ...
- CentOS系统Tomcat 8.5或9部署SSL证书
本文档介绍了CentOS系统下Tomcat 8.5或9部署SSL证书的操作说明. 环境准备 操作系统:CentOS 7.6 64位 Web服务器:Tomcat 8.5或9 前提条件 已从阿里云SSL证 ...
- 走进JUC的世界
概念 同步锁:synchronized.Lock区别 1.synchronized是不需要进行手动解锁 2.synchronized可以锁方法.锁同步代码块 3.synchronized是Java自带 ...