小聊outline和border
border与outline:
border属性:
border-width、border-style、border-color 其中border-style可以为none或hidden
outline(轮廓)
在元素边框边缘的外围绘制一条包围元素的线,包括outline-color、outline-style、outline-width三个子属性的设置,可缺省,无固定顺序。轮廓不占据页面空间,也不一定是矩形。
除了IE以外的浏览器都直接支持outline。只有规定了!DOCUMENT之后的IE8以上版本的浏览器才支持outline。
outline-style可为none(不含有hidden属性)
总结:这两者的区别有:
1.outline是不占空间的,既不会增加额外的width或者height(这样不会导致浏览器渲染时出现reflow或是repaint)
2.outline有可能是非矩形的(火狐浏览器下)
在FireFox浏览器中,就有和outline
匹对的圆角夫妻outline-radius
示例:
使用outline实现下图效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>直角三角形(右下角)</title>
<style type="text/css">
.use-outline-offset{
margin-left: auto;
margin-right: auto;
width: 200px;
height: 200px;
border:40px solid #000000;
background-color:#cccccc;
outline-width:40px;
outline-style:dotted;
outline-offset:-80px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="use-outline-offset"></div>
</body>
</html>
效果图:
box-shadow模拟outline的圆角效果
outline-radius
虽然没戏了,但是,我们可以使用其他属性,可以实现类似的效果,比方说,图形构建大神之一的box-shadow
.
我们平时使用box-shadow
最多的是前面3个参数,水平/垂直偏移以及模糊大小,可能有一些小伙伴并不清楚其第4个可选参数值究竟有何用?box-shadow
第4个参数值,名外扩展,可以把投影范围扩大,当然,扩大的区域是实色区域。我们就可以利用这一特性,模拟实现不影响元素占据尺寸的outline
实色边框效果啦!
实例先行,代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圆角</title>
<style type="text/css">
.outline-radius {
margin: 200px auto;
width: 400px;
height: 300px;
border-radius: 1px;
box-shadow: 0 0 0 30px #cd0000;
}
.outline-radius>img{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="outline-radius">
<img src="img/mm1.jpg">
</div>
</body>
</html>
效果图如下:
下面简单解释下两行CSS代码的含义:
border-radius: 1px
表示圆角大小1像素。有同学可能奇怪了,怎么是1像素啊,截图圆角明明好几十像素,下面正好就解释了;box-shadow: 0 0 0 30px #cd0000
出现了4个数值,分别是水平偏移0, 垂直偏移0,模糊0(纯色), 扩展大小30像素。我们可以想象成,光线直接从盒子的正上方照下来,因为没有偏移没有模糊,我们看不到任何阴影。实际上,盒子的阴影正好就是盒子的大小(外带1像素圆角),此时,扩展30像素,我们可以脑补一下,1像素圆角的阴影再扩展30像素。哟,不就是我们需要的效果嘛,不就是截图展示的效果嘛!知道
border-radius
1像素的左右了吧,扩展30像素后,圆角就是30像素大小了。
然而,虽然肉眼看不出来,上面的方法实际有瑕疵,因为图片不是纯正的直角,有1像素的圆角。如果你想实现完美的内方外圆的效果,可以套一层标签,外面的标签使用border-radius
和box-shadow
就可以了。
结束语:
周末总结了border和outline这两个属性的用法。
参考文章:
- http://www.zhangxinxu.com/wordpress/2015/04/css3-radius-outline/
- http://www.zhangxinxu.com/wordpress/2010/01/%E9%A1%B5%E9%9D%A2%E5%8F%AF%E7%94%A8%E6%80%A7%E4%B9%8Boutline%E8%BD%AE%E5%BB%93%E5%A4%96%E6%A1%86%E7%9A%84%E4%B8%80%E4%BA%9B%E7%A0%94%E7%A9%B6/
- http://www.zhangxinxu.com/wordpress/2013/11/%E7%BA%AFcss-focus-outline-%E5%88%87%E6%8D%A2-transition-%E5%8A%A8%E7%94%BB/
- https://zhidao.baidu.com/question/188658347.html
- http://www.runoob.com/css/css-border.html
- http://www.runoob.com/cssref/pr-outline.html
小聊outline和border的更多相关文章
- outline使用方法,outline与border的区别:
在浏览器里,当鼠标点击或使用Tab键让一个链接或者一个radio获得焦点的时候,该元素将会被一个轮廓虚线框围绕.这个轮廓虚线框就是 outline . outline 能告诉用户那一个可以激发事件的h ...
- outline与border的区别
在浏览器里,当鼠标点击或使用Tab键让一个链接或者一个radio获得焦点的时候,该元素将会被一个轮廓虚线框围绕.这个轮廓虚线框就是 outline . outline 能告诉用户那一个可以激发事件的h ...
- 【前端小技巧】利用border画三角形及梯形
border是围绕元素内容和内边距的一条或多条线,border 属性允许你规定元素边框的样式.宽度和颜色 值: border-width 粗细 none/hidden/solid/dashed/dot ...
- 编写css相关注意事项以及小技巧
一.小技巧 1.对于开始写网站css之前一般都要对css进行重置(养成写注释的习惯): ;;} body{font-size:16px;} img{border:none;} li{list-styl ...
- CSS语法与用法小字典
前言:这是上学时期对CSS学习的整理,一直没见过光,由于不是专门做前端开发的,难免写不到重点,但对于看懂CSS,和掌握一些基本的用法,熟悉里面的门路还是大有裨益的.由于是从word中贴过来的,排版和格 ...
- CSS如何实现圆角的outline效果?
一.首先,outline是个很牛逼的东西 温故而知鑫,10年的时候写过一篇可用性方面的文章:“页面可用性之outline轮廓外框的一些研究”,还算挺有用的:3年之后,也就是13年,介绍了个没什么使用价 ...
- CSS border系列
本文更新版链接 一.border 关于border的3个属性,分别为border-width.border-style.border-color. 其中,border-color默认为元素内容的前景色 ...
- 自定义select 小三角
把select小三角换成自己的图片 效果: css样式: <style> #my_select { display: flex; display: -webkit-flex; width: ...
- JavaScript小练习2-网页换肤
题目 分析 三个皮肤切换按钮的选择 用li即可. 点击显示白点 li中嵌套一个li,onclick时改变子元素li的css onload 当页面加载完成后立即执行一段JavaScript代码. onl ...
随机推荐
- CPU, PSU, SPU的区别
It all started in January 2005 with Critical Patch Updates (CPU). Then Patch Set Updates (PSU) were ...
- CentOS6.5安装完没有网络的解决办法
昨天下了个CentOS 6.5 Minimal 版,在VMware 10下安装好了之后,发现上不了网,PING外网也PING不通. 在网上搜了一下,发现Linux安装好了之后,网卡默认是没有启动的,下 ...
- LAMP 3.5 mysql备份与恢复
备份库的命令 mysqldump -uroot -pwangshaojun discuz > /data/discuz.sql 指定用户密码,重定向到某文件 恢复 mysql -uroot -p ...
- windows系统中启动应用需要的端口被别的程序占用
开始--运行--cmd 进入命令提示符 输入netstat -ano 即可看到所有连接的PID 之后在任务管理器中找到这个PID所对应的程序如果任务管理器中没有PID这一项,可以在任务管理器中选&qu ...
- springmvc配置式开发下的视图解析器
多个视图解析器优先级:
- ARC059F
传送门 分析 见ptx大爷博客 代码 #include<iostream> #include<cstdio> #include<cstring> #include& ...
- ZROI2018提高day1t2
传送门 分析 考场上看错了第一个条件,于是觉得是个简单贪心,随便取了每一个点的最大收益然后算了一下,就得了40pts...看来读对题很重要呀qwq.实际的正解是这样的:我们将每一个i与f[i]连一条边 ...
- Django models模型ORM
一.ORM介绍 映射关系: 表名 -------------------->类名 字段-------------------->属性 表记录----------------->类实例 ...
- Servlet HTTP 状态码 以及 获得浏览器URL
Servlet HTTP 状态码 HTTP 请求和 HTTP 响应消息的格式是类似的,结构如下: 初始状态行 + 回车换行符(回车+换行) 零个或多个标题行+回车换行符 一个空白行,即回车换行符 一个 ...
- 转/keystore和truststore的区别
keytool是java自带的工具用于产生密钥 keystore可以看成一个放key的库,key就是公钥,私钥,数字签名等组成的一个信息. truststore是放信任的证书的一个store. 那他们 ...