outline和outline-offset属性实现简单的缝边效果
如果现在有个需求,让你实现下面的样式,你会怎么做呢?
我首先想到的是用 border + box-shadow 实现,代码如下
div {
margin: 50px auto;
width: 200px;
height: 100px;
background: #655;
border-radius: 5px;
border: 1px dashed #fff;
box-shadow: 0 0 0 10px #655;
}
当时,我个人认为没有其它方法可以实现了,直到后面在《css揭秘》一书当中看到了另外的方法,顿时豁然开朗
这个方法是用 css的 outline + outline-offset 属性来实现的
下面,我用自己的理解来说说这个2属性是什么,因为官方的解释对不熟悉这2个属性的人来说会有点懵
简单来说,outline属性等同于border,都可以绘制边框,可以看作是一条始终包裹在border外的边框,如下图
如上图,棕色是border,桃红色是 outline,只要border和outline属性同时作用于同一个元素,outline绘制的边框始终会在border外面
另外,如果你想给一个元素增加一条边框,使用 outline 或 border 都可以
在来说说outline-offset属性,可以简单理解为控制outline绘制的边框和border边框之间的距离,如下图
另外,outline-offset属性还可接收负值,正是这个特性,让我们能够实现缝边的效果,代码如下
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<title></title>
<style>
div {
margin: 50px auto;
width: 200px;
height: 100px;
background: #655;
border-radius: 5px;
outline: 1px dashed #fff;
outline-offset: -15px;
}
</style>
</head> <body>
<div></div>
</body> </html>
outline和outline-offset属性实现简单的缝边效果的更多相关文章
- 实例级别和类级别的static、构造函数、字段属性的简单介绍
using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace 实例级别 ...
- HTML表格属性及简单实例
这里主要总结记录下表格的一些属性和简单的样式,方便以后不时之需. 1.<table> 用来定义HTML的表格,具有本地属性 border 表示边框,border属性的值必须为1或空字符串( ...
- 使用CSS实现一个简单的幻灯片效果
方法一: 简单的CSS代码实现幻灯片效果 方法二: 使用CSS3 Animation来制作幻灯片 方法一: 简单的CSS代码实现幻灯片效果 话不多说,直接上代码 <!DOCTYPE html&g ...
- 【从无到有】教你使用animation做简单的动画效果
今天写写怎么用animation属性做一些简单的动画效果 在CSS选择器中,使用animition动画属性,调用声明好的关键帧 首先声明一个动画(关键帧): @keyframes name{ from ...
- 利用css3的text-shadow属性实现文字阴影乳白效果
现在CSS3+html5的网页应用的越来越广泛了.很多网页中的字体同样可以用CSS3来实现炫酷的效果. 下面就介绍一下利用css3的text-shadow属性实现文字阴影乳白效果.这是在设计达人上面看 ...
- 第107天:Ajax 实现简单的登录效果
使用 Ajax 实现简单的登录效果 Ajax是一项使局部网页请求服务器信息,而不需整体刷新网页内容的异步更新技术.这使得向服务器请求的数据量大大减少,而且不会因局部的请求失败而影响到整体网页的加载. ...
- 有趣的css—简单的下雨效果2.0版
简单的下雨效果2.0版 前言 笔者上一篇发布的文章有趣的css-简单的下雨效果中有位老哥给我提了一个很棒的建议,大致意思是波纹应该产生于雨滴的消失处. 这是按照老哥的建议完善后的效果图: 由于我制作G ...
- jQery简单Tab选项卡效果
简单的Tab效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...
- Cocos2d-x实现简单的翻牌效果
触发器互联网影响找了很多.有自己的点重写一个复杂的sprite类来实现.简单的操作来对引擎的使用CCOrbitCamera实现,但是,也存在一些问题,后变反了. 我在用的仅仅是一个简单的翻牌效果,点击 ...
随机推荐
- centos7 安装mysql5.7.20(yum方式)
windows下安装mysql请访问:windows下mysql5.7.20安装(zip包方式) 一.安装过程 1.安装wget yum install wget 2.查找yum源名称 在mysql官 ...
- C51汇编典型代码&一些org-mode技巧
C51汇编典型代码&一些org-mode技巧 文档存放 具体内容可见存放的数据. 下面主要介绍关键代码. ASM 部分 1;; LCD数据发送========================= ...
- UVa156
#include <bits/stdc++.h> using namespace std; map<string,int> cnt; vector<string> ...
- HTML5新规范和CSS3新特性
1.HTML5最新规范(HTML5是HTML.XHTML以及HTML.DOM的新标准) ①用于绘画canvas元素 ②用于媒介回放的video和audio元素 ③对本地离线存储的更好支持 ④新的特俗内 ...
- 涂色(CQOI2007)
--BZOJ1260_区间dp Description 假设你有一条长度为5的木版,初始时没有涂过任何颜色.你希望把它的5个单位长度分别涂上红.绿.蓝.绿.红色,用一个长度为5的字符串表示这个目标:R ...
- laravel-重定向携带自定义消息
在控制器写: return redirect(route('member_create'))->with('success', '操作成功'); //指定到路由名member_create // ...
- Java的xml与map,与Bean互转
xml与map互转,主要使用dom4j import org.dom4j.Document; import org.dom4j.DocumentException; import org.dom4j. ...
- Jenkins构建maven项目跳过测试用例的命令
在Jenkins构建项目的时候,有时候执行大量的单元测试用例需要浪费很多时间,又或者测试环境与其他dubbo,zookeeper服务器环境不通执行失败, 为了更快速的构建,可在build选项中使用如下 ...
- JS中的instanceof和typeof,以及特殊引用类型
1.instanceof是用于测试对象类型,通常格式为:a instanceof b,返回true或falise,表示为对象a是否是类型b的实例. typeof则是用于测试基本类型,包括undefin ...
- mysql创建新的用户及flush privileges解析
1.首先以root用户登录到mysql mysql -u root -p 2.接着要知道mysql的用户信息是存储在mysql.user(mysql数据库下的user数据表)下的,所以我们只需添加一个 ...