小聊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 ...
随机推荐
- 将openfire部署到CentOS云服务器上
http://ishere.cn/2014/07/25/centos-64bit-openfire.html CentOS 64位安装openfire http://www.cnblogs. ...
- DAY5-模块与包
一.模块的介绍 1.什么是模块 #常见的场景:一个模块就是一个包含了一组功能的python文件,比如spam.py,模块名为spam,可以通过import spam使用. #在python中,模块的使 ...
- oracle时间段查询-从00:00:00开始
之所以记录一下这篇博文,是因为前段时间搞的一个查询发现要从00:00:00这个时间段开始,必须要通过拼接字符串. <select id="queryApplyProgressList& ...
- eclipse怎么查看class文件(eclipse安装反编译插件)
本人eclipse版本: Eclipse Java EE IDE for Web Developers. Version: Mars.2 Release (4.5.2) 步骤1:下载两个我们需要的东西 ...
- spirng boot web配置开发
spring-booter-starter-web是spring-boot web发开的核心,自动配置信息存储在spring-boot-autoconfigure.jar 下面的web目录里面,包含了 ...
- DOM 操作属性
DOM操作就是针对对象的操作 先写一个按钮,<input tupe="button" value="" id="id"> 这 ...
- schedule与scheduleAtFixedRate比较
schedule与scheduleAtFixedRate: 不延时: schedule(TimerTask, Date runDate, long period)方法任务不延时----Date类型 i ...
- 【转】nginx+memcached构建页面缓存应用
如需转载请注明出处: http://www.ttlsa.com/html/2418.html nginx的memcached_module模块可以直接从memcached服务器中读取内容后输出,后续的 ...
- HDOJ 1121 Complete the Sequence
[题目大意]有一个数列P,它的第i项是当x=i时,一个关于x的整式的值.给出数列的前S项,你需要输出它的第S+1项到第S+C项,并且使整式的次数最低.多测. [数据范围]数据组数≤5000,S+C≤1 ...
- DR客户端一直连接服务器....(6)
DR客户端一直连接服务器....(非未选择网卡)解决方法: 控制面板-->网络和 Internet-->网络连接,打开本地连接(以太网)属性,将IPV4协议前面的对勾去掉,重启DR 这样D ...